.article-page {
  padding-block: clamp(34px, 5vw, 68px) 90px;
}

.article-breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  margin-bottom: 28px;
  color: #71809c;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.article-breadcrumbs a { color: var(--violet); }
.article-breadcrumbs a:hover { text-decoration: underline; }
.article-breadcrumbs span[aria-hidden="true"] { color: #b6c1d3; }

.article-masthead {
  max-width: 1050px;
  margin-bottom: 38px;
}
.article-kickers {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 17px;
}
.article-kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 11px;
  border: 1px solid #cad8ed;
  border-radius: 999px;
  background: rgba(255,255,255,.7);
  color: #53617c;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.article-kicker.primary { border-color: transparent; background: var(--violet); color: white; }
.article-kicker.verified { border-color: transparent; background: var(--lime); color: var(--ink); }
.article-title {
  max-width: 1020px;
  margin: 0;
  color: var(--ink);
  font-family: var(--display);
  font-size: clamp(36px, 6.2vw, 76px);
  font-weight: 700;
  letter-spacing: -.055em;
  line-height: .99;
  text-wrap: balance;
}
.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 22px;
  color: #68758e;
  font-size: 12px;
}
.article-meta span { display: inline-flex; align-items: center; gap: 7px; }
.article-meta span + span::before { content: "•"; color: var(--pink); }
.article-meta a { color: var(--violet); font-weight: 700; }

