/* One type system for project openings only: Archivo Black, Abril, DM Sans. */
body :is(#top,#sway-project) .cs-hero{--hero-ink:#232720;color:var(--project-cover-ink,#232720)}
body :is(#top,#sway-project) .cs-hero h1{font-family:"Archivo Black","Arial Black",Impact,sans-serif!important;font-weight:400!important;color:var(--project-cover-ink,#232720)!important;letter-spacing:-.055em}
body :is(#top,#sway-project) .cs-hero .cs-sub{font-family:"Abril Fatface","Didot",Georgia,serif!important;font-weight:400!important;line-height:1.3;letter-spacing:-.025em;color:var(--project-cover-ink,#232720)}
body :is(#top,#sway-project) .cs-hero :is(.cs-intro,.sw-intro){font-family:"DM Sans",ui-sans-serif,system-ui,sans-serif!important;font-weight:400!important;font-size:13px;line-height:1.85;color:var(--project-cover-ink,#232720)}
body :is(#top,#sway-project) .cs-hero :is(.label,.meta-grid){font-family:"DM Sans",ui-sans-serif,system-ui,sans-serif!important;font-weight:400}
body :is(#top,#sway-project) .cs-hero .meta-grid{font-size:11px;line-height:1.6}
body :is(#top,#sway-project) .cs-hero .meta-grid dt{font-size:9px;line-height:1.6;letter-spacing:.1em;font-weight:500}
:root:lang(zh) body :is(#top,#sway-project) .cs-hero h1{font-family:"Archivo Black","Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif!important}
:root:lang(zh) body :is(#top,#sway-project) .cs-hero .cs-sub{font-family:"Abril Fatface","Noto Serif SC","Songti SC","SimSun",serif!important}
:root:lang(zh) body :is(#top,#sway-project) .cs-hero :is(.cs-intro,.sw-intro,.label,.meta-grid){font-family:"DM Sans","Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif!important}
/* MuseAI restores its original edge-integrated image, inside the rounded cover. */
body.ma-editorial #top .cs-hero.bleed{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(20px,4vw,60px);padding:clamp(35px,4.6vw,76px) 0 0 clamp(35px,4.6vw,76px);align-items:stretch;background:#f8f7f3}
body.ma-editorial #top .cs-hero.bleed>div{align-self:center;padding-bottom:clamp(35px,4.6vw,76px)}
body.ma-editorial #top .cs-hero.bleed figure.hero-stage{position:relative;width:100%;max-width:none;height:auto;aspect-ratio:auto;margin:calc(clamp(35px,4.6vw,76px)*-1) 0 0;border-radius:0;align-self:stretch;justify-self:stretch;overflow:hidden;background:#f8f7f3}
body.ma-editorial #top .cs-hero.bleed figure.hero-stage img{position:absolute;inset:auto 0 0 auto;width:100%;height:auto;min-height:100%;object-fit:cover;object-position:right bottom;border-radius:0}
@media(max-width:760px){
 body.ma-editorial #top .cs-hero.bleed{grid-template-columns:minmax(0,1fr);gap:20px;padding:35px 22px 0}
 body.ma-editorial #top .cs-hero.bleed>div{padding-bottom:0}
 body.ma-editorial #top .cs-hero.bleed figure.hero-stage{width:calc(100% + 44px);max-width:none;aspect-ratio:1.4;margin:0 -22px;min-height:0}
 body.ma-editorial #top .cs-hero.bleed figure.hero-stage img{height:100%;min-height:0;object-fit:cover;object-position:right bottom}
}

/* Preserve readable text on RouteOps' existing dark cover. */
body :is(#top,#sway-project) .cs-hero[aria-label="RouteOps"]{--project-cover-ink:#e8eef2}
body:has(.cs-hero) .cord small{right:0}

/* Shallower covers, with a slightly stronger product image. */
@media(min-width:1001px){
 body :is(#top,#sway-project) .cs-hero.cs-hero{min-height:560px;padding-top:36px;padding-bottom:36px}
 body #sway-project .cs-hero.cs-hero.sw-cover{min-height:590px;padding-block:38px}
 body #sway-project .cs-hero.cs-hero.sw-cover figure{min-height:480px}
 body #top .cs-hero.cs-hero:not(.sw-cover){grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);gap:5%;padding-inline:clamp(30px,3.3vw,52px)}
 body #top .cs-hero.cs-hero h1{font-size:clamp(65px,8vw,118px);margin:16px 0 20px}
 body #top .cs-hero.cs-hero .cs-sub{font-size:clamp(22px,2vw,29px)!important;margin:0 0 17px;max-width:26ch!important}
 body #top .cs-hero.cs-hero .cs-intro{font-size:12px;line-height:1.75;margin:0 0 22px;max-width:47ch}
 body #top .cs-hero.cs-hero .meta-grid{gap:10px 22px}
 body.sj-editorial #top .cs-hero.cs-hero h1{font-size:clamp(60px,6.1vw,94px)}
 body.sj-editorial #top .cs-hero.cs-hero .sj-logo{width:115px;margin-bottom:17px}
 body.sj-editorial #top .cs-hero.cs-hero>figure{max-width:640px;width:100%;margin-top:0}
 body.flow-editorial #top .cs-hero.cs-hero{padding-bottom:80px}
 body.flow-editorial #top .cs-hero.cs-hero figure.stack{width:100%;max-width:640px;aspect-ratio:1/.62}
 body.flow-editorial #top .cs-hero.cs-hero .stack .front{width:90%}
 body.flow-editorial #top .cs-hero.cs-hero .stack.big .front{width:100%}
 body.flow-editorial #top .cs-hero.cs-hero .stack .back{width:79%}
 body.ma-editorial #top .cs-hero.cs-hero.bleed{grid-template-columns:minmax(0,4.6fr) minmax(0,7.4fr);gap:36px;min-height:560px;padding:36px 0 0 clamp(30px,3.3vw,52px)}
 body.ma-editorial #top .cs-hero.cs-hero.bleed>div{padding-bottom:36px}
 body.ma-editorial #top .cs-hero.cs-hero.bleed figure.hero-stage{margin-top:-36px}
}
/* Flow uses the same short standfirst + body structure as the other projects. */
body.flow-editorial #top .cs-hero.cs-hero .flow-cover-copy .cs-sub{font:400 clamp(22px,2vw,29px)/1.3 "Abril Fatface",Didot,Georgia,serif!important;letter-spacing:-.025em;max-width:26ch!important;margin-bottom:17px}
body.flow-editorial #top .cs-hero.cs-hero .flow-cover-copy .cs-intro{font:400 12px/1.75 "DM Sans",system-ui,sans-serif!important;max-width:47ch;margin-bottom:22px}
:root:lang(zh) body.flow-editorial #top .cs-hero.cs-hero .flow-cover-copy .cs-sub{font-family:"Abril Fatface","Noto Serif SC","Songti SC","SimSun",serif!important}
:root:lang(zh) body.flow-editorial #top .cs-hero.cs-hero .flow-cover-copy .cs-intro{font-family:"DM Sans","Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif!important}
@media(max-width:1000px){
 body.flow-editorial #top .cs-hero.cs-hero>div{display:block}
 body.flow-editorial #top .cs-hero.cs-hero .meta-grid{display:grid;margin-top:20px}
 body.sj-editorial #top .cs-hero.cs-hero h1{font-size:clamp(45px,8vw,80px)}
 body.sj-editorial #top .cs-hero.cs-hero>figure{width:96%;max-width:640px}
 body.flow-editorial #top .cs-hero.cs-hero figure.stack{width:100%;max-width:660px}
 body.ma-editorial #top .cs-hero.cs-hero.bleed figure.hero-stage{width:100%}
}
@media(max-width:760px){
 body.ma-editorial #top .cs-hero.cs-hero.bleed figure.hero-stage{width:calc(100% + 44px)}
 body.flow-editorial #top .cs-hero.cs-hero .flow-cover-copy .cs-sub{font-size:23px!important}
}