/* Shared articles shell. Loaded after each legacy article stylesheet. */
:root{
  --article-bg:#070936;
  --article-deep:#05062d;
  --article-panel:#11145a;
  --article-panel-2:#171b70;
  --article-line:rgba(116,133,255,.42);
  --article-blue:#8fb0ff;
  --article-pink:#f12674;
  --article-ink:#f8f9ff;
  --article-muted:#c7cbe1;
  --article-mono:'Space Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --article-sans:'Hanken Grotesk',Arial,sans-serif;
}

html,body{background:var(--article-bg)!important;color:var(--article-muted)}
body{font-family:var(--article-sans)!important}

/* A few early article templates predate the current wordmark sizing. */
nav.nav3 .brand img{width:166px!important;height:auto!important}

/* Post header uses the same field and bright pink accent as the site. */
.post-head,.hero{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  padding:142px 0 68px!important;
  background:
    radial-gradient(circle at 84% 22%,rgba(30,48,218,.6),transparent 31%),
    linear-gradient(132deg,#070936 0%,#11145a 67%,#2a0f55 100%)!important;
  border-bottom:1px solid var(--article-line)!important;
}
.post-head::before,.hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  opacity:.32;
  background-image:radial-gradient(rgba(143,176,255,.7) .65px,transparent .8px);
  background-size:15px 15px;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 25%,transparent 78%);
  mask-image:linear-gradient(90deg,transparent 0,#000 25%,transparent 78%);
}
.post-head .reading,.hero .wrap{max-width:1180px!important;padding:0 clamp(22px,5vw,72px)!important}
.post-head .back{font:400 12px/1.4 var(--article-mono)!important;color:var(--article-blue)!important;text-transform:uppercase!important;letter-spacing:.11em!important}
.post-head .cat,.hero .kick{font:400 11px/1.4 var(--article-mono)!important;color:var(--article-blue)!important;letter-spacing:.16em!important}
.post-head h1,.hero h1{
  max-width:18ch!important;
  margin-top:14px!important;
  font-family:var(--article-sans)!important;
  font-size:clamp(42px,6vw,78px)!important;
  font-weight:800!important;
  letter-spacing:-.065em!important;
  line-height:.96!important;
  color:var(--article-ink)!important;
}
.post-head h1::after,.hero h1::after{content:"";display:block;width:72px;height:4px;margin-top:24px;background:var(--article-pink)}
.post-head .standfirst,.hero p{max-width:58ch!important;font-size:19px!important;line-height:1.55!important;color:var(--article-muted)!important}
.post-head .byline{font:400 12px/1.5 var(--article-mono)!important;color:var(--article-blue)!important;letter-spacing:.04em!important}

/* Editorial content, figures, related cards, and the directory all use the same panels. */
.article{padding:68px 0 44px!important;background:var(--article-bg)!important}
.article .reading{max-width:800px!important;padding:0 clamp(22px,5vw,72px)!important}
.article p,.article li{font-size:18px!important;line-height:1.72!important;color:var(--article-muted)!important}
.article h2{font-family:var(--article-sans)!important;font-size:clamp(28px,3.5vw,42px)!important;font-weight:800!important;letter-spacing:-.05em!important;color:var(--article-ink)!important}
.article h3{font-family:var(--article-sans)!important;color:var(--article-ink)!important}
.article strong{color:var(--article-ink)!important}
.article a{color:var(--article-blue)!important}
.article blockquote,.pull-quote{border-left:3px solid var(--article-pink)!important;border-radius:0!important;background:linear-gradient(90deg,rgba(241,38,116,.14),transparent)!important;color:var(--article-ink)!important}
.article blockquote p,.pull-quote p{color:var(--article-ink)!important}
.article table,.figure,.article pre,.article code{border-color:var(--article-line)!important;background:#0a0d45!important;color:var(--article-ink)!important}
.article thead th{background:var(--article-panel)!important;color:#fff!important}
.article tbody td{border-color:rgba(143,176,255,.2)!important;color:var(--article-muted)!important}
.article tbody tr:nth-child(even){background:rgba(143,176,255,.06)!important}
.article .media-link{border:1px solid var(--article-line)!important;border-radius:0!important;background:linear-gradient(100deg,#1e2094,#472180 72%,rgba(241,38,116,.55))!important;color:#fff!important}
.article .video-frame{border-color:var(--article-line)!important;border-radius:0!important;background:#05062d!important}

.cta-band{padding:50px 0!important;background:linear-gradient(100deg,#10145c,#25105a 68%,#5c123f)!important;border-color:var(--article-line)!important}
.cta-band .inner{max-width:1180px!important;padding:0 clamp(22px,5vw,72px)!important}
.cta-band p{font-style:normal!important;color:var(--article-muted)!important}
.cta-band a.btn{border-radius:0!important;background:#f12674!important;color:#fff!important;text-transform:uppercase!important}
.more{padding:56px 0!important;background:var(--article-deep)!important}
.more .reading{max-width:1180px!important;padding:0 clamp(22px,5vw,72px)!important}
.more h4{color:var(--article-blue)!important;font-family:var(--article-mono)!important}
.more a.mc{border:1px solid var(--article-line)!important;border-radius:0!important;background:var(--article-panel)!important;color:#fff!important}
.more a.mc .k{color:var(--article-blue)!important}.more a.mc .t{font-family:var(--article-sans)!important;color:#fff!important}

/* All Articles follows the same shell instead of the old cream card system. */
.feat,.grid,.primer{background:var(--article-bg)!important}
.feat{padding-top:42px!important}.grid{padding-bottom:68px!important}
.feat a.card,.primer .band,a.pc{
  border:1px solid var(--article-line)!important;
  border-radius:0!important;
  background:linear-gradient(145deg,#151a70,#0d104f)!important;
  color:var(--article-ink)!important;
  box-shadow:none!important;
}
.feat a.card .r{background:linear-gradient(135deg,#080a39,#261152)!important}
.feat .ft,.primer .band .t,a.pc .t{font-family:var(--article-sans)!important;color:#fff!important}
.feat .fd,.primer .band .d,a.pc .d{color:var(--article-muted)!important}
.feat .fk,.feat .fm,.feat .go,.grid .eyebrow,a.pc .k,a.pc .m,.primer .band a{color:var(--article-blue)!important}
.cards{gap:16px!important}.grid .eyebrow:after{background:var(--article-line)!important}
a.pc{min-height:248px!important;padding:24px!important}
a.pc::before{width:42px!important;height:42px!important;border-top-left-radius:0!important;background:linear-gradient(135deg,transparent 0 49%,rgba(241,38,116,.75) 50% 100%)!important}
a.pc .k::before{color:var(--article-pink)!important}
a.pc:hover,.feat a.card:hover{border-color:var(--article-pink)!important;transform:translateY(-2px)}

/* Footers were already structurally shared. These rules make their desktop finish identical. */
footer.mobile-brand-footer{background:var(--article-deep)!important;border-top:1px solid var(--article-line)!important}
footer.mobile-brand-footer .fcol h5{color:var(--article-blue)!important}
footer.mobile-brand-footer .fbot{border-color:rgba(143,176,255,.22)!important}

@media(max-width:860px){
  .post-head,.hero{padding:108px 0 48px!important}
  .post-head h1,.hero h1{font-size:clamp(40px,12vw,58px)!important}
  .post-head .reading,.hero .wrap,.article .reading,.more .reading,.cta-band .inner{padding:0 22px!important}
}