/* Article — Figma 830:1530. 626px reading column centred; 842px media overlapping the blue hero band. */
.article { --ov: clamp(96px, 13.3vw, 201px); }
.article-hero { position: relative; isolation: isolate; overflow: hidden; color: var(--c-white); padding: 256px var(--gutter) calc(var(--ov) + 32px); }
.article-hero__bg { position: absolute; inset: -10px 0 0; z-index: -1; background: var(--c-blue); }
.article-hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.article-hero__bg::after { content: ""; position: absolute; inset: 0; background: var(--c-blue); opacity: .9; }
.article-hero__inner { max-width: 626px; margin-inline: auto; }
.article-hero__meta { display: flex; align-items: center; gap: 40px; font-size: 16px; line-height: 28px; }
.article-hero__back { display: inline-flex; align-items: center; gap: 4px; font-weight: var(--fw-bold); color: var(--c-white); }
.article-hero__back svg { transition: transform var(--dur) var(--ease); }
.article-hero__back:hover svg { transform: translateX(-4px); }
.article-hero__title { margin-top: 11px; font-weight: var(--fw-medium); font-size: var(--fs-h2-fluid); line-height: 1.2; color: var(--c-white); }

.article-media { position: relative; z-index: 1; width: min(842px, calc(100% - 2 * var(--gutter))); margin: calc(-1 * var(--ov)) auto 0; aspect-ratio: 842 / 320; border-radius: 20px; overflow: hidden; background: #0e3550; }
.article-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }

.article-body { max-width: calc(626px + 2 * var(--gutter)); margin: 32px auto 0; padding-inline: var(--gutter); font-size: 16px; line-height: 28px; color: var(--c-grey); }
.article-body .mt { margin-top: 28px; }
.article-body strong { font-weight: var(--fw-bold); }
.article-body__h { margin: 40px 0 41px; font-family: var(--ff-display); font-weight: var(--fw-bold); font-size: 24px; line-height: 1.2; letter-spacing: .48px; color: var(--c-black); }
.article-body ul { padding-left: 76px; margin-bottom: 32px; }

.article-share { max-width: calc(624px + 2 * var(--gutter)); margin: 68px auto 0; padding: 30px var(--gutter) 102px; position: relative; text-align: center; }
.article-share::before { content: ""; position: absolute; top: 0; left: var(--gutter); right: var(--gutter); border-top: 1px solid #d8d8d8; }
.article-share__title { font-family: var(--ff-display); font-weight: var(--fw-medium); font-size: 20px; line-height: 1.505; letter-spacing: 1px; color: var(--c-black); }
.article-share__list { list-style: none; padding: 0; margin-top: 20px; display: flex; flex-wrap: wrap; justify-content: center; gap: 25px; }
.article-share__btn { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 6px; transition: transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease); }
.article-share__btn img { width: 32px; height: 32px; }
.article-share__btn:hover { transform: translateY(-3px); opacity: .7; }
.article-share__btn.is-copied { animation: copied 600ms var(--ease); }
@keyframes copied { 40% { transform: scale(1.2); } }
.article-share__status { position: absolute; left: 0; right: 0; bottom: 56px; font-size: 14px; line-height: 24px; color: var(--c-green); }

@media (max-width: 899px) {
  .article { --ov: 26vw; }
  .article-hero { padding-top: calc(var(--header-top) + var(--header-h) + 64px); }
  .article-media { aspect-ratio: 16 / 9; }
  .article-body ul { padding-left: 24px; }
  .article-share { padding-bottom: 80px; }
}
@media (max-width: 639px) {
  .article-hero__meta { gap: 24px; }
  .article-media { border-radius: 12px; aspect-ratio: 4 / 3; }
  .article { --ov: 32vw; }
  .article-body__h { font-size: 22px; margin: 32px 0 20px; }
}