/* RTL composition follows the image's subject, not just text direction.
   Lettered artwork, book covers and documentary photographs are never mirrored.
   Shared type, colors and assets stay unchanged in every LTR locale. */

/* A breakpoint changes composition atomically. Inset/width transitions would
   otherwise carry the lower mobile artwork through the desktop text column. */
html[dir="rtl"]:root body.portal :is(.editorial-hero,.events-hero,.portal-home-hero,.concept-video-hero)::before,
html[dir="rtl"]:root body.portal :is(.editorial-hero,.events-hero,.portal-home-hero,.concept-video-hero)::after,
html[dir="rtl"]:root body.portal :is(.editorial-art-image,.editorial-art-copy,.events-hero-inner){
 transition:none!important;animation:none!important;
}

/* The decorative home sky has no lettering. Reflect only its background plane,
   so the celestial portrait sits opposite the live, unreflected title. */
html[dir="rtl"]:root body.portal .portal-home-hero{
 isolation:isolate;background:#050d19!important;background-image:none!important;
}
html[dir="rtl"]:root body.portal .portal-home-hero::before{
 content:""!important;display:block!important;position:absolute!important;inset:0!important;
 width:100%!important;height:100%!important;opacity:1!important;z-index:-2!important;
 background:url('/static/xuemo-cosmos-home-hero-20260824.webp') center/cover no-repeat!important;
 transform:scaleX(-1)!important;pointer-events:none;
}
html[dir="rtl"]:root body.portal .portal-home-hero::after{
 content:""!important;display:block!important;position:absolute!important;inset:0!important;
 width:100%!important;height:100%!important;opacity:1!important;z-index:-1!important;
 background:linear-gradient(270deg,rgba(4,10,20,.72),rgba(4,10,20,.15) 60%,transparent),linear-gradient(0deg,rgba(4,10,20,.7),transparent 45%)!important;
 transform:none!important;pointer-events:none;
}

/* Topics owns its light, direction-aware shade in topics-directory.css. */

/* Lettered art is moved into an independent left-hand field. The copy and art
   boxes cannot overlap, even when a translated title wraps onto three lines. */
