.article-page { background: #050c12; }
.article-page .site-header { position: relative; }
.article-page .site-header nav a { color: #91a3a9; }
.article-main { position: relative; overflow: hidden; }
.article-main::before { content: ""; position: fixed; inset: 0; z-index: -1; background: radial-gradient(circle at 85% 20%,rgba(134,233,246,.08),transparent 28%),linear-gradient(rgba(134,233,246,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(134,233,246,.025) 1px,transparent 1px); background-size: auto,72px 72px,72px 72px; mask-image: linear-gradient(90deg,transparent,#000 55%,transparent); }
.article-hero { width: var(--shell); min-height: 660px; margin: 0 auto; padding: 120px 0 90px; display: grid; grid-template-columns: minmax(0,1fr) 380px; gap: 10vw; align-items: center; border-bottom: 1px solid var(--line); }
.article-meta { display: flex; align-items: center; gap: 14px; margin-bottom: 28px; font: 500 8px/1 var(--mono); letter-spacing: .16em; color: var(--cyan); }
.article-meta i { width: 28px; height: 1px; background: var(--cyan); }
.article-hero h1 { max-width: 850px; font-size: clamp(54px,6.2vw,92px); }
.article-deck { max-width: 700px; margin: 30px 0 0; color: #a4b4b9; font-size: 19px; line-height: 1.65; }
.article-instrument { position: relative; aspect-ratio: 1; border: 1px solid rgba(134,233,246,.2); background: radial-gradient(circle,rgba(134,233,246,.13),transparent 38%),repeating-linear-gradient(0deg,transparent 0 17px,rgba(134,233,246,.035) 18px); box-shadow: inset 0 0 80px rgba(0,0,0,.28),0 30px 80px rgba(0,0,0,.18); }
.article-instrument::before,.article-instrument::after { content: ""; position: absolute; border: 1px solid rgba(134,233,246,.2); border-radius: 50%; }
.article-instrument::before { inset: 17%; }
.article-instrument::after { inset: 34%; border-style: dashed; }
.article-instrument span { position: absolute; inset: 0; display: grid; place-items: center; font: 400 58px/1 var(--mono); color: var(--cyan); text-shadow: 0 0 30px rgba(134,233,246,.55); }
.article-instrument small { position: absolute; left: 18px; bottom: 17px; font: 400 7px/1 var(--mono); letter-spacing: .12em; color: #60757d; }
.instrument-orange { background: radial-gradient(circle,rgba(244,181,101,.16),transparent 36%),repeating-linear-gradient(90deg,transparent 0 17px,rgba(244,181,101,.035) 18px); }
.instrument-orange span { color: var(--orange); text-shadow: 0 0 30px rgba(244,181,101,.48); }
.article-layout { width: min(1120px,calc(100% - 64px)); margin: 0 auto; padding: 110px 0 140px; display: grid; grid-template-columns: 170px minmax(0,690px); gap: 80px; }
.article-aside { position: sticky; top: 40px; align-self: start; }
.article-aside p { margin: 0 0 22px; font: 500 7px/1.8 var(--mono); letter-spacing: .12em; color: #60747b; }
.article-aside strong { display: block; color: #a9bac0; font-weight: 500; }
.article-copy p { margin: 0 0 30px; color: #b2c0c4; font-size: 18px; line-height: 1.9; }
.article-copy .lead { color: var(--paper); font-size: 26px; line-height: 1.6; letter-spacing: -.02em; }
.article-copy h2 { margin: 75px 0 28px; font-size: clamp(35px,4vw,52px); }
.field-note { margin: 60px 0; padding: 30px; border: 1px solid var(--line); background: rgba(134,233,246,.025); }
.field-note span { display: block; margin-bottom: 16px; font: 500 8px/1 var(--mono); letter-spacing: .14em; color: var(--orange); }
.field-note p { margin: 0; color: var(--paper); font-size: 20px; }
.source-card { margin: 60px 0; padding: 30px; border: 1px solid rgba(244,181,101,.25); background: linear-gradient(135deg,rgba(244,181,101,.055),rgba(134,233,246,.018)); }
.source-card small { display: block; margin-bottom: 15px; font: 500 8px/1 var(--mono); letter-spacing: .14em; color: var(--orange); }
.source-card strong { display: block; margin-bottom: 10px; color: var(--paper); font-size: 23px; font-weight: 500; }
.source-card p { margin-bottom: 22px; font-size: 15px; line-height: 1.7; }
.source-card a { display: inline-flex; gap: 18px; align-items: center; color: var(--cyan); font: 500 9px/1 var(--mono); letter-spacing: .12em; text-decoration: none; }
.source-card a:hover,.source-card a:focus-visible { color: var(--paper); }
.article-signoff { margin-top: 72px; padding-top: 30px; border-top: 1px solid var(--line); font: 500 9px/1.8 var(--mono); letter-spacing: .12em; color: var(--cyan); }
.article-nav { width: var(--shell); margin: 0 auto 110px; border-block: 1px solid var(--line); display: grid; grid-template-columns: 1fr 1fr; }
.article-nav a { min-height: 150px; padding: 30px; display: flex; flex-direction: column; justify-content: space-between; text-decoration: none; transition: background .25s ease; }
.article-nav a+a { border-left: 1px solid var(--line); text-align: right; }
.article-nav a:hover { background: rgba(134,233,246,.035); }
.article-nav small { font: 500 7px/1 var(--mono); letter-spacing: .14em; color: #647982; }
.article-nav strong { font-size: 21px; font-weight: 500; color: var(--paper); }
@media(max-width:900px){.article-hero{grid-template-columns:1fr;gap:60px}.article-instrument{width:min(380px,80vw)}.article-layout{grid-template-columns:1fr;gap:35px}.article-aside{position:static;display:flex;gap:40px}.article-aside p{margin:0}}
@media(max-width:640px){.article-page .site-header{width:calc(100% - 40px)}.article-hero{width:calc(100% - 40px);min-height:auto;padding:90px 0 70px}.article-hero h1{font-size:49px}.article-deck{font-size:16px}.article-instrument{width:100%}.article-layout{width:calc(100% - 40px);padding:75px 0 100px}.article-copy p{font-size:16px}.article-copy .lead{font-size:21px}.article-aside{display:grid;grid-template-columns:1fr 1fr;gap:15px}.article-nav{width:calc(100% - 40px);grid-template-columns:1fr;margin-bottom:70px}.article-nav a+a{border-left:0;border-top:1px solid var(--line);text-align:left}.article-nav a{min-height:125px;padding:24px}}
