.article-page {
  background: var(--paper-1);
  color: var(--ink-0);
}

.article-topbar {
  max-inline-size: var(--content-max);
  margin-inline: auto;
  min-block-size: 4.5rem;
  padding-inline: clamp(1rem, 3vw, 3rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-block-end: 1px solid var(--line);
}

.article-logo {
  color: var(--ink-0);
  font-weight: 950;
  letter-spacing: .16em;
  font-size: 1.15rem;
}

.article-topbar__meta {
  display: flex;
  gap: .5rem;
  font-size: var(--text-xs);
  color: var(--ink-2);
  text-transform: uppercase;
}

.article-shell {
  max-inline-size: var(--content-max);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 4rem);
}

.article-hero {
  max-inline-size: 1100px;
  padding-block: clamp(3rem, 9vw, 8rem) clamp(2rem, 5vw, 4rem);
}

.article-kicker,
.block-kicker {
  color: var(--brand-oxide);
  font-size: var(--text-xs);
  font-weight: 900;
  letter-spacing: .12em;
}

.article-hero h1 {
  margin: .55rem 0 1.25rem;
  max-inline-size: 17ch;
  font-size: clamp(2.5rem, 7vw, 7.5rem);
  line-height: .94;
  letter-spacing: -.05em;
}

.article-dek {
  max-inline-size: 55rem;
  color: var(--ink-1);
  font-size: clamp(1.1rem, 2vw, 1.55rem);
  line-height: 1.7;
}

.article-byline {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem 1.25rem;
  margin-block-start: var(--space-5);
  color: var(--ink-2);
  font-size: var(--text-sm);
  padding-block-start: var(--space-4);
  border-block-start: 1px solid var(--line);
}

.article-content {
  max-inline-size: var(--reading-max);
  margin-inline: auto;
  padding-block-end: var(--space-9);
}

.story-paragraph {
  font-size: clamp(1.05rem, 1.5vw, 1.22rem);
  line-height: 2;
  margin-block: 1.45em;
}

.story-heading {
  margin-block: 2.4em .8em;
  line-height: 1.25;
  letter-spacing: -.025em;
}

.block {
  margin-block: var(--space-6);
}

.key-facts,
.callout,
.evidence-block,
.methodology-block,
.editorial-note,
.update-note,
.tool-embed,
.commercial-note,
.related-placeholder,
.media-placeholder {
  padding: var(--space-5);
  border: 1px solid var(--line);
  background: var(--paper-0);
}

.key-facts {
  border-block-start: 5px solid var(--brand-signal);
}

.fact-list,
.check-list,
.criteria-list {
  display: grid;
  gap: .65rem;
  padding-inline-start: 1.25rem;
}

.story-quote {
  margin-inline: 0;
  padding: var(--space-5) clamp(1.5rem, 5vw, 4rem);
  border-inline-start: 5px solid var(--brand-oxide);
  font-size: clamp(1.3rem, 3vw, 2rem);
  line-height: 1.55;
}

.story-quote cite {
  display: block;
  margin-block-start: 1rem;
  font-size: var(--text-sm);
  color: var(--ink-2);
}

.steps-block ol,
.timeline-block ol {
  list-style: none;
  padding: 0;
  counter-reset: step;
}

.steps-block li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: var(--space-4);
  align-items: start;
  padding-block: var(--space-4);
  border-block-end: 1px solid var(--line);
}

.steps-block li::before {
  content: counter(step, decimal-leading-zero);
  color: var(--brand-oxide);
  font-weight: 950;
  font-size: var(--text-lg);
}

.pros-cons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.pros-cons > div {
  background: var(--paper-1);
  padding: var(--space-5);
}

.pros-cons > div:first-child h2 { color: var(--success); }
.pros-cons > div:last-child h2 { color: var(--danger); }

.table-scroll {
  overflow-x: auto;
  border: 1px solid var(--line);
}

.table-scroll table {
  border-collapse: collapse;
  inline-size: 100%;
  min-inline-size: 38rem;
}

.table-scroll th,
.table-scroll td {
  padding: .9rem;
  text-align: start;
  border-block-end: 1px solid var(--line);
  border-inline-end: 1px solid var(--line);
}

.table-scroll th {
  background: var(--ink-0);
  color: var(--paper-1);
}

.code-block {
  margin-inline: 0;
}

.code-block pre {
  overflow: auto;
  padding: var(--space-5);
  background: var(--ink-0);
  color: var(--paper-1);
  direction: ltr;
  text-align: left;
  border-radius: var(--radius-sm);
}

.timeline-block li {
  position: relative;
  padding: 0 var(--space-5) var(--space-5);
  border-inline-start: 1px solid var(--line);
}

.timeline-block li::before {
  content: "";
  position: absolute;
  inset-inline-start: -.35rem;
  inset-block-start: .25rem;
  inline-size: .65rem;
  block-size: .65rem;
  border-radius: 50%;
  background: var(--brand-signal);
}

.faq-block details {
  border-block-end: 1px solid var(--line);
  padding-block: var(--space-4);
}

.faq-block summary {
  cursor: pointer;
  font-weight: 900;
}

.evidence-block {
  border-inline-start: 5px solid var(--brand-nile);
}

.methodology-block {
  border-inline-start: 5px solid var(--brand-deep);
}

.update-note {
  border-inline-start: 5px solid var(--brand-signal);
}

.article-form-longform .article-hero {
  max-inline-size: none;
  min-block-size: min(78vh, 760px);
  display: grid;
  align-content: end;
  border-block-end: 1px solid var(--line);
}

.article-form-longform .article-hero h1 {
  max-inline-size: 13ch;
  font-size: clamp(3rem, 9vw, 9rem);
}

.article-form-knowledge_path .article-content {
  max-inline-size: 900px;
  border-inline-start: 1px solid var(--line);
  padding-inline-start: clamp(1rem, 4vw, 3rem);
}

.article-form-decision_board .article-content {
  max-inline-size: 1180px;
}

.article-form-decision_board .comparison-block,
.article-form-decision_board .pros-cons {
  inline-size: min(1180px, calc(100vw - 2rem));
  margin-inline: 50%;
  transform: translateX(-50%);
}

[dir="rtl"] .article-form-decision_board .comparison-block,
[dir="rtl"] .article-form-decision_board .pros-cons {
  transform: translateX(50%);
}

.article-footer {
  max-inline-size: var(--content-max);
  margin-inline: auto;
  padding: var(--space-6) clamp(1rem, 4vw, 4rem);
  border-block-start: 1px solid var(--ink-0);
  display: flex;
  justify-content: space-between;
  color: var(--ink-2);
}

@media (max-width: 720px) {
  .article-hero { padding-block-start: var(--space-7); }
  .article-topbar__meta { display: none; }
  .pros-cons { grid-template-columns: 1fr; }
  .article-form-knowledge_path .article-content {
    border-inline-start: 0;
    padding-inline-start: 0;
  }
}


.story-media,
.story-gallery,
.story-video,
.story-audio {
  margin-inline: 0;
}

.story-media img,
.story-gallery img,
.story-video video {
  display: block;
  inline-size: 100%;
  block-size: auto;
  background: var(--paper-0);
}

.story-media figcaption,
.story-gallery figcaption,
.story-video figcaption,
.story-audio figcaption {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  padding-block-start: .65rem;
  color: var(--ink-2);
  font-size: var(--text-xs);
}

.story-gallery__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .35rem;
}

.story-gallery__grid img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.story-video video {
  max-block-size: min(75vh, 760px);
  background: #000;
}

.story-audio {
  padding: var(--space-4);
  border-block: 1px solid var(--line);
}

.story-audio audio {
  inline-size: 100%;
  margin-block-start: var(--space-3);
}

.story-audio details {
  margin-block-start: var(--space-3);
}

.media-annotation {
  margin-block-start: .6rem;
  padding-inline-start: .8rem;
  border-inline-start: 3px solid var(--brand-signal);
  color: var(--ink-1);
  font-size: var(--text-sm);
}