html[dir="rtl"]:root body.portal.institute-page .editorial-hero{--rtl-art:url('/static/_optimized/xuemo-institute-hero-20260826.png.webp')}
html[dir="rtl"]:root body.portal.academic-network-page .editorial-hero{--rtl-art:url('/static/_optimized/xuemo-academic-network-hero-20260826.png.webp')}
html[dir="rtl"]:root body.portal.journals-page .editorial-hero{--rtl-art:url('/static/_optimized/xuemo-journals-hero-20260826.png.webp')}
html[dir="rtl"]:root body.portal.scholarship-page .editorial-hero{--rtl-art:url('/static/_optimized/xuemo-scholarship-hero-20260826.png.webp')}
html[dir="rtl"]:root body.portal.papers-page .editorial-hero{--rtl-art:url('/static/_optimized/xuemo-papers-calligraphy-hero-20260827-v2.png.webp');--rtl-paper:#fff}
html[dir="rtl"]:root body.portal.international-dialogues-page .editorial-hero{--rtl-art:url('/static/_optimized/xuemo-international-dialogues-hero-20260826.png.webp')}
html[dir="rtl"]:root body.portal.core-concepts-page .editorial-hero{--rtl-art:url('/static/xuemo-core-concepts-calligraphy-transparent-20260905.png');--rtl-paper:#fff}
html[dir="rtl"]:root body.portal.translator-comments-page .editorial-hero{--rtl-art:url('/static/xuemo-ink-dao.jpg');--rtl-art-size:contain;--rtl-art-position:center}
html[dir="rtl"]:root body.portal.reception-page .editorial-hero{--rtl-art:url('/static/xuemo-international-media-hero.jpg');--rtl-art-size:contain;--rtl-art-position:center}
html[dir="rtl"]:root body.portal.reception-page:has(#reviews:target) .editorial-hero{
 --rtl-art:url('/static/xuemo-international-reviews-hero.jpg');background-image:none!important;
}
html[dir="rtl"]:root body.portal:is(.institute-page,.academic-network-page,.core-concepts-page,.translator-comments-page,.reception-page,.journals-page,.scholarship-page,.papers-page,.international-dialogues-page) .editorial-hero{
 position:relative;isolation:isolate;display:flex!important;flex-direction:column!important;
 justify-content:center!important;align-items:stretch!important;height:auto!important;min-height:640px!important;
 padding:80px max(40px,calc((100vw - 1200px)/2))!important;
 background:var(--rtl-paper,#faf8f2)!important;background-image:none!important;
}
html[dir="rtl"]:root body.portal:is(.institute-page,.academic-network-page,.core-concepts-page,.translator-comments-page,.reception-page,.journals-page,.scholarship-page,.papers-page,.international-dialogues-page) .editorial-hero::before{
 content:""!important;display:block!important;position:absolute!important;
 inset:40px auto 40px max(24px,calc((100vw - 1280px)/2))!important;
 width:43%!important;height:auto!important;z-index:-1!important;opacity:1!important;
 background:var(--rtl-art) var(--rtl-art-position,right center)/var(--rtl-art-size,auto 100%) no-repeat!important;
 mask-image:linear-gradient(to right,#000 88%,transparent);mix-blend-mode:multiply;
 transform:none!important;pointer-events:none;
}
html[dir="rtl"]:root body.portal:is(.institute-page,.academic-network-page,.core-concepts-page,.translator-comments-page,.reception-page,.journals-page,.scholarship-page,.papers-page,.international-dialogues-page) .editorial-hero::after{content:none!important;display:none!important}
html[dir="rtl"]:root body.portal:is(.institute-page,.academic-network-page,.core-concepts-page,.translator-comments-page,.reception-page,.journals-page,.scholarship-page,.papers-page,.international-dialogues-page) .editorial-hero>:is(h1,p,.editorial-kicker){
 width:47%!important;max-width:600px!important;margin-left:auto!important;margin-right:0!important;
 text-align:right!important;text-shadow:none!important;
}

/* The two generated ink canvases retain their original orientation and
   lettering. Crop only the empty field, then place the painting on the left. */
html[dir="rtl"]:root body.portal.public-access-page .editorial-art-copy{
 margin-left:auto!important;margin-right:0!important;text-align:right!important;
}
html[dir="rtl"]:root body.portal.public-access-page .editorial-art-hero .editorial-art-image{
 inset:auto auto 0 0!important;width:50%!important;object-position:right bottom!important;
 mask-image:linear-gradient(to right,#000 94%,transparent);transform:none!important;
}

/* Portrait and event photos with meaningful details use an unreflected
   image field. Matching navy joins the picture to the right reading column. */
html[dir="rtl"]:root body.portal.academy-vr-page .editorial-hero{--rtl-photo:url('/static/_optimized/xuemo-academy-wuwei-hero-20260826.png.webp')}
html[dir="rtl"]:root body.portal.international-studies-page .editorial-hero{--rtl-photo:url('/static/_optimized/xuemo-studies-2026-hero-20260826.png.webp')}
html[dir="rtl"]:root body.portal.events-page .events-hero{--rtl-photo:url('/static/_optimized/xuemo-events-hero-20260826-v3.png.webp')}
html[dir="rtl"]:root body.portal:is(.academy-vr-page,.events-page,.international-studies-page) :is(.editorial-hero,.events-hero){
 position:relative;isolation:isolate;background:#07101f!important;background-image:none!important;
 height:auto!important;min-height:660px!important;display:flex!important;flex-direction:column!important;
 justify-content:center!important;align-items:stretch!important;padding:80px max(40px,calc((100vw - 1200px)/2))!important;
}
html[dir="rtl"]:root body.portal.events-page .events-hero{margin-top:88px!important}
html[dir="rtl"]:root body.portal:is(.academy-vr-page,.events-page,.international-studies-page) :is(.editorial-hero,.events-hero)::before{
 content:""!important;display:block!important;position:absolute!important;inset:0 auto 0 0!important;
 width:51%!important;height:100%!important;opacity:1!important;z-index:-1!important;
 background:var(--rtl-photo) right center/auto 100% no-repeat!important;
 mask-image:linear-gradient(to right,#000 82%,transparent);transform:none!important;pointer-events:none;
}
html[dir="rtl"]:root body.portal:is(.academy-vr-page,.events-page,.international-studies-page) :is(.editorial-hero,.events-hero)::after{content:none!important;display:none!important}
html[dir="rtl"]:root body.portal:is(.academy-vr-page,.international-studies-page) .editorial-hero>:is(h1,p,.editorial-kicker),
html[dir="rtl"]:root body.portal.events-page .events-hero-inner{
 width:47%!important;max-width:600px!important;margin-left:auto!important;margin-right:0!important;text-align:right!important;
}

/* The group photograph contains names, flags and faces across its full width.
   Put the introduction above it instead of covering or reflecting the group. */
html[dir="rtl"]:root body.portal.forums-page .editorial-hero{
 --rtl-group-height:clamp(180px,45.14vw,650px);
 position:relative;isolation:isolate;background:#07101f!important;background-image:none!important;
 display:block!important;height:auto!important;min-height:0!important;
 padding:56px max(40px,calc((100vw - 1200px)/2)) calc(var(--rtl-group-height) + 40px)!important;
}
html[dir="rtl"]:root body.portal.forums-page .editorial-hero::before{
 content:""!important;display:block!important;position:absolute!important;inset:auto 0 0!important;
 width:100%!important;height:var(--rtl-group-height)!important;opacity:1!important;z-index:-1!important;
 background:url('/static/_optimized/xuemo-forums-hero-20260828.png.webp') center/contain no-repeat!important;
 transform:none!important;pointer-events:none;
}
html[dir="rtl"]:root body.portal.forums-page .editorial-hero::after{content:none!important;display:none!important}
html[dir="rtl"]:root body.portal.forums-page .editorial-hero>:is(h1,p,.editorial-kicker){max-width:760px!important;margin-left:auto!important;margin-right:0!important;text-align:right!important}

/* The conceptual silhouette is also unlettered decorative art. Reflect its
   background plane, keeping the live title, controls and data untouched. */
html[dir="rtl"]:root body.portal.concept-correlation-page .concept-video-hero{isolation:isolate;background:#071126!important;background-image:none!important}
html[dir="rtl"]:root body.portal.concept-correlation-page .concept-video-hero::before{
 content:""!important;display:block!important;position:absolute!important;inset:0!important;
 width:100%!important;height:100%!important;opacity:1!important;z-index:-2!important;
 background:url('/static/xuemo-concept-correlation-hero-20260826.webp') center/cover no-repeat!important;
 transform:scaleX(-1)!important;pointer-events:none;
}
html[dir="rtl"]:root body.portal.concept-correlation-page .concept-video-hero::after{
 content:""!important;display:block!important;position:absolute!important;inset:0!important;
 background:linear-gradient(270deg,rgba(4,10,25,.86),rgba(4,10,25,.65) 40%,rgba(4,10,25,.08) 72%)!important;
 z-index:-1!important;opacity:1!important;pointer-events:none;
}
html[dir="rtl"]:root body.portal.scholar-papers-page .editorial-hero{
 background-image:linear-gradient(270deg,rgba(5,13,29,.84),rgba(5,13,29,.38) 60%,rgba(5,13,29,.03)),url('/static/xuemo-cosmos-hero-v2.webp')!important;
}
/* Concept Library owns both text directions in dictionary-hero.css. */

/* Mobile and tablet: a separate lower art field guarantees breathing space
   regardless of title length or native-script line height. */
@media(max-width:1000px){
 html[dir="rtl"]:root body.portal:is(.institute-page,.academic-network-page,.core-concepts-page,.translator-comments-page,.reception-page,.journals-page,.scholarship-page,.papers-page,.international-dialogues-page) .editorial-hero{
  display:block!important;min-height:0!important;padding:48px 32px 350px!important;
 }
 html[dir="rtl"]:root body.portal:is(.institute-page,.academic-network-page,.core-concepts-page,.translator-comments-page,.reception-page,.journals-page,.scholarship-page,.papers-page,.international-dialogues-page) .editorial-hero::before{
  inset:auto 24px 24px!important;width:calc(100% - 48px)!important;height:280px!important;
  background-position:var(--rtl-art-position,right center)!important;mask-image:none;
 }
 html[dir="rtl"]:root body.portal:is(.institute-page,.academic-network-page,.core-concepts-page,.translator-comments-page,.reception-page,.journals-page,.scholarship-page,.papers-page,.international-dialogues-page) .editorial-hero>:is(h1,p,.editorial-kicker),
 html[dir="rtl"]:root body.portal:is(.academy-vr-page,.international-studies-page) .editorial-hero>:is(h1,p,.editorial-kicker),
 html[dir="rtl"]:root body.portal.events-page .events-hero-inner{
  width:100%!important;max-width:none!important;
 }
 html[dir="rtl"]:root body.portal.public-access-page .editorial-art-hero .editorial-art-image{width:100%!important;mask-image:none}
 html[dir="rtl"]:root body.portal.public-access-page .editorial-hero.editorial-art-hero{padding-bottom:372px!important}
 html[dir="rtl"]:root body.portal:is(.academy-vr-page,.events-page,.international-studies-page) :is(.editorial-hero,.events-hero){
  min-height:0!important;padding:48px 32px 350px!important;
 }
 html[dir="rtl"]:root body.portal:is(.academy-vr-page,.events-page,.international-studies-page) :is(.editorial-hero,.events-hero)::before{
  inset:auto 0 0!important;width:100%!important;height:300px!important;background-size:cover!important;
  background-position:right 35%!important;mask-image:linear-gradient(to bottom,transparent,#000 15%);
 }
}
@media(max-width:900px){
 html[dir="rtl"]:root body.portal.events-page .events-hero{margin-top:72px!important}
}
@media(max-width:620px){
 html[dir="rtl"]:root body.portal.public-access-page .editorial-hero.editorial-art-hero{padding-bottom:302px!important}
 html[dir="rtl"]:root body.portal:is(.institute-page,.academic-network-page,.core-concepts-page,.translator-comments-page,.reception-page,.journals-page,.scholarship-page,.papers-page,.international-dialogues-page,.academy-vr-page,.events-page,.international-studies-page) :is(.editorial-hero,.events-hero){padding-inline:24px!important}
 html[dir="rtl"]:root body.portal.forums-page .editorial-hero{padding-inline:24px!important}
 html[dir="rtl"]:root body.portal .portal-home-hero::after{background:linear-gradient(0deg,rgba(4,10,20,.96),rgba(4,10,20,.72) 55%,rgba(4,10,20,.2))!important}
}