:root {
  --ink: #201f22;
  --gray: #858585;
  --paper: #fff;
  --soft: #f3f3f1;
  --line: rgba(32,31,34,.18);
  --page-x: clamp(24px, 5.55vw, 80px);
  --font: "Inter", "Helvetica Neue", Arial, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--font); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; }
img { display: block; width: 100%; }

.reading-progress { position: fixed; top: 0; right: 0; left: 0; z-index: 30; height: 3px; background: transparent; }
.reading-progress i { display: block; width: 100%; height: 100%; transform: scaleX(0); transform-origin: left; background: var(--ink); }
.article-nav { position: absolute; top: 0; right: 0; left: 0; z-index: 4; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: clamp(22px,2.5vw,44px) var(--page-x); color: var(--paper); }
.article-brand { display: inline-flex; width: max-content; align-items: baseline; gap: 8px; font-size: clamp(21px,1.55vw,30px); font-weight: 500; letter-spacing: -.055em; }
.article-brand small { font-size: 9px; letter-spacing: .17em; }
.article-nav__section { color: rgba(255,255,255,.62); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
.article-nav__back { display: inline-flex; justify-self: end; align-items: center; gap: 12px; font-size: 14px; }
.article-nav__back i { display: grid; width: 46px; height: 46px; place-items: center; border: 1px solid rgba(255,255,255,.45); border-radius: 50%; font-style: normal; }

.article-hero { position: relative; min-height: min(940px,100svh); overflow: hidden; color: var(--paper); background: var(--ink); }
.article-hero__image, .article-hero__veil { position: absolute; inset: 0; width: 100%; height: 100%; }
.article-hero__image { object-fit: cover; object-position: center; }
.article-hero__veil { background: linear-gradient(180deg,rgba(16,18,17,.35),rgba(20,20,22,.08) 34%,rgba(20,20,22,.88) 100%), linear-gradient(90deg,rgba(20,20,22,.52),transparent 65%); }
.article-hero__content { position: relative; z-index: 2; display: grid; min-height: min(940px,100svh); grid-template-columns: 1.4fr .6fr; gap: 50px; align-items: end; padding: clamp(160px,17vh,250px) var(--page-x) clamp(54px,5vw,92px); }
.article-hero__tag { display: inline-flex; width: max-content; margin: 0 0 24px; padding: 10px 17px; border: 1px solid rgba(255,255,255,.5); border-radius: 999px; font-size: 13px; }
.article-hero h1 { max-width: 1240px; margin: 0; font-size: clamp(54px,6vw,115px); font-weight: 400; line-height: .94; letter-spacing: -.065em; }
.article-hero__meta { align-self: end; padding-bottom: 10px; border-top: 1px solid rgba(255,255,255,.35); }
.article-hero__meta div { display: flex; justify-content: space-between; gap: 25px; padding: 17px 0; border-bottom: 1px solid rgba(255,255,255,.2); }
.article-hero__meta span { color: rgba(255,255,255,.55); font-size: 12px; text-transform: uppercase; }
.article-hero__meta strong { font-size: 14px; font-weight: 400; text-align: right; }

.article-intro { display: grid; grid-template-columns: .72fr 1.28fr; gap: clamp(60px,9vw,170px); padding: clamp(95px,10vw,190px) var(--page-x); }
.article-intro__index { color: var(--gray); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
.article-intro__lead { max-width: 1080px; margin: 0; font-size: clamp(31px,3.35vw,64px); line-height: 1.02; letter-spacing: -.055em; }
.article-intro__lead span { color: #aaa; }

.article-layout { display: grid; grid-template-columns: minmax(210px,.6fr) minmax(0,1.25fr) minmax(160px,.35fr); gap: clamp(36px,5.5vw,100px); padding: 0 var(--page-x) clamp(100px,10vw,190px); align-items: start; }
.article-toc { position: sticky; top: 34px; padding-top: 8px; }
.article-toc p { margin: 0 0 22px; color: var(--gray); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.article-toc ol { margin: 0; padding: 0; list-style: none; counter-reset: toc; border-top: 1px solid var(--line); }
.article-toc li { counter-increment: toc; border-bottom: 1px solid var(--line); }
.article-toc a { display: grid; grid-template-columns: 30px 1fr; gap: 9px; padding: 14px 0; color: var(--gray); font-size: 13px; line-height: 1.35; }
.article-toc a::before { content: "0" counter(toc); color: var(--ink); font-size: 10px; }
.article-toc a:hover { color: var(--ink); }
.article-toc__cta { display:flex !important; grid-template-columns:none !important; align-items:center; justify-content:space-between; gap:12px; margin-top:20px; padding:14px 16px !important; border:1px solid var(--ink); border-radius:999px; color:var(--ink) !important; font-size:12px !important; font-weight:500; }
.article-toc__cta::before { display:none !important; }
.article-toc__cta span { font-size:17px; }
.article-toc__cta span svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.6; }
.article-toc__cta:hover { color:var(--paper) !important; background:var(--ink); }
.article-body { min-width: 0; font-size: clamp(18px,1.25vw,24px); line-height: 1.6; }
.article-body h2 { margin: clamp(80px,7vw,135px) 0 28px; font-size: clamp(38px,4vw,76px); font-weight: 400; line-height: 1; letter-spacing: -.055em; }
.article-body h2:first-child { margin-top: 0; }
.article-body h3 { margin: 48px 0 16px; font-size: clamp(24px,2vw,36px); font-weight: 500; letter-spacing: -.035em; }
.article-body p { margin: 0 0 28px; }
.article-body strong { font-weight: 600; }
.article-body ul { margin: 36px 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.article-body li { display: grid; grid-template-columns: 34px 1fr; gap: 15px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.article-body li::before { width: 16px; height: 16px; align-self: .3em; background: currentColor; content: ""; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 19 19 5M9 5h10v10' stroke='black' fill='none' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; }
.article-note { margin: 70px 0; padding: 34px; color: var(--paper); background: var(--ink); }
.article-note span { display: block; margin-bottom: 46px; color: var(--gray); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.article-note blockquote { margin: 0; font-size: clamp(28px,3vw,55px); line-height: 1.05; letter-spacing: -.05em; }
.article-figure { margin: 70px calc((100vw - 2 * var(--page-x)) * -.075) 70px 0; }
.article-figure img { aspect-ratio: 1.42; object-fit: cover; }
.article-figure figcaption { margin-top: 12px; color: var(--gray); font-size: 12px; }
.article-side { position: sticky; top: 34px; color: var(--gray); font-size: 12px; }
.article-side__share { display: grid; gap: 10px; padding-top: 16px; border-top: 1px solid var(--line); }
.article-side button { padding: 0; border: 0; background: transparent; color: var(--gray); cursor: pointer; text-align: left; }

.fact-band { display: grid; grid-template-columns: repeat(3,1fr); color: var(--paper); background: var(--ink); }
.fact { min-height: clamp(260px,22vw,420px); padding: clamp(30px,4vw,76px) var(--page-x); border-right: 1px solid rgba(255,255,255,.18); }
.fact:last-child { border-right: 0; }
.fact i { color: var(--gray); font-size: 12px; font-style: normal; }
.fact strong { display: block; margin-top: clamp(60px,7vw,125px); font-size: clamp(54px,5vw,96px); font-weight: 400; line-height: .9; letter-spacing: -.06em; }
.fact span { display: block; max-width: 260px; margin-top: 18px; color: var(--gray); font-size: 14px; line-height: 1.4; }

.article-action { padding: clamp(90px,9vw,170px) var(--page-x); background: var(--soft); }
.article-action__inner { display: grid; grid-template-columns: 1.15fr .85fr; gap: 60px; align-items: end; padding-top: 28px; border-top: 1px solid var(--line); }
.article-action__label { margin: 0 0 80px; color: var(--gray); font-size: 13px; }
.article-action h2 { max-width: 1000px; margin: 0; font-size: clamp(48px,5.4vw,104px); font-weight: 400; line-height: .92; letter-spacing: -.065em; }
.article-action__aside { padding-bottom: 8px; }
.article-action__aside p { max-width: 500px; margin: 0 0 34px; color: var(--gray); font-size: 17px; line-height: 1.5; }
.pill-action { display: inline-flex; min-height: 64px; align-items: center; gap: 22px; padding-left: 28px; border-radius: 999px; background: var(--ink); color: var(--paper); font-size: 15px; font-weight: 500; }
.pill-action i { display: grid; width: 54px; height: 54px; place-items: center; margin-right: 5px; border-radius: 50%; background: var(--paper); color: var(--ink); font-size: 24px; font-style: normal; }
.pill-action i svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.6; }
.article-nav__back i svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.6; }

.next-article { display: grid; grid-template-columns: .72fr 1.28fr; gap: 60px; padding: clamp(80px,8vw,150px) var(--page-x); color: var(--paper); background: var(--ink); }
.next-article__label { color: var(--gray); font-size: 13px; }
.next-article a { display: block; }
.next-article h2 { max-width: 1100px; margin: 0; font-size: clamp(40px,4vw,78px); font-weight: 400; line-height: 1; letter-spacing: -.055em; }
.next-article span { display: inline-block; margin-top: 30px; color: var(--gray); font-size: 14px; }
.next-article a > span { display: inline-flex; align-items: center; gap: 10px; }
.next-article a > span svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.6; }
.article-footer { display: grid; grid-template-columns: 1fr auto 1fr; gap: 30px; align-items: center; padding: 34px var(--page-x); color: var(--gray); background: var(--ink); border-top: 1px solid rgba(255,255,255,.17); font-size: 13px; }
.article-footer nav { display: flex; gap: 28px; }
.article-footer small { justify-self: end; font-size: 12px; }

@media (max-width: 900px) {
  .article-hero__content, .article-intro, .next-article { grid-template-columns: 1fr; }
  .article-hero__meta { display: grid; grid-template-columns: repeat(3,1fr); }
  .article-hero__meta div { display: block; }
  .article-hero__meta strong { display: block; margin-top: 8px; text-align: left; }
  .article-layout { grid-template-columns: minmax(0,1fr); }
  .article-toc { position: static; }
  .article-toc ol { display: grid; grid-template-columns: 1fr 1fr; }
  .article-toc li:nth-child(odd) { padding-right: 18px; }
  .article-toc li:nth-child(even) { padding-left: 18px; border-left: 1px solid var(--line); }
  .article-side { display: none; }
  .article-action__inner { grid-template-columns: 1fr; }
  .article-action__label { margin-bottom: 50px; }
}
@media (max-width: 650px) {
  .article-nav { grid-template-columns: 1fr auto; }
  .article-nav__section { display: none; }
  .article-hero { min-height: 100svh; }
  .article-hero__content { min-height: 100svh; padding-top: 140px; }
  .article-hero h1 { font-size: clamp(40px,12vw,62px); hyphens: auto; overflow-wrap: break-word; }
  .article-hero__meta { grid-template-columns: 1fr; }
  .article-hero__meta div { display: flex; }
  .article-hero__meta strong { margin-top: 0; text-align: right; }
  .article-intro { padding-block: 80px; }
  .article-intro__lead { font-size: 32px; }
  .article-layout { padding-bottom: 90px; }
  .article-toc ol { grid-template-columns: 1fr; }
  .article-toc li:nth-child(odd), .article-toc li:nth-child(even) { padding: 0; border-left: 0; }
  .article-body { font-size: 18px; }
  .article-body h2 { margin-top: 76px; font-size: 42px; }
  .article-note { margin-inline: -24px; padding: 30px 24px; }
  .article-figure { margin: 55px -24px; }
  .article-figure figcaption { padding-inline: 24px; }
  .fact-band { grid-template-columns: 1fr; }
  .fact { min-height: 230px; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.18); }
  .fact strong { margin-top: 62px; }
  .article-action__inner { gap: 50px; }
  .next-article { gap: 46px; }
  .article-footer { grid-template-columns: 1fr; }
  .article-footer nav { flex-wrap: wrap; }
  .article-footer small { justify-self: start; }
}