@media (max-width: 720px) {
  .story-gallery__grid { grid-template-columns: 1fr; }
}

.byline-credit { display:inline-flex; align-items:baseline; gap:.35rem; }
.byline-credit small { color:var(--ink-2); }
.byline-credit a,.byline-credit strong { color:var(--ink-0); font-weight:900; }

.commercial-note { border-inline-start:5px solid var(--brand-oxide); }
.commercial-disclosure {
  margin-block:var(--space-4);
  padding:var(--space-3);
  background:var(--paper-1);
  border:1px solid var(--brand-oxide);
  font-weight:800;
  line-height:1.7;
}
.commercial-cta {
  display:inline-flex;
  margin-block-start:var(--space-2);
  padding:.75rem 1rem;
  background:var(--ink-0);
  color:var(--paper-1);
  font-weight:900;
}

.article-related {
  max-width: 1200px;
  margin: var(--space-8) auto;
  padding: var(--space-6);
  border-block: 1px solid var(--ink-0);
}
.article-related__topics {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-block-end: var(--space-5);
}
.topic-chip {
  display: inline-flex;
  padding: .45rem .7rem;
  border: 1px solid var(--ink-0);
  font-size: var(--text-sm);
  font-weight: 800;
}
.article-related__list > h2 {
  margin: 0 0 var(--space-4);
  font-size: var(--text-xl);
}
.article-related__list { display: grid; gap: 0; }
.article-related__list article {
  display: grid;
  grid-template-columns: minmax(6rem,.2fr) 1fr auto;
  gap: var(--space-4);
  align-items: baseline;
  padding-block: var(--space-4);
  border-block-end: 1px solid var(--line);
}
.article-related__list article > span {
  color: var(--brand-oxide);
  font-size: var(--text-xs);
  font-weight: 900;
  text-transform: uppercase;
}
.article-related__list h3 { margin: 0; font-size: 1.2rem; }
.article-related__topic-link { color: var(--ink-2); font-size: var(--text-xs); }
@media (max-width: 720px) {
  .article-related__list article { grid-template-columns: 1fr; gap: .4rem; }
}

.sponsorship-disclosure {
  margin-block-end: var(--space-5);
  padding: var(--space-4);
  border: 2px solid var(--ink-0);
  background: var(--paper-2);
}
.sponsorship-disclosure__label {
  display: block;
  margin-block-end: .35rem;
  color: var(--brand-oxide);
  font-size: var(--text-xs);
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.sponsorship-disclosure strong { display: block; font-size: var(--text-lg); }
.sponsorship-disclosure p { margin: .5rem 0; max-width: 70ch; }
.sponsorship-disclosure a {
  display: inline-flex;
  margin-block-start: .3rem;
  font-weight: 800;
  text-decoration: underline;
}


/* 2026 public design system alignment */
.article-page {
  background: var(--paper-0);
}

.article-shell {
  width: min(calc(100% - 2rem), var(--content-max));
  max-inline-size: none;
  padding-inline: 0;
}

.article-hero {
  max-inline-size: none;
  padding-block: clamp(2.5rem, 6vw, 5.5rem) var(--space-7);
  border-block-end: 1px solid var(--ink-0);
}

.article-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(15rem, .45fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: end;
}

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

.article-hero h1 {
  max-inline-size: 15ch;
  font-size: clamp(2.6rem, 5.8vw, 6.2rem);
  line-height: .98;
}

.article-dek {
  max-inline-size: 48rem;
}

.article-hero__rail {
  padding-block-start: var(--space-4);
  border-block-start: 3px solid var(--brand-oxide);
}

.article-hero__rail dl {
  margin: var(--space-4) 0 0;
}

.article-hero__rail dl > div {
  display: grid;
  grid-template-columns: 6.5rem 1fr;
  gap: var(--space-3);
  padding-block: .7rem;
  border-block-end: 1px solid var(--line);
}

.article-hero__rail dt {
  color: var(--ink-2);
  font-size: var(--text-xs);
}

.article-hero__rail dd {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: 800;
}

.article-content {
  max-inline-size: min(100%, 820px);
  margin-inline: auto;
  padding-block-start: var(--space-6);
}

.story-paragraph {
  font-size: clamp(1.08rem, 1.35vw, 1.22rem);
  line-height: 1.95;
}

.evidence-block,
.methodology-block,
.editorial-note,
.update-note,
.callout,
.key-facts {
  border-radius: 0;
  box-shadow: none;
}

.article-related {
  width: min(100%, 1100px);
  margin-block: var(--space-8);
  background: var(--paper-1);
}

@media (max-width: 820px) {
  .article-shell {
    width: min(calc(100% - 1.2rem), var(--content-max));
  }

  .article-hero__grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .article-hero__rail {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-5);
    align-items: start;
  }

  .article-hero__rail dl {
    margin: 0;
  }
}

@media (max-width: 560px) {
  .article-hero {
    padding-block-start: var(--space-6);
  }

  .article-hero h1 {
    font-size: clamp(2.25rem, 11vw, 3.7rem);
  }

  .article-hero__rail {
    grid-template-columns: 1fr;
  }

  .article-byline {
    display: grid;
  }

  .story-paragraph {
    line-height: 1.85;
  }
}

/* Editorial article refinement */
.article-hero {
  position: relative;
}
.article-hero::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0;
  inline-size: clamp(5rem,11vw,10rem);
  block-size: 4px;
  background: var(--brand-oxide);
}
.article-kicker {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
}
.article-kicker::after {
  content: "";
  inline-size: 2.6rem;
  block-size: 2px;
  background: currentColor;
}
.article-hero h1 {
  max-inline-size: 12.5ch;
  font-size: clamp(3.3rem,6.7vw,7rem);
  line-height: .9;
  letter-spacing: -.06em;
}
.article-hero__rail {
  border-block-start: 0;
  border-inline-start: 1px solid var(--line);
  padding-inline-start: var(--space-5);
}
[dir="rtl"] .article-hero__rail {
  padding-inline-start: var(--space-5);
}
.article-hero__rail .public-label::after {
  inline-size: 1.4rem;
}
.article-content > .block:first-child {
  margin-block-start: 0;
}
.key-facts {
  border: 0;
  border-block: 1px solid var(--ink-0);
  background: transparent;
  padding-inline: 0;
}
.evidence-block {
  background: color-mix(in srgb, var(--brand-nile) 8%, var(--paper-0));
}
.article-related {
  background: transparent;
  border-block: 1px solid var(--ink-0);
}
@media (max-width: 820px) {
  .article-hero__rail {
    border-inline-start: 0;
    border-block-start: 1px solid var(--line);
    padding-inline-start: 0;
    padding-block-start: var(--space-4);
  }
}

/* Reading-first article layout inspired by high-clarity editorial sites */
.article-page {
  background: #eef2f4;
}
:root[data-theme="dark"] .article-page {
  background: var(--paper-0);
}
.article-shell {
  width: min(calc(100% - 2rem), 1180px);
}
.article-hero {
  margin-block-start: 1.75rem;
  padding: clamp(1.6rem, 3vw, 2.8rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper-1);
  box-shadow: var(--shadow-1);
}
.article-hero::before {
  display: none;
}
.article-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  align-items: center;
  margin-block-end: 1.35rem;
  color: var(--ink-2);
  font-size: var(--text-xs);
}
.article-breadcrumb a:hover {
  color: var(--brand-oxide);
}
.article-hero__main {
  max-width: 900px;
}
.article-kicker {
  padding: .28rem .55rem;
  border-radius: var(--radius-xs);
  background: var(--brand-oxide);
  color: #fff;
  letter-spacing: 0;
}
.article-kicker::after {
  display: none;
}
.article-hero h1 {
  max-inline-size: 24ch;
  margin: 1rem 0 .8rem;
  font-size: clamp(2rem, 4vw, 3.55rem);
  line-height: 1.18;
  letter-spacing: -.025em;
}
.article-dek {
  max-inline-size: 62rem;
  font-size: clamp(1rem, 1.4vw, 1.18rem);
  line-height: 1.85;
}
.article-byline {
  margin-block-start: 1.15rem;
  padding-block-start: 1rem;
}
.article-cover {
  margin: 1.6rem 0 0;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--paper-2);
}
.article-cover img {
  display: block;
  inline-size: 100%;
  max-block-size: 620px;
  object-fit: cover;
}
.article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 1.5rem;
  align-items: start;
  margin-block-start: 1.5rem;
}
.article-content {
  max-inline-size: none;
  margin: 0;
  padding: clamp(1.4rem, 3vw, 2.5rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper-1);
  box-shadow: var(--shadow-1);
}
.story-paragraph {
  max-inline-size: 72ch;
  margin-inline: auto;
  font-size: clamp(1.05rem, 1.3vw, 1.16rem);
  line-height: 2.05;
}
.story-heading {
  max-inline-size: 72ch;
  margin-inline: auto;
  padding: .65rem .9rem;
  border-inline-start: 4px solid var(--brand-oxide);
  background: var(--paper-2);
  color: var(--brand-deep);
  line-height: 1.4;
}
.block {
  max-inline-size: 72ch;
  margin-inline: auto;
}
.story-media,
.story-gallery,
.story-video,
.comparison-block,
.table-block {
  max-inline-size: 100%;
}
.article-sidebar {
  position: sticky;
  inset-block-start: 1rem;
  display: grid;
  gap: 1rem;
}
.article-toc,
.article-sidebar__box {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper-1);
  box-shadow: var(--shadow-1);
}
.article-sidebar__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .85rem 1rem;
  border-block-end: 3px solid var(--brand-oxide);
  color: var(--brand-deep);
}
.article-sidebar__head span {
  color: var(--ink-2);
  font-size: var(--text-xs);
}
.article-toc ol {
  list-style: none;
  margin: 0;
  padding: .45rem 1rem .75rem;
}
.article-toc li {
  border-block-end: 1px solid var(--line);
}
.article-toc li:last-child {
  border-block-end: 0;
}
.article-toc a {
  display: block;
  padding: .68rem 0;
  color: var(--ink-1);
  font-size: .86rem;
  line-height: 1.55;
}
.article-toc li[data-level="3"] a,
.article-toc li[data-level="4"] a {
  padding-inline-start: .8rem;
  color: var(--ink-2);
  font-size: .8rem;
}
.article-toc a:hover {
  color: var(--brand-oxide);
}
.article-sidebar__facts {
  margin: 0;
  padding: .55rem 1rem .8rem;
}
.article-sidebar__facts > div {
  display: grid;
  grid-template-columns: 6rem 1fr;
  gap: .55rem;
  padding-block: .55rem;
  border-block-end: 1px solid var(--line);
}
.article-sidebar__facts > div:last-child {
  border-block-end: 0;
}
.article-sidebar__facts dt {
  color: var(--ink-2);
  font-size: .78rem;
}
.article-sidebar__facts dd {
  margin: 0;
  font-size: .84rem;
  font-weight: 800;
}
.article-sidebar__topics,
.article-share {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  padding: .9rem 1rem 1rem;
}
.article-sidebar__topics a,
.article-share a,
.article-share button {
  padding: .42rem .58rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-xs);
  background: var(--paper-0);
  color: var(--ink-1);
  font: inherit;
  font-size: .78rem;
  font-weight: 800;
  cursor: pointer;
}
.article-share a:hover,
.article-share button:hover,
.article-sidebar__topics a:hover {
  border-color: var(--brand-oxide);
  color: var(--brand-oxide);
}
.article-related {
  max-width: none;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper-1);
  box-shadow: var(--shadow-1);
}
.article-related__topics,
.article-related__list {
  padding-inline: 1.2rem;
}
.article-related__topics {
  padding-block-start: 1.2rem;
}
.article-related__list {
  padding-block-end: 1.2rem;
}
.article-footer {
  width: min(calc(100% - 2rem), 1180px);
}

@media (max-width: 900px) {
  .article-layout {
    grid-template-columns: 1fr;
  }
  .article-sidebar {
    position: static;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .article-toc {
    grid-column: 1 / -1;
  }
}

@media (max-width: 620px) {
  .article-page {
    background: var(--paper-0);
  }
  .article-shell {
    width: min(calc(100% - 1rem), 1180px);
  }
  .article-hero {
    margin-block-start: .5rem;
    padding: 1.1rem;
  }
  .article-hero h1 {
    font-size: clamp(1.8rem, 9vw, 2.55rem);
  }
  .article-layout {
    margin-block-start: .75rem;
  }
  .article-content {
    padding: 1.05rem;
  }
  .article-sidebar {
    grid-template-columns: 1fr;
  }
  .story-paragraph {
    line-height: 1.95;
  }
  .story-heading {
    padding: .55rem .7rem;
  }
}

.article-related {
  padding: 1.2rem;
}
.article-related__head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  padding-block-end: 1rem;
  border-block-end: 3px solid var(--brand-oxide);
}
.article-related__head span {
  color: var(--ink-2);
  font-size: .78rem;
  font-weight: 800;
}
.article-related__head h2 {
  margin: .2rem 0 0;
  color: var(--brand-deep);
  font-size: clamp(1.35rem, 2.4vw, 2rem);
}
.article-related__head > a {
  color: var(--brand-oxide);
  font-size: .82rem;
  font-weight: 850;
}
.article-related__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  padding-block-start: 1rem;
}
.article-related-card {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper-0);
}
.article-related-card__media {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--paper-2);
}
.article-related-card__media img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transition: transform var(--motion-normal) var(--ease-out);
}
.article-related-card:hover .article-related-card__media img {
  transform: scale(1.025);
}
.article-related-card > div {
  padding: .9rem;
}
.article-related-card > div > span {
  color: var(--brand-oxide);
  font-size: .72rem;
  font-weight: 900;
  text-transform: uppercase;
}
.article-related-card h3 {
  margin: .35rem 0;
  font-size: 1rem;
  line-height: 1.55;
}
.article-related-card p {
  display: -webkit-box;
  overflow: hidden;
  margin: .35rem 0;
  color: var(--ink-2);
  font-size: .8rem;
  line-height: 1.55;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.article-related-card__topic {
  color: var(--ink-2);
  font-size: .72rem;
}
@media (max-width: 820px) {
  .article-related__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .article-related__head { align-items: start; flex-direction: column; }
  .article-related__grid { grid-template-columns: 1fr; }
}

/* Author identity, discussion and interaction */
.byline-credit--person a {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
}
.byline-avatar {
  inline-size: 2.15rem;
  block-size: 2.15rem;
  border-radius: 999px;
  object-fit: cover;
  border: 1px solid var(--line);
}
.article-comments {
  margin-block: 1.5rem var(--space-8);
  padding: 1.2rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper-1);
  box-shadow: var(--shadow-1);
}
.article-comments__head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  padding-block-end: 1rem;
  border-block-end: 3px solid var(--brand-oxide);
}
.article-comments__head span { color: var(--ink-2); font-size: .78rem; }
.article-comments__head h2 { margin: .15rem 0 0; color: var(--brand-deep); }
.article-comments__head > strong {
  min-inline-size: 2.3rem;
  block-size: 2.3rem;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--brand-oxide);
  color: #fff;
}
.article-comments__list { display: grid; gap: .75rem; padding-block: 1rem; }
.comment-card {
  display: grid;
  grid-template-columns: 2.6rem minmax(0,1fr);
  gap: .8rem;
  padding: .9rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper-0);
}
.comment-card__avatar {
  inline-size: 2.6rem;
  block-size: 2.6rem;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--brand-deep);
  color: #fff;
  font-weight: 900;
}
.comment-card header { display:flex; gap:.75rem; align-items:baseline; flex-wrap:wrap; }
.comment-card time { color:var(--ink-2); font-size:.75rem; }
.comment-card p { margin:.35rem 0 0; color:var(--ink-1); line-height:1.8; white-space:pre-wrap; }
.comment-card--new { animation: comment-in .35s var(--ease-out) both; }
.comments-empty { color:var(--ink-2); }
.comment-form {
  display: grid;
  gap: .8rem;
  padding-block-start: 1rem;
  border-block-start: 1px solid var(--line);
}
.comment-form label { display:grid; gap:.35rem; font-size:.82rem; font-weight:800; }
.comment-form input, .comment-form textarea {
  width:100%;
  box-sizing:border-box;
  padding:.75rem;
  border:1px solid var(--line);
  border-radius:var(--radius-xs);
  background:var(--paper-0);
  color:var(--ink-0);
  font:inherit;
}
.comment-form textarea { resize:vertical; min-height:8rem; line-height:1.8; }
.comment-form__foot { display:flex; gap:.8rem; align-items:center; flex-wrap:wrap; }
.comment-form button {
  padding:.65rem 1rem;
  border:0;
  border-radius:var(--radius-xs);
  background:var(--brand-oxide);
  color:#fff;
  font:inherit;
  font-weight:900;
  cursor:pointer;
}
.comment-form__foot span { color:var(--ink-2); font-size:.8rem; }
.comment-honeypot { position:absolute !important; inline-size:1px !important; block-size:1px !important; overflow:hidden !important; opacity:0 !important; pointer-events:none !important; }
.article-share a, .article-share button { box-shadow:0 1px 0 rgba(23,35,45,.04); }
.article-share a:hover, .article-share button:hover { transform:translateY(-2px); box-shadow:var(--shadow-1); }
.article-cover img { transition:transform .45s var(--ease-out); }
.article-cover:hover img { transform:scale(1.012); }
@keyframes comment-in { from{opacity:0;transform:translateY(.6rem)} to{opacity:1;transform:none} }

/* =========================================================
   Content-first article refinement:
   calmer chrome, readable content, utility sidebar.
   ========================================================= */
.article-page {
  background: #f3f6f8;
}
.article-shell {
  width: min(calc(100% - 2rem), 1120px);
}
.article-hero {
  margin-block-start: 1rem;
  padding: 1.35rem 1.5rem;
  border-radius: 3px;
  box-shadow: none;
}
.article-hero h1 {
  max-inline-size: 26ch;
  margin: .8rem 0 .6rem;
  font-size: clamp(1.9rem, 3.4vw, 3rem);
  line-height: 1.3;
}
.article-dek {
  max-inline-size: 68ch;
  font-size: 1rem;
  line-height: 1.85;
}
.article-cover {
  margin-block-start: 1.1rem;
  border-radius: 3px;
}
.article-layout {
  grid-template-columns: minmax(0, 1fr) 265px;
  gap: 1rem;
  margin-block-start: 1rem;
}
.article-content {
  padding: clamp(1.25rem, 2.4vw, 2rem);
  border-radius: 3px;
  box-shadow: none;
}
.story-paragraph {
  max-inline-size: 68ch;
  font-size: 1.05rem;
  line-height: 2;
}
.story-heading {
  max-inline-size: 68ch;
  padding: .55rem .75rem;
  border-inline-start: 3px solid #0d6a91;
  background: #f4f6f7;
  color: #153d5d;
}
.article-toc,
.article-sidebar__box {
  border-radius: 3px;
  box-shadow: none;
}
.article-sidebar__head {
  padding: .7rem .8rem;
  border-block-end: 2px solid #0d6a91;
}
.article-toc ol {
  padding-inline: .8rem;
}
.article-toc a {
  padding-block: .55rem;
}
.article-related {
  border-radius: 3px;
  box-shadow: none;
}
html[data-theme="dark"] .article-page {
  background: var(--paper-0);
}
html[data-theme="dark"] .story-heading {
  background: var(--paper-2);
  color: var(--ink-0);
}
@media (max-width: 620px) {
  .article-shell {
    width: min(calc(100% - .8rem),1120px);
  }
  .article-hero {
    padding: 1rem;
  }
  .article-content {
    padding: 1rem;
  }
}

.article-related-card__media .article-media-fallback {
  inline-size: 100%;
  block-size: 100%;
}
.article-published-time {
  color: var(--ink-2);
  white-space: nowrap;
}
.article-related-card__time {
  display: block;
  margin-block-start: .2rem;
  color: var(--ink-2);
  font-size: .72rem;
}
.update-note__time {
  display: inline-block;
  margin-block-end: .45rem;
  color: var(--brand-oxide);
  font-size: .78rem;
  font-weight: 900;
}

/* =========================================================
   Visual System V2 — editorial article flow and mobile repair.
   ========================================================= */
html[data-theme="light"] .article-page {
  background: #fff;
}
.article-shell {
  width: min(calc(100% - 2rem), 1180px);
}
.article-hero {
  padding-inline: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.article-cover {
  border-radius: 0;
}
.article-layout {
  grid-template-columns: minmax(0,1fr) 270px;
  gap: 1.6rem;
}
.article-content {
  padding: 1.5rem 0;
  border: 0;
  border-block-start: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.article-toc,
.article-sidebar__box,
.article-related {
  border-radius: 0;
  box-shadow: none;
}
.story-heading {
  border-inline-start-width: 3px;
  background: #f6f8f9;
}
@media (max-width: 900px) {
  .article-layout {
    grid-template-columns: minmax(0,1fr);
    gap: 1rem;
  }
  .article-content {
    grid-column: 1;
    min-width: 0;
  }
  .article-sidebar {
    grid-column: 1;
    position: static;
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
  .article-toc {
    grid-column: 1 / -1;
  }
}
@media (max-width: 620px) {
  .article-shell {
    width: min(calc(100% - 1rem),1180px);
  }
  .article-hero {
    padding: .85rem 0 1rem;
  }
  .article-layout {
    display: grid;
    grid-template-columns: minmax(0,1fr);
    margin-block-start: .5rem;
  }
  .article-content {
    min-width: 0;
    inline-size: 100%;
    padding: 1rem 0;
  }
  .article-sidebar {
    grid-template-columns: minmax(0,1fr);
  }
  .story-paragraph,
  .story-heading,
  .block {
    max-inline-size: 100%;
  }
}

/* Design System V3 — editorial reading typography and theme-aware elevation. */
[lang="ar"] .article-content .story-paragraph,
[lang="ar"] .article-content .story-quote,
[lang="ar"] .article-content .key-facts,
[lang="ar"] .article-content .callout,
[lang="ar"] .article-content .evidence-block,
[lang="ar"] .article-content .methodology-block,
[lang="ar"] .article-content .editorial-note,
[lang="ar"] .article-content .update-note {
  font-family: var(--font-editorial-ar);
}
[lang="ar"] .story-paragraph {
  font-size: clamp(1.18rem, 1.45vw, 1.34rem);
  line-height: 1.92;
  font-weight: 450;
}
[lang="ar"] .story-heading {
  font-family: var(--font-ui);
  font-weight: 700;
}
[lang="en"] .article-content .story-paragraph,
[lang="en"] .article-content .story-quote {
  font-family: var(--font-editorial-en);
}
.article-page { background: var(--surface-canvas); }
.article-hero,
.article-content,
.article-toc,
.article-sidebar__box,
.article-related {
  border-color: var(--border-subtle);
  background: var(--surface-raised);
  box-shadow: var(--shadow-1);
}
.article-kicker {
  background: var(--accent);
  color: var(--text-inverse);
}
.story-heading {
  background: var(--surface-muted);
  color: var(--text-primary);
  border-inline-start-color: var(--accent);
}

/* Editorial Variety V1 — content type identity before the reading body. */
.article-format-brief {
  margin-block: 1.1rem 1.4rem;
  padding: 1.2rem 1.35rem;
  display: grid;
  grid-template-columns: minmax(0,1.2fr) minmax(18rem,.8fr);
  gap: 1.4rem;
  align-items: center;
  border-block-start: 3px solid var(--accent);
  border-block-end: 1px solid var(--border-subtle);
  background: var(--surface-raised);
}
.article-format-brief__intro p {
  max-inline-size: 60ch;
  margin: .55rem 0 0;
  color: var(--text-secondary);
  line-height: 1.75;
}
.article-format-brief__metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(7rem,1fr));
  gap: 1px;
  background: var(--border-subtle);
  border: 1px solid var(--border-subtle);
}
.format-metric {
  min-height: 5.2rem;
  padding: .75rem;
  display: grid;
  align-content: center;
  gap: .18rem;
  background: var(--surface-soft);
}
.format-metric strong { color: var(--accent); font-size: 1.22rem; line-height: 1.1; }
.format-metric span { color: var(--text-primary); font-size: .72rem; font-weight: 750; }
.format-metric small { color: var(--text-muted); font-size: .66rem; }
.article-format-brief__note {
  grid-column: 1 / -1;
  margin: 0;
  padding-block-start: .8rem;
  border-block-start: 1px solid var(--border-subtle);
  color: var(--text-secondary);
}
.article-format-brief__facts {
  grid-column: 1 / -1;
  margin: 0;
  padding: .9rem 1.2rem 0 0;
  display: grid;
  gap: .55rem;
  border-block-start: 1px solid var(--border-subtle);
}
.article-format-brief--live { border-block-start-color: var(--danger); }
.article-format-brief--live .public-label,
.article-format-brief--live .format-metric strong { color: var(--danger); }
.article-format-brief--review { border-block-start-color: var(--signal); }
.article-format-brief--review .public-label,
.article-format-brief--review .format-metric strong { color: var(--signal); }
.article-format-brief--opinion { border-block-start-color: var(--accent-secondary); }
.article-format-brief--investigation { border-block-start-width: 5px; }
.article-format-brief--video,
.article-format-brief--podcast,
.article-format-brief--photo-story { background: color-mix(in srgb,var(--surface-inverse) 96%,transparent); color: var(--text-inverse); }
.article-format-brief--video .article-format-brief__intro p,
.article-format-brief--podcast .article-format-brief__intro p,
.article-format-brief--photo-story .article-format-brief__intro p { color: color-mix(in srgb,var(--text-inverse) 72%,transparent); }
.article-format-brief--video .format-metric,
.article-format-brief--podcast .format-metric,
.article-format-brief--photo-story .format-metric { background: color-mix(in srgb,var(--surface-inverse) 88%,var(--surface-raised)); }
.article-format-brief--video .format-metric span,
.article-format-brief--podcast .format-metric span,
.article-format-brief--photo-story .format-metric span { color: var(--text-inverse); }

.verdict-block {
  display: grid;
  grid-template-columns: 8rem minmax(0,1fr);
  gap: 1.2rem;
  align-items: center;
  border: 1px solid color-mix(in srgb,var(--signal) 40%,var(--border-subtle));
  border-block-start: 4px solid var(--signal);
  background: color-mix(in srgb,var(--signal) 6%,var(--surface-raised));
}
.verdict-block__score {
  aspect-ratio: 1;
  display: grid;
  place-content: center;
  text-align: center;
  border-radius: 50%;
  border: 2px solid var(--signal);
}
.verdict-block__score strong { color: var(--signal); font-size: 2.2rem; line-height: 1; }
.verdict-block__score span { color: var(--text-muted); font-size: .72rem; }
.verdict-block__body h2 { margin: .25rem 0 .55rem; font-size: 1.55rem; }
.verdict-block__body p { margin: 0 0 .7rem; line-height: 1.75; }

.qa-block { display: grid; gap: 0; border-block-start: 4px solid var(--accent-secondary); }
.qa-block__head { padding: 1rem 0; border-block-end: 1px solid var(--border-subtle); }
.qa-block__head h2 { margin: .25rem 0 0; }
.qa-item { display: grid; grid-template-columns: minmax(10rem,.48fr) minmax(0,1fr); gap: 1.2rem; padding: 1.15rem 0; border-block-end: 1px solid var(--border-subtle); }
.qa-item h3 { margin: 0; font-size: 1rem; line-height: 1.55; }
.qa-item h3 span { display: block; color: var(--accent); font-size: .7rem; margin-block-end: .3rem; }
.qa-item p { margin: 0; line-height: 1.85; }

.data-points { border-block-start: 4px solid var(--accent); }
.data-points > h2 { margin-block-start: 0; }
.data-points__grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1px; border: 1px solid var(--border-subtle); background: var(--border-subtle); }
.data-point { padding: 1rem; background: var(--surface-soft); }
.data-point > strong { color: var(--accent); font-size: clamp(1.65rem,4vw,2.5rem); line-height: 1; }
.data-point > span { margin-inline-start: .25rem; color: var(--text-muted); font-size: .72rem; }
.data-point h3 { margin: .65rem 0 .3rem; font-size: .9rem; }
.data-point p { margin: 0; color: var(--text-muted); font-size: .78rem; line-height: 1.6; }
.data-points__source { margin: .8rem 0 0; color: var(--text-muted); font-size: .72rem; }

@media(max-width:760px){
  .article-format-brief { grid-template-columns:1fr; padding:1rem; }
  .article-format-brief__metrics { grid-template-columns:repeat(auto-fit,minmax(6.2rem,1fr)); }
  .format-metric { min-height:4.5rem; padding:.6rem; }
  .verdict-block { grid-template-columns:5.8rem 1fr; }
  .verdict-block__score strong { font-size:1.65rem; }
  .qa-item { grid-template-columns:1fr; gap:.45rem; }
  .data-points__grid { grid-template-columns:1fr 1fr; }
}

/* Global News Pattern Library V1 */
.live-summary {
  border-inline-start:4px solid var(--danger);
  background:color-mix(in srgb,var(--danger) 4%,var(--surface-raised));
  padding:1rem 1.1rem;
}
.live-summary__head { display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap; }
.live-summary__status { display:inline-flex;align-items:center;gap:.5rem;color:var(--danger);font-weight:850;font-size:.78rem; }
.live-summary__status i { inline-size:.58rem;block-size:.58rem;border-radius:50%;background:currentColor;box-shadow:0 0 0 .25rem color-mix(in srgb,currentColor 13%,transparent); }
.live-summary--closed .live-summary__status { color:var(--text-muted); }
.live-summary__updated { color:var(--text-muted);font-size:.72rem; }
.live-summary h2 { margin:.65rem 0; }
.live-summary__points { margin:.5rem 0 0;padding-inline-start:1.15rem;display:grid;gap:.45rem; }
.live-summary__points li::marker { color:var(--danger); }

.market-snapshot { padding:1rem;border-block:2px solid var(--text-primary); }
.market-snapshot__head { display:flex;justify-content:space-between;align-items:end;gap:1rem;margin-block-end:.8rem; }
.market-snapshot__head h2 { margin:0; }
.market-snapshot__grid { display:grid;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));gap:1px;background:var(--border-subtle);border:1px solid var(--border-subtle); }
.market-metric { min-width:0;padding:.85rem;background:var(--surface-raised); }
.market-metric > span { display:block;color:var(--text-muted);font-size:.72rem; }
.market-metric strong { display:flex;align-items:baseline;gap:.25rem;margin:.35rem 0;font-family:var(--font-ui);font-size:1.55rem;line-height:1.1; }
.market-metric strong small { font-size:.68rem;color:var(--text-muted); }
.market-metric em { font-style:normal;font-weight:800;font-size:.78rem; }
.market-metric--up em { color:var(--success); }
.market-metric--down em { color:var(--danger); }
.market-metric--flat em { color:var(--text-muted); }
.market-metric p { margin:.35rem 0 0;color:var(--text-muted);font-size:.72rem;line-height:1.5; }
.market-snapshot__source { margin:.65rem 0 0;color:var(--text-muted);font-size:.7rem; }

.curated-links { padding:1rem 0;border-block:2px solid var(--text-primary); }
.curated-links__head { display:flex;align-items:end;justify-content:space-between;gap:1rem;margin-block-end:.65rem; }
.curated-links__head h2 { margin:0; }
.curated-links__list { list-style:none;margin:0;padding:0;counter-reset:curated;display:grid;grid-template-columns:1fr 1fr; }
.curated-links__list li { counter-increment:curated;border-block-start:1px solid var(--border-subtle); }
.curated-links__list li:nth-child(odd) { border-inline-end:1px solid var(--border-subtle); }
.curated-links__list a { display:grid;grid-template-columns:2rem 1fr;gap:.15rem .55rem;padding:.75rem;text-decoration:none;color:inherit; }
.curated-links__list a::before { content:counter(curated,decimal-leading-zero);grid-row:1/4;color:var(--accent);font-family:var(--font-ui);font-size:.68rem;font-weight:900; }
.curated-links__list strong { font-size:.9rem;line-height:1.45; }
.curated-links__list span,.curated-links__list small { grid-column:2;color:var(--text-muted);font-size:.68rem; }
.curated-links__list a:hover strong { color:var(--accent); }

.story-video__frame { position:relative; }
.story-media-duration { position:absolute;inset-inline-end:.6rem;inset-block-end:.6rem;padding:.2rem .45rem;background:rgba(0,0,0,.78);color:white;font:700 .7rem/1 var(--font-ui);border-radius:.15rem; }
.story-audio figcaption { display:flex;justify-content:space-between;gap:1rem;align-items:center; }
.story-audio__duration { color:var(--text-muted);font-family:var(--font-ui);font-size:.72rem; }

@media(max-width:680px){
  .market-snapshot__head,.curated-links__head { align-items:start;flex-direction:column; }
  .curated-links__list { grid-template-columns:1fr; }
  .curated-links__list li:nth-child(odd) { border-inline-end:0; }
}


/* Newsroom Article V2 — fast orientation for news, analysis and reference formats. */
.article-format-brief--news {
  border-block-start-color: var(--brand-signal);
}
.article-format-brief--news .public-label,
.article-format-brief--news .format-metric strong {
  color: var(--brand-signal);
}
.article-format-brief--analysis {
  border-block-start-color: var(--brand-nile);
}
.article-format-brief--analysis .public-label,
.article-format-brief--analysis .format-metric strong {
  color: var(--brand-nile);
}
.article-format-brief--reference {
  border-block-start-color: var(--brand-deep);
}
.article-format-brief--reference .public-label,
.article-format-brief--reference .format-metric strong {
  color: var(--brand-deep);
}
.article-format-brief--visual {
  border-block-start-color: var(--brand-oxide);
}
.article-format-brief--visual .public-label,
.article-format-brief--visual .format-metric strong {
  color: var(--brand-oxide);
}
.article-format-brief__facts {
  padding: .9rem 0 0;
  padding-inline-start: 1.2rem;
}
.article-format-brief--news .article-format-brief__facts,
.article-format-brief--analysis .article-format-brief__facts {
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: .65rem 1.7rem;
  list-style-position: outside;
}
.article-format-brief--news .article-format-brief__facts li,
.article-format-brief--analysis .article-format-brief__facts li {
  padding-inline-end: .5rem;
  color: var(--text-primary);
  line-height: 1.65;
}
@media(max-width:760px){
  .article-format-brief--news .article-format-brief__facts,
  .article-format-brief--analysis .article-format-brief__facts {
    grid-template-columns:1fr;
  }
}


/* =========================================================
   Article Discovery V3 — dense recirculation after reading:
   same section, measured most-read, then latest coverage.
   ========================================================= */
.article-discovery {
  margin-block: 1.5rem 2rem;
  padding-block: 1.35rem 1.6rem;
  border-block: 1px solid var(--ink-0);
}
.article-discovery__head {
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:1rem;
  padding-block-end:.9rem;
  border-block-end:3px solid var(--brand-nile);
}
.article-discovery__head > div > span {
  color:var(--ink-2);
  font-size:.76rem;
  font-weight:800;
}
.article-discovery__head h2 {
  margin:.2rem 0 0;
  color:var(--brand-deep);
  font-size:clamp(1.55rem,2.8vw,2.35rem);
}
.article-discovery__head > a {
  color:var(--brand-nile);
  font-size:.8rem;
  font-weight:850;
}
.article-discovery__grid {
  display:grid;
  grid-template-columns:minmax(0,1.7fr) minmax(17rem,.7fr);
  gap:1.6rem;
  padding-block-start:1.2rem;
}
.article-discovery__same > header {
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:1rem;
  margin-block-end:.8rem;
}
.article-discovery__same > header strong {
  color:var(--ink-3);
  font-size:1.6rem;
  line-height:1;
}
.article-discovery__lead {
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(15rem,.8fr);
  gap:1rem;
  padding-block-end:1rem;
  border-block-end:1px solid var(--line);
}
.article-discovery__lead-media {
  display:block;
  min-height:14rem;
  overflow:hidden;
  background:var(--paper-2);
}
.article-discovery__lead-media img,
.article-discovery__lead-media .article-media-fallback {
  inline-size:100%;
  block-size:100%;
  min-height:14rem;
  object-fit:cover;
}
.article-discovery__lead > div {
  align-self:end;
}
.article-discovery__type {
  color:var(--brand-oxide);
  font-size:.7rem;
  font-weight:900;
}
.article-discovery__lead h3 {
  margin:.3rem 0 .55rem;
  font-size:clamp(1.35rem,2.2vw,2rem);
  line-height:1.3;
}
.article-discovery__lead p {
  display:-webkit-box;
  overflow:hidden;
  margin:.35rem 0 .6rem;
  color:var(--ink-2);
  font-size:.82rem;
  line-height:1.6;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
}
.article-discovery__time {
  color:var(--ink-2);
  font-size:.7rem;
}
.article-discovery__support,
.article-discovery__popular ol,
.article-discovery__latest ol {
  list-style:none;
  margin:0;
  padding:0;
}
.article-discovery__support li {
  display:grid;
  grid-template-columns:2.2rem minmax(0,1fr);
  gap:.7rem;
  padding:.75rem 0;
  border-block-end:1px solid var(--line);
}
.article-discovery__index {
  color:var(--ink-3);
  font-size:.82rem;
  font-weight:850;
}
.article-discovery__support h3,
.article-discovery__latest h4 {
  margin:.14rem 0 .25rem;
  font-size:.98rem;
  line-height:1.5;
}
.article-discovery__popular {
  border-block-start:4px solid var(--brand-oxide);
}
.article-discovery__popular > header {
  padding:.8rem 0 .6rem;
  border-block-end:1px solid var(--line);
}
.article-discovery__popular > header h3 {
  margin:.15rem 0 0;
  font-size:1.35rem;
  color:var(--brand-deep);
}
.article-discovery__popular li {
  display:grid;
  grid-template-columns:2.7rem minmax(0,1fr);
  gap:.75rem;
  padding:.8rem 0;
  border-block-end:1px solid var(--line);
}
.article-discovery__rank {
  font-size:1.55rem;
  line-height:1;
  font-weight:900;
  color:var(--brand-oxide);
  letter-spacing:-.06em;
}
.article-discovery__popular h4 {
  margin:0;
  font-size:.92rem;
  line-height:1.5;
}
.article-discovery__popular-meta {
  display:block;
  margin-block-start:.28rem;
  color:var(--ink-2);
  font-size:.68rem;
}
.article-discovery__latest {
  margin-block-start:1.45rem;
  padding-block-start:1rem;
  border-block-start:1px solid var(--ink-0);
}
.article-discovery__latest > header {
  display:flex;
  align-items:baseline;
  gap:.7rem;
  margin-block-end:.7rem;
}
.article-discovery__latest > header h3 {
  margin:0;
  font-size:1.25rem;
  color:var(--brand-deep);
}
.article-discovery__latest ol {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:1.5rem;
  border-block-start:1px solid var(--line);
}
.article-discovery__latest li {
  display:grid;
  grid-template-columns:2rem minmax(0,1fr);
  gap:.65rem;
  padding:.72rem 0;
  border-block-end:1px solid var(--line);
}

@media(max-width:900px){
  .article-discovery__grid {
    grid-template-columns:1fr;
  }
  .article-discovery__popular {
    border-block-start-width:3px;
  }
  .article-discovery__popular ol {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:1.2rem;
  }
}
@media(max-width:680px){
  .article-discovery {
    margin-block:1rem 1.4rem;
    padding-block:1rem 1.2rem;
  }
  .article-discovery__head {
    align-items:start;
    flex-direction:column;
  }
  .article-discovery__lead {
    grid-template-columns:1fr;
  }
  .article-discovery__lead-media,
  .article-discovery__lead-media img,
  .article-discovery__lead-media .article-media-fallback {
    min-height:0;
    aspect-ratio:16/9;
  }
  .article-discovery__popular ol,
  .article-discovery__latest ol {
    grid-template-columns:1fr;
  }
  .article-discovery__popular li:last-child,
  .article-discovery__latest li:last-child {
    border-block-end:0;
  }
}

.article-discovery__popular-more {
  display:inline-flex;
  margin-block:.2rem .45rem;
  color:var(--brand-oxide);
  font-size:.7rem;
  font-weight:900;
}


/* ==========================================================================
   Article Text-first V1 — unified editorial reading surface
   ========================================================================== */
.article-page{
  background:var(--surface-canvas);
}
.article-shell{
  width:min(calc(100% - 2rem),1180px);
}

/* Hero: open editorial hierarchy, not a dashboard card. */
.article-hero{
  margin-block-start:1rem;
  padding:1rem 0 1.15rem;
  border:0;
  border-block-end:1px solid var(--border-subtle);
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
.article-breadcrumb{
  margin-block-end:.7rem;
  color:var(--text-muted);
  font-size:var(--fs-meta);
}
.article-kicker{
  display:inline-flex;
  align-items:center;
  min-height:1.8rem;
  padding:.28rem .55rem;
  border-radius:3px;
  font-size:var(--fs-label);
  font-weight:var(--fw-bold);
  letter-spacing:0;
}
.article-hero__main{
  max-inline-size:100%;
}
.article-hero h1{
  max-inline-size:22ch;
  margin:.65rem 0 .65rem;
  color:var(--text-primary);
  font-size:var(--fs-article-title);
  font-weight:var(--fw-extrabold);
  line-height:1.16;
  letter-spacing:-.026em;
  text-wrap:balance;
  overflow-wrap:normal;
  word-break:normal;
  hyphens:none;
}
.article-dek{
  max-inline-size:64ch;
  margin:.15rem 0 0;
  color:var(--text-secondary);
  font-size:var(--fs-article-dek);
  font-weight:var(--fw-regular);
  line-height:var(--lh-body);
}
.article-byline{
  margin-block-start:1rem;
  padding-block-start:.8rem;
  gap:.45rem .9rem;
  border-block-start:1px solid var(--border-subtle);
  color:var(--text-muted);
  font-size:var(--fs-article-meta);
  line-height:var(--lh-meta);
}
.byline-credit{
  align-items:center;
  gap:.35rem;
}
.byline-credit small{
  color:var(--text-muted);
  font-size:var(--fs-caption);
}
.byline-credit strong{
  color:var(--text-primary);
  font-weight:var(--fw-bold);
}
.byline-avatar{
  inline-size:1.8rem;
  block-size:1.8rem;
  border-color:var(--border-subtle);
}

/* Summary strip: compact newsroom orientation instead of a second hero. */
.article-format-brief{
  margin-block:.85rem 1.1rem;
  padding:.9rem 0 1rem;
  grid-template-columns:minmax(0,1fr) auto;
  gap:.75rem 1rem;
  align-items:start;
  border-block-start:2px solid var(--accent);
  border-block-end:1px solid var(--border-subtle);
  background:transparent;
}
.article-format-brief__intro{
  align-self:center;
}
.article-format-brief__intro .public-label{
  color:var(--accent);
  font-size:var(--fs-label);
  font-weight:var(--fw-bold);
}
.article-format-brief__intro p{
  margin:.35rem 0 0;
  font-size:var(--fs-body-sm);
  line-height:var(--lh-body);
}
.article-format-brief__metrics{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:.45rem;
  border:0;
  background:transparent;
}
.format-metric{
  min-width:7.5rem;
  min-height:0;
  padding:.55rem .7rem;
  display:grid;
  align-content:center;
  gap:.12rem;
  border:1px solid var(--border-subtle);
  background:var(--surface-soft);
}
.format-metric strong{
  font-size:1.05rem;
  font-weight:var(--fw-extrabold);
}
.format-metric span{
  font-size:var(--fs-caption);
  font-weight:var(--fw-semibold);
}
.article-format-brief__facts{
  padding:.8rem 1.05rem 0 0;
  gap:.5rem 1.5rem;
  font-size:var(--fs-body-sm);
  line-height:1.65;
}

/* Reading area */
.article-layout{
  grid-template-columns:minmax(0,1fr) 250px;
  gap:1.25rem;
  margin-block-start:.7rem;
  align-items:start;
}
.article-content{
  min-width:0;
  padding:1.45rem 1.65rem;
  border:1px solid var(--border-subtle);
  border-radius:3px;
  background:var(--surface-raised);
  box-shadow:none;
}
[lang="ar"] .article-content .story-paragraph{
  max-inline-size:64ch;
  margin:1.05em auto;
  color:var(--text-primary);
  font-size:var(--fs-article-body);
  font-weight:var(--fw-regular);
  line-height:1.92;
}
.story-heading{
  max-inline-size:64ch;
  margin:1.8em auto .7em;
  padding:.45rem .7rem;
  background:var(--surface-muted);
  border-inline-start:3px solid var(--accent);
  color:var(--text-primary);
  font-size:var(--fs-article-block-title);
  font-weight:var(--fw-bold);
  line-height:var(--lh-title);
}

/* Evidence/source blocks are supporting material, not another giant card. */
.article-content .evidence-block,
.article-content .methodology-block,
.article-content .editorial-note,
.article-content .update-note{
  max-inline-size:64ch;
  margin:1.2rem auto;
  padding:.9rem 1rem;
  border:0;
  border-inline-start:3px solid var(--accent);
  background:color-mix(in srgb,var(--accent) 5%,var(--surface-soft));
}
.article-content .evidence-block h2,
.article-content .methodology-block h2,
.article-content .update-note h2{
  margin:.25rem 0 .35rem;
  font-size:var(--fs-article-block-title);
  line-height:var(--lh-title);
}
.article-content .evidence-block p,
.article-content .methodology-block p,
.article-content .editorial-note p,
.article-content .update-note p{
  margin:.25rem 0;
  color:var(--text-secondary);
  font-size:var(--fs-body-sm);
  line-height:var(--lh-body);
}
.article-content .evidence-block a{
  display:inline-flex;
  margin-block-start:.35rem;
  color:var(--accent);
  font-size:var(--fs-label);
  font-weight:var(--fw-semibold);
}

/* Sidebar: compact reading utility, not admin boxes. */
.article-sidebar{
  gap:.7rem;
}
.article-toc,
.article-sidebar__box{
  border:1px solid var(--border-subtle);
  border-radius:3px;
  background:var(--surface-raised);
  box-shadow:none;
}
.article-sidebar__head{
  min-height:2.55rem;
  padding:.58rem .7rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-block-end:1px solid var(--border-subtle);
}
.article-sidebar__head strong{
  color:var(--accent);
  font-size:var(--fs-article-sidebar-title);
  font-weight:var(--fw-bold);
}
.article-sidebar__facts{
  padding:.35rem .7rem .55rem;
}
.article-sidebar__facts > div{
  padding:.42rem 0;
  border-block-end:1px solid var(--border-subtle);
}
.article-sidebar__facts > div:last-child{
  border-block-end:0;
}
.article-sidebar__facts dt{
  color:var(--text-muted);
  font-size:var(--fs-caption);
}
.article-sidebar__facts dd{
  color:var(--text-primary);
  font-size:var(--fs-label);
  font-weight:var(--fw-semibold);
}
.article-sidebar__topics{
  padding:.65rem .7rem;
}
.article-sidebar__topics a{
  background:var(--surface-soft);
  border-color:var(--border-subtle);
  color:var(--text-primary);
  font-size:var(--fs-caption);
  font-weight:var(--fw-semibold);
}
.article-share{
  padding:.65rem .7rem;
  gap:.35rem;
}
.article-share a,
.article-share button{
  min-height:1.9rem;
  padding:.32rem .48rem;
  border-radius:3px;
  background:var(--surface-soft);
  color:var(--text-secondary);
  font-size:var(--fs-caption);
  font-weight:var(--fw-semibold);
  box-shadow:none;
}
.article-share a:hover,
.article-share button:hover{
  transform:none;
  border-color:var(--accent);
  color:var(--accent);
  box-shadow:none;
}

/* Text-only recirculation: no synthetic media panels. */
.article-related-card--text{
  display:block;
}
.article-related-card--text > div{
  padding:.8rem 0;
}
.article-discovery{
  margin-block:1.3rem 1.7rem;
  padding-block:1.1rem 1.25rem;
}
.article-discovery__head{
  padding-block-end:.7rem;
  border-block-end:2px solid var(--accent);
}
.article-discovery__head h2{
  font-size:var(--fs-article-discovery-title);
  line-height:var(--lh-title);
}
.article-discovery__grid{
  grid-template-columns:minmax(0,1.55fr) minmax(15rem,.72fr);
  gap:1.25rem;
  padding-block-start:1rem;
}
.article-discovery__lead--text{
  grid-template-columns:minmax(0,1fr);
}
.article-discovery__lead--text > div{
  align-self:start;
  max-inline-size:52rem;
}
.article-discovery__lead--text h3{
  max-inline-size:28ch;
}
.article-discovery__lead h3{
  font-size:var(--fs-card-lead);
  line-height:var(--lh-title);
}
.article-discovery__support h3,
.article-discovery__latest h4,
.article-discovery__popular h4{
  font-size:var(--fs-story-sm);
  font-weight:var(--fw-semibold);
  line-height:var(--lh-story);
}
.article-discovery__rank,
.article-discovery__index{
  font-size:var(--fs-rank);
  font-weight:var(--fw-bold);
  letter-spacing:0;
}

/* Comments follow the reading surface without a floating dashboard feel. */
.article-comments{
  margin-block:1.2rem 2rem;
  padding:1rem 1.1rem;
  border:1px solid var(--border-subtle);
  border-radius:3px;
  background:var(--surface-raised);
  box-shadow:none;
}
.article-comments__head{
  padding-block-end:.75rem;
  border-block-end:2px solid var(--accent);
}
.article-comments__head h2{
  font-size:var(--fs-section);
  line-height:var(--lh-title);
}
.article-comments__head > strong{
  background:var(--accent);
}
.comment-form{
  gap:.7rem;
}
.comment-form label{
  font-size:var(--fs-label);
  font-weight:var(--fw-semibold);
}
.comment-form input,
.comment-form textarea{
  padding:.65rem .7rem;
  border-radius:3px;
  background:var(--surface-soft);
}
.comment-form textarea{
  min-height:7rem;
}
.comment-form button{
  padding:.58rem .85rem;
  border-radius:3px;
  background:var(--accent);
  font-weight:var(--fw-bold);
}

@media(max-width:900px){
  .article-layout{
    grid-template-columns:minmax(0,1fr);
  }
  .article-sidebar{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .article-toc{
    grid-column:1 / -1;
  }
}
@media(max-width:680px){
  .article-shell{
    width:min(calc(100% - .8rem),1180px);
  }
  .article-hero{
    margin-block-start:.55rem;
    padding:.7rem 0 .85rem;
  }
  .article-hero h1{
    max-inline-size:none;
    margin:.55rem 0;
    text-wrap:pretty;
  }
  .article-dek{
    max-inline-size:none;
  }
  .article-byline{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:.5rem .75rem;
  }
  .article-published-time,
  .article-byline > span:not(.byline-credit){
    grid-column:auto;
  }
  .article-format-brief{
    grid-template-columns:minmax(0,1fr);
    padding:.8rem 0 .9rem;
  }
  .article-format-brief__metrics{
    justify-content:flex-start;
  }
  .format-metric{
    min-width:6.5rem;
  }
  .article-format-brief--news .article-format-brief__facts,
  .article-format-brief--analysis .article-format-brief__facts{
    grid-template-columns:1fr;
  }
  .article-content{
    padding:1rem .9rem;
  }
  [lang="ar"] .article-content .story-paragraph{
    margin:.9em auto;
  }
  .article-sidebar{
    grid-template-columns:minmax(0,1fr);
  }
  .article-discovery__grid,
  .article-discovery__popular ol,
  .article-discovery__latest ol{
    grid-template-columns:minmax(0,1fr);
  }
  .article-comments{
    padding:.9rem;
  }
}


/* Article Text-first V1 — theme-safe discovery colors. */
.article-discovery__head > div > span,
.article-discovery__time,
.article-discovery__popular-meta{
  color:var(--text-muted);
}
.article-discovery__head h2,
.article-discovery__popular > header h3,
.article-discovery__latest > header h3{
  color:var(--text-primary);
}
.article-discovery__head > a,
.article-discovery__popular-more,
.article-discovery__type{
  color:var(--accent);
}
.article-discovery__popular{
  border-block-start-color:var(--accent-secondary);
}
.article-discovery__rank{
  color:var(--accent-secondary);
}


/* ==========================================================================
   Visual Review V2 — full-width article hero + centered sidebar hierarchy
   ========================================================================== */

/* Article hero must use the available reading width; never compress the
   headline into an arbitrary half-width text column. */
.article-hero__main{
  inline-size:100%;
  max-inline-size:none;
}
.article-hero h1{
  inline-size:100%;
  max-inline-size:34ch;
  margin-inline:0;
  text-align:start;
  text-wrap:balance;
}
.article-dek{
  inline-size:100%;
  max-inline-size:78ch;
  margin-inline:0;
  text-align:start;
}

/* Every primary sidebar heading is visually centered, regardless of
   secondary actions that may exist in the same header. */
.article-sidebar__head{
  position:relative;
  min-height:2.75rem;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:.62rem 3rem;
  text-align:center;
}
.article-sidebar__head strong,
.article-toc > header h2,
.article-sidebar__box > header h2,
.article-sidebar__box > header strong{
  inline-size:100%;
  margin:0;
  color:var(--accent);
  text-align:center;
  font-size:var(--fs-article-sidebar-title);
  font-weight:var(--fw-bold);
  line-height:var(--lh-title);
}
.article-sidebar__head > a,
.article-sidebar__head > button{
  position:absolute;
  inset-inline-end:.7rem;
  inset-block-start:50%;
  transform:translateY(-50%);
}

/* All editorial ranks/indices use a fixed centered cell. */
.article-discovery__rank,
.article-discovery__index{
  inline-size:2rem;
  min-inline-size:2rem;
  block-size:2rem;
  display:grid;
  place-items:center;
  padding:0;
  margin:0;
  text-align:center;
  line-height:1;
  font-variant-numeric:tabular-nums;
}
.article-discovery__popular li,
.article-discovery__latest li{
  align-items:center;
}

@media(max-width:680px){
  .article-hero h1,
  .article-dek{
    max-inline-size:none;
  }
  .article-sidebar__head{
    padding-inline:2.7rem;
  }
}