.article-page { isolation: isolate; }
.article-header { display: block; min-height: 148px; }
.article-main { padding: 0 var(--page-gutter); max-width: 1680px; margin-inline: auto; }
@media (min-width: 1600px) {
  .article-main { max-width: none; }
}
.article-eyebrow { color: var(--muted); font: 11px/1.7 'Geist Mono', monospace; letter-spacing: .05em; text-transform: uppercase; }
.article-crumbs { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; list-style: none; margin: 0 0 28px; padding: 0; }
.article-crumbs a { display: inline-flex; align-items: center; min-height: 44px; }
.article-hero { display: grid; grid-template-columns: .92fr 1.08fr; gap: clamp(28px, 4vw, 68px); align-items: center; padding-bottom: 48px; }
.article-hero h1 { font-size: clamp(64px, 7.1vw, 112px); line-height: 1; font-weight: 400; letter-spacing: -.062em; margin: 20px 0 28px; }
.article-hero h1 span { color: var(--muted); }
.article-deck { max-width: 28em; font-size: clamp(18px, 1.6vw, 24px); line-height: 1.55; margin: 0 0 32px; }
.article-byline { display: flex; align-items: center; gap: 14px; margin-top: 28px; }
.article-byline img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.article-byline a { display: inline-block; font-size: 14px; line-height: 1.6; text-decoration: underline; text-underline-offset: 4px; }
.article-dates { margin: 5px 0 0; font-size: 12px; line-height: 1.7; color: var(--muted); }
.article-figure { margin: 0; min-width: 0; }
.article-figure > img { display: block; width: 100%; height: auto; border-radius: 14px; background: var(--surface); }
.article-figure figcaption { margin: 12px 0 0; max-width: 65em; color: var(--muted); font-size: 12px; line-height: 1.65; }
.article-jump { display: flex; flex-wrap: wrap; gap: 4px 36px; border-block: 1px solid var(--rule); padding: 12px 0; }
.article-jump a { display: flex; align-items: center; gap: 12px; min-height: 44px; font-size: 13px; }
.article-jump span { color: var(--muted); font: 10px 'Geist Mono', monospace; }
.article-section { display: grid; grid-template-columns: 1fr 2.15fr; gap: min(5vw, 80px); margin: 80px 0; scroll-margin-top: 115px; }
.article-section > .article-eyebrow { margin: 8px 0 0; }
.article-copy { max-width: 740px; }
.article-copy h2, .article-video h2 { margin: 0 0 26px; font-size: clamp(32px, 3.5vw, 52px); line-height: 1.1; font-weight: 400; letter-spacing: -.045em; text-wrap: balance; }
.article-copy p, .article-video-copy p { font-size: 18px; line-height: 1.8; margin: 0 0 24px; }
.article-copy p:last-child, .article-video-copy p:last-child { margin-bottom: 0; }
.article-copy a, .article-video-copy a, .article-figure a { text-decoration: underline; text-underline-offset: 4px; }
.article-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.article-tender { padding: 64px 0; scroll-margin-top: 110px; }
.article-tender h2 { margin: 0 0 34px; font-size: clamp(32px, 3.5vw, 52px); line-height: 1.1; font-weight: 400; letter-spacing: -.045em; text-wrap: balance; }
.article-tender-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: min(4vw, 64px); align-items: center; }
.article-tender-link { display: inline-flex; align-items: center; gap: 30px; min-height: 48px; font-size: 15px; text-decoration: none !important; border-bottom: 1px solid var(--rule); }
.article-tender-link svg { width: 20px; height: 20px; flex-shrink: 0; }
.article-video { padding: 60px 0; border-block: 1px solid var(--rule); scroll-margin-top: 110px; }
.article-video-heading { display: grid; grid-template-columns: 1fr 2.15fr; gap: min(5vw, 80px); }
.article-video-heading > p { margin: 8px 0 0; }
.article-video-heading h2 { max-width: 740px; margin-bottom: 34px; }
.article-player { width: 100%; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: #08090c; }
.article-player iframe { display: block; width: 100%; height: 100%; border: 0; }
.article-video-credit { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 30px; margin: 12px 0 24px; font-size: 13px; line-height: 1.6; color: var(--muted); }
.article-video-credit a { text-decoration: underline; text-underline-offset: 4px; min-height: 44px; display: inline-flex; align-items: center; }
.article-chapters { display: flex; gap: 12px; flex-wrap: wrap; margin: 0 0 36px; }
.article-chapters a { display: flex; flex: 1 1 180px; align-items: center; gap: 16px; min-height: 60px; padding: 14px 20px; border: 1px solid var(--rule); border-radius: 12px; font-size: 14px; }
.article-chapters span { color: var(--muted); font: 11px 'Geist Mono', monospace; }
.article-video-copy { max-width: 740px; margin-left: calc((100% - min(5vw, 80px)) / 3.15 + min(5vw, 80px)); }
.article-reviews { padding: 60px 0; border-bottom: 1px solid var(--rule); scroll-margin-top: 110px; }
.article-reviews h2 { margin: 0 0 18px; font-size: clamp(32px, 3.5vw, 52px); line-height: 1.1; font-weight: 400; letter-spacing: -.045em; text-wrap: balance; }
.article-reviews-intro { margin: 0 0 34px; font-size: 18px; line-height: 1.65; color: var(--muted); }
.article-review-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.article-review-card { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid var(--rule); border-radius: 14px; background: var(--surface); }
.article-review-card > img { display: block; width: 100%; height: auto; aspect-ratio: 1; }
.article-review-body { padding: 26px 28px; display: flex; flex-direction: column; flex: 1; }
.article-review-author { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 6px 16px; }
.article-review-author h3 { font-size: 20px; font-weight: 400; margin: 0; }
.article-review-author time { font-size: 12px; color: var(--muted); }
.article-review-stars { display: block; color: var(--foreground); font-size: 17px; letter-spacing: .12em; margin: 16px 0; }
.article-review-body blockquote { margin: 0 0 20px; }
.article-review-body blockquote p { font-size: 18px; line-height: 1.65; margin: 0; }
.article-review-body > a { display: inline-flex; align-items: center; align-self: flex-start; min-height: 44px; margin-top: auto; font-size: 13px; text-decoration: underline; text-underline-offset: 5px; }
.article-reviews-source { margin: 18px 0 0; font-size: 12px; line-height: 1.7; color: var(--muted); }
.article-reviews-source a { text-decoration: underline; text-underline-offset: 4px; }
.article-next { display: grid; grid-template-columns: 1fr 2.15fr; gap: min(5vw, 80px); padding: 52px 0 76px; border-top: 1px solid var(--rule); }
.article-next h2 { font-size: clamp(34px, 3.8vw, 58px); font-weight: 400; line-height: 1.08; letter-spacing: -.045em; margin: 0 0 20px; }
.article-next p { max-width: 38em; font-size: 17px; line-height: 1.7; color: var(--muted); margin: 0 0 26px; }
.article-cta { display: inline-flex; align-items: center; justify-content: space-between; gap: 32px; min-height: 56px; padding: 16px 24px; border-radius: 30px; color: var(--on-button); background: var(--button); font-size: 15px; }
.article-cta svg { width: 20px; height: 20px; flex-shrink: 0; }
.article-more { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 22px; }
.article-more a { display: flex; align-items: center; min-height: 44px; font-size: 14px; text-decoration: underline; text-underline-offset: 5px; }
.article-skip { position: fixed; z-index: 150; top: 12px; left: var(--page-gutter); padding: 16px 22px; background: var(--button); color: var(--on-button); border-radius: 28px; transform: translateY(-200%); }
.article-skip:focus { transform: none; }
@media (hover: hover) {
  .article-jump a:hover, .article-crumbs a:hover { text-decoration: underline; text-underline-offset: 5px; }
  .article-chapters a:hover { background: var(--surface-hover); }
  .article-cta:hover { opacity: .85; }
}
@media (max-width: 1000px) {
  .article-hero { grid-template-columns: 1fr 1fr; gap: 28px; }
  .article-hero h1 { font-size: clamp(55px, 7.3vw, 78px); }
  .article-deck { font-size: 18px; }
  .article-section, .article-video-heading, .article-next { grid-template-columns: .75fr 2.25fr; gap: 32px; }
  .article-video-copy { margin-left: calc((100% - 32px) / 4 + 32px); }
}
@media (max-width: 700px) {
  .article-header { min-height: 138px; }
  .article-crumbs { margin-bottom: 20px; }
  .article-hero { grid-template-columns: 1fr; gap: 28px; padding-bottom: 30px; }
  .article-hero h1 { font-size: clamp(58px, 13vw, 84px); margin-top: 16px; }
  .article-deck { max-width: 34em; margin-bottom: 24px; }
  .article-dates { font-size: 11px; }
  .article-jump { gap: 2px 24px; }
  .article-section { margin: 46px 0; }
  .article-section, .article-video-heading, .article-next { grid-template-columns: 1fr; gap: 20px; }
  .article-copy h2, .article-video h2 { font-size: 34px; margin-bottom: 22px; }
  .article-copy p, .article-video-copy p { font-size: 17px; line-height: 1.75; }
  .article-detail-grid { grid-template-columns: 1fr; gap: 24px; }
  .article-tender { padding: 40px 0; }
  .article-tender h2 { font-size: 34px; margin-bottom: 24px; }
  .article-tender-grid { grid-template-columns: 1fr; gap: 26px; }
  .article-video { padding: 40px 0; }
  .article-reviews { padding: 40px 0; }
  .article-reviews h2 { font-size: 34px; }
  .article-reviews-intro { font-size: 17px; margin-bottom: 28px; }
  .article-review-grid { grid-template-columns: 1fr; gap: 22px; }
  .article-review-body { padding: 22px; }
  .article-review-body blockquote p { font-size: 17px; }
  .article-video-copy { margin-left: 0; }
  .article-chapters { gap: 8px; }
  .article-chapters a { min-height: 52px; flex-basis: 100%; padding: 12px 16px; }
  .article-video-credit { margin-bottom: 18px; gap: 0 18px; }
  .article-next { padding: 36px 0 50px; }
  .article-figure > img, .article-player { border-radius: 12px; }
}