.verification-banner {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  max-width: 1050px;
  margin: -8px 0 38px;
  padding: 17px 20px;
  border: 1px solid #ead27b;
  border-radius: 16px;
  background: linear-gradient(100deg, #fff8d9, #fffdf2);
  color: var(--ink);
  box-shadow: 0 13px 35px rgba(169, 128, 0, .09);
}
.verification-seal {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--violet);
  color: white;
  font-size: 22px;
  font-weight: 800;
}
.verification-banner strong { display: block; font-family: var(--display); font-size: 16px; }
.verification-banner p { margin: 2px 0 0; color: #6b634c; font-size: 12px; }
.verification-banner > span:last-child { color: #7b6a2d; font-size: 9px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }

.article-layout {
  display: grid;
  grid-template-columns: 52px minmax(0, 820px) minmax(240px, 310px);
  align-items: start;
  gap: clamp(22px, 3vw, 42px);
}
.article-share-rail {
  position: sticky;
  top: 24px;
  display: grid;
  gap: 9px;
}
.share-button {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 12px;
  border: 1px solid #d5e1f1;
  border-radius: 999px;
  background: white;
  color: var(--ink);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color .2s, color .2s, transform .2s;
}
.share-button:hover { border-color: var(--violet); color: var(--violet); transform: translateY(-1px); }
.article-share-rail .share-button { width: 44px; height: 44px; padding: 0; font-size: 13px; }
.inline-share { display: none; flex-wrap: wrap; gap: 8px; margin: 25px 0 0; }
.copy-status { min-height: 20px; color: var(--violet); font-size: 10px; font-weight: 700; }

.story-content { min-width: 0; }
.story-media { margin-bottom: 34px; }
.media-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 12px;
}
.media-heading h2 {
  margin: 0;
  font-family: var(--display);
  font-size: 14px;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.media-heading span { color: #7b88a1; font-size: 10px; font-weight: 700; text-transform: uppercase; }
.video-stack { display: grid; gap: 18px; }
.video-frame {
  overflow: hidden;
  border-radius: 18px;
  background: #07132d;
  box-shadow: 0 18px 48px rgba(16, 35, 75, .17);
}
.video-frame iframe,
.video-frame video {
  display: block;
  width: 100%;
  max-height: 640px;
  aspect-ratio: 16 / 9;
  border: 0;
  background: #07132d;
  object-fit: contain;
}

.gallery {
  overflow: hidden;
  border: 1px solid #dce6f2;
  border-radius: 18px;
  background: white;
  box-shadow: 0 16px 42px rgba(31, 94, 255, .08);
}
.gallery-viewport { position: relative; overflow: hidden; background: #e9f1fb; }
.gallery-track { display: flex; transition: transform .42s cubic-bezier(.2,.75,.25,1); }
.gallery-slide {
  margin: 0;
  min-width: 100%;
  height: min(58vw, 610px);
  min-height: 330px;
  display: grid;
  place-items: center;
  background: #e9f1fb;
}
.gallery-slide a { width: 100%; height: 100%; display: grid; place-items: center; }
.gallery-slide img { width: 100%; height: 100%; object-fit: contain; }
.gallery-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 14px;
}
.gallery-count { color: #6f7d96; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.gallery-controls { display: flex; gap: 7px; }
.gallery-button {
  width: 36px;
  height: 36px;
  border: 1px solid #d4dfef;
  border-radius: 50%;
  background: #f6f9ff;
  color: var(--ink);
  cursor: pointer;
}
.gallery-button:hover { border-color: var(--violet); color: var(--violet); }
.gallery-button:disabled { opacity: .38; cursor: default; }

.article-copy {
  padding: clamp(26px, 4vw, 44px);
  border: 1px solid #e0e8f3;
  border-radius: 18px;
  background: rgba(255,255,255,.9);
  box-shadow: 0 18px 50px rgba(16,35,75,.06);
}
.article-copy p {
  margin: 0 0 1.25em;
  color: #253655;
  font-size: clamp(16px, 1.5vw, 18px);
  line-height: 1.78;
}
.article-copy p:last-child { margin-bottom: 0; }
.article-copy .empty-copy { color: #7b88a1; font-style: italic; }
.article-source-note {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid #e1e8f3;
  color: #6f7d96;
  font-size: 11px;
}
.article-source-note a { color: var(--violet); font-weight: 700; }

.article-sidebar { position: sticky; top: 24px; display: grid; gap: 16px; }
.article-panel {
  padding: 21px;
  border: 1px solid #dce6f2;
  border-radius: 17px;
  background: rgba(255,255,255,.88);
  box-shadow: 0 14px 38px rgba(31,94,255,.07);
}
.article-panel h2 {
  margin: 0 0 15px;
  font-family: var(--display);
  font-size: 15px;
  letter-spacing: -.02em;
}
.article-panel p { margin: 0; color: #6d7990; font-size: 12px; line-height: 1.65; }
.article-panel .source-name { margin-bottom: 8px; color: var(--ink); font-family: var(--display); font-size: 18px; font-weight: 700; }
.panel-link {
  display: inline-flex;
  margin-top: 14px;
  color: var(--violet);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.provenance-list { margin: 0; }
.provenance-list dt { margin: 14px 0 4px; color: #8390a8; font-size: 9px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.provenance-list dt:first-child { margin-top: 0; }
.provenance-list dd { margin: 0; overflow-wrap: anywhere; color: #31415f; font-size: 11px; line-height: 1.55; }
.related-list { display: grid; gap: 0; }
.related-list a { padding: 12px 0; border-top: 1px solid #e4ebf4; color: #2d3e5e; font-family: var(--display); font-size: 12px; font-weight: 600; line-height: 1.35; }
.related-list a:first-child { padding-top: 0; border-top: 0; }
.related-list a:hover { color: var(--violet); }

.article-search-dialog form[role="search"] { display: flex; gap: 9px; padding: 28px; }
.article-search-dialog input { flex: 1; min-width: 0; padding: 13px 15px; border: 1px solid #d7e1ef; border-radius: 999px; background: transparent; color: inherit; }
.article-search-dialog button[type="submit"] { border: 0; border-radius: 999px; padding: 12px 18px; background: var(--violet); color: white; font-weight: 700; cursor: pointer; }

html[data-theme="dark"] .article-title { color: white; }
html[data-theme="dark"] .article-breadcrumbs,
html[data-theme="dark"] .article-meta,
html[data-theme="dark"] .media-heading span { color: #a7b4cb; }
html[data-theme="dark"] .article-kicker { border-color: #354b72; background: #172f5c; color: #c5d0e2; }
html[data-theme="dark"] .article-kicker.primary { border-color: transparent; background: var(--violet); color: white; }
html[data-theme="dark"] .article-kicker.verified { border-color: transparent; background: var(--lime); color: var(--ink); }
html[data-theme="dark"] .share-button,
html[data-theme="dark"] .gallery,
html[data-theme="dark"] .article-copy,
html[data-theme="dark"] .article-panel { border-color: #30496f; background: #142b54; color: white; }
html[data-theme="dark"] .article-copy p,
html[data-theme="dark"] .article-panel .source-name,
html[data-theme="dark"] .provenance-list dd,
html[data-theme="dark"] .related-list a { color: #e5ecf7; }
html[data-theme="dark"] .article-panel p,
html[data-theme="dark"] .article-source-note { color: #aab7cb; }
html[data-theme="dark"] .gallery-footer,
html[data-theme="dark"] .gallery-button { background: #142b54; color: white; border-color: #38527a; }
html[data-theme="dark"] .related-list a,
html[data-theme="dark"] .article-source-note { border-color: #30496f; }
html[data-theme="dark"] .vf-name { color: white; }

@media (max-width: 1080px) {
  .article-layout { grid-template-columns: 46px minmax(0, 1fr); }
  .article-sidebar { grid-column: 2; position: static; grid-template-columns: repeat(2, minmax(0,1fr)); }
  .article-panel:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  .article-page { padding-top: 28px; }
  .article-masthead { margin-bottom: 28px; }
  .article-title { font-size: clamp(34px, 10.5vw, 55px); line-height: 1.02; }
  .article-meta { display: grid; gap: 7px; }
  .article-meta span + span::before { display: none; }
  .verification-banner { grid-template-columns: 40px 1fr; padding: 14px; }
  .verification-seal { width: 40px; height: 40px; }
  .verification-banner > span:last-child { grid-column: 2; }
  .article-layout { display: block; }
  .article-share-rail { display: none; }
  .inline-share { display: flex; }
  .article-sidebar { margin-top: 24px; grid-template-columns: 1fr; }
  .article-panel:last-child:nth-child(odd) { grid-column: auto; }
  .gallery-slide { height: 68vw; min-height: 250px; }
  .article-copy { padding: 23px 20px; }
  .article-copy p { font-size: 16px; line-height: 1.7; }
  .article-search-dialog form[role="search"] { padding: 20px; flex-direction: column; }
}

@media (max-width: 480px) {
  .article-kicker { font-size: 9px; }
  .inline-share .share-button { flex: 1; }
  .gallery-slide { min-height: 220px; }
  .gallery-footer { padding: 9px 11px; }
}