Xi, Putin, Kim and the visual narrative of a shifting global landscape

The Guardian Headline Full font family includes several styles, each available in multiple formats. The light, regular, medium, and semibold weights are provided, with both normal and italic variants. These fonts are hosted at the specified URLs and support woff2, woff, and truetype formats.The Guardian Headline Full font family includes several styles: bold (normal and italic), black (normal and italic), light (normal and italic), and regular (normal and italic). Each style is available in WOFF2, WOFF, and TrueType formats. Additionally, the Guardian Titlepiece font is available in bold (normal style) in the same formats. All fonts are sourced from the Guardian’s asset server.The font family “Guardian Headline Full” includes multiple styles and weights, each available in WOFF2, WOFF, and TrueType formats. Here are the details:

– Regular Italic: weight 400, italic style
– Medium: weight 500, normal style
– Medium Italic: weight 500, italic style
– Semibold: weight 600, normal style
– Semibold Italic: weight 600, italic style
– Bold: weight 700, normal style
– Bold Italic: weight 700, italic style
– Black: weight 900, normal style
– Black Italic: weight 900, italic style

All font files are hosted at the specified URLs.The provided text appears to be CSS code for styling web content, including font definitions and responsive grid layouts for different screen sizes. It specifies font families, weights, styles, and file sources, as well as grid configurations for various container elements across breakpoints.The interactive grid figure captions have a top padding of 4 pixels. For elements named “lines” and “meta” within the grid, they are placed in a specific grid area and have adjusted margins. On larger screens, the grid uses five columns with defined widths.

On iOS and Android devices, article headers use specific fonts and styling: the standfirst text uses a weighted headline font, section names are displayed with the first letter capitalized, and certain elements have adjusted padding. Byline authors are shown in a bold headline font, and figures have automatic height. A paragraph following an atomic element has no top margin.

Additionally, custom font faces are loaded for “Guardian Headline Full” in light and light italic weights, with sources provided in multiple formats.@font-face {
font-family: ‘Guardian Headline Full’;
src: url(‘https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Regular.woff2’) format(‘woff2’),
url(‘https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Regular.woff’) format(‘woff’),
url(‘https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Regular.ttf’) format(‘truetype’);
font-weight: 400;
font-style: normal;
}

@font-face {
font-family: ‘Guardian Headline Full’;
src: url(‘https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-BoldItalic.woff2’) format(‘woff2’),
url(‘https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-BoldItalic.woff’) format(‘woff’),
url(‘https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-BoldItalic.ttf’) format(‘truetype’);
font-weight: 700;
font-style: italic;
}@font-face {
font-family: ‘Guardian Headline Full’;
src: url(‘https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Black.woff2’) format(‘woff2’),
url(‘https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Black.woff’) format(‘woff’),
url(‘https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Black.ttf’) format(‘truetype’);
font-weight: 900;
font-style: normal;
}

@font-face {
font-family: ‘Guardian Titlepiece’;
src: url(‘https://assets.guim.co.uk/static/frontend/fonts/guardian-titlepiece/noalts-not-hinted/GTGuardianTitlepiece-Bold.woff2’) format(‘woff2’),
url(‘https://assets.guim.co.uk/static/frontend/fonts/guardian-titlepiece/noalts-not-hinted/GTGuardianTitlepiece-Bold.woff’) format(‘woff’),
url(‘https://assets.guim.co.uk/static/frontend/fonts/guardian-titlepiece/noalts-not-hinted/GTGuardianTitlepiece-Bold.ttf’) format(‘truetype’);
font-weight: 700;
font-style: normal;
}

@media (min-width: 71.25em) {
.content__main-column–interactive {
margin-left: 160px;
}
}

@media (min-width: 81.25em) {
.content__main-column–interactive {
margin-left: 240px;
}
}

.content__main-column–interactive .element-atom {
max-width: 620px;
}

@media (max-width: 46.24em) {
.content__main-column–interactive .element-atom {
max-width: 100%;
}
}

.content__main-column–interactive .element-showcase {
margin-left: 0;
}

@media (min-width: 46.25em) {
.content__main-column–interactive .element-showcase {
max-width: 620px;
}
}

@media (min-width: 71.25em) {
.content__main-column–interactive .element-showcase {
max-width: 860px;
}
}

.content__main-column–interactive .element-immersive {
max-width: 1100px;
}

@media (max-width: 46.24em) {
.content__main-column–interactive .element-immersive {
width: calc(100vw – var(–scrollbar-width));
position: relative;
left: 50%;
right: 50%;
margin-left: calc(-50vw + var(–half-scrollbar-width)) !important;
margin-right: calc(-50vw + var(–half-scrollbar-width)) !important;
}
}

@media (min-width: 46.25em) {
.content__main-column–interactive .element-immersive {
transform: translate(-20px);
width: calc(100% + 60px);
}
}

@media (max-width: 71.24em) {
.content__main-column–interactive .element-immersive {
margin-left: 0;
margin-right: 0;
}
}

@media (min-width: 71.25em) {
.content__main-column–interactive .element-immersive {
transform: translate(0);
width: auto;
}
}

@media (min-width: 81.25em) {
.content__main-column–interactive .element-immersive {
max-width: 1260px;
}
}

.content__main-column–interactive p,
.content__main-column–interactive ul {
max-width: 620px;
}

.content__main-column–interactive:before {
position: absolute;
top: 0;
height: calc(100% + 15px);
min-height: 100px;
content: “”;
}

@media (min-width: 71.25em) {
.content__main-column–interactive:before {
border-left: 1px solid #dcdcdc;
z-index: -1;
left: -10px;
}
}

@media (min-width: 81.25em) {
.content__main-column–interactive:before {
border-left: 1px solid #dcdcdc;
left: -11px;
}
}

.content__main-column–interactive .element-atom {
margin-top: 0;
margin-bottom: 0;
padding-bottom: 12px;
padding-top: 12px;
}

.content__main-column–interactive p + .element-atom {
padding-top: 0;
padding-bottom: 0;
margin-top: 12px;
margin-bottom: 12px;
}

.content__main-column–interactive .element-inline {
max-width: 620px;
}

@media (min-width: 61.25em) {
figure[data-spacefinder-role=”inline”].element {
max-width: 620px;
}
}

:root {
–dateline: #606060;
–headerBorder: #dcdcdc;
–captionText: #999;
–captionBackground: hsla(0, 0%, 7%, 0.72);
–feature: #c70000;
–new-pillar-colour: var(–primary-pillar, var(–feature));
}

.content__main-column–interactive .element.element-atom,
.element.element-atom {
padding: 0;
}

#article-body > div .element-atom:first-of-type + p:first-of-type,
#article-body > div .element-atom:first-of-type + .sign-in-ga {
/ Additional styling if needed /
}The first paragraph after certain elements in the article body, interactive content, comment body, feature body, or sections with the attribute `data-gu-name=body` gets a top padding of 14 pixels.

The first letter of these paragraphs is styled with a specific font, bold weight, large size, uppercase text, and a colored drop cap effect.

Paragraphs following a horizontal rule in these sections have no top padding.

Showcase element captions are set to a static position and a maximum width of 620 pixels.

Immersive elements span the full viewport width, minus the scrollbar. On screens up to 71.24em wide, they are limited to 978 pixels, and their captions have padding on the sides. For screens between 30em and 71.24em, the caption padding is 20 pixels. On screens from 46.25em to 61.24em, immersive elements also have a maximum width.@media (max-width: 740px) {
.element.element–immersive.element-immersive {
margin-left: -10px !important;
margin-right: 0 !important;
left: 0;
}
}

@media (max-width: 740px) and (min-width: 480px) {
.element.element–immersive.element-immersive {
margin-left: -20px !important;
}
.element.element–immersive.element-immersive figcaption {
padding-inline: 20px;
}
}

@media (min-width: 980px) {
.furniture-wrapper {
display: grid;
grid-column-gap: 20px;
grid-row-gap: 0;
grid-template-columns: [title-start headline-start meta-start standfirst-start] repeat(5, 1fr) [title-end headline-end meta-end standfirst-end portrait-start] repeat(5, 1fr) [portrait-end];
grid-template-rows: [title-start portrait-start] .25fr [title-end headline-start] 1fr [headline-end standfirst-start] .75fr [standfirst-end meta-start] auto [meta-end portrait-end];
}
.furniture-wrapper #headline > div:first-child,
.furniture-wrapper [data-gu-name=headline] > div:first-child,
.furniture-wrapper .headline > div:first-child {
border-top: 1px solid var(–headerBorder);
}
.furniture-wrapper #meta,
.furniture-wrapper [data-gu-name=meta] {
position: relative;
padding-top: 2px;
margin-right: 0;
}
.furniture-wrapper .standfirst .content__standfirst,
.furniture-wrapper #standfirst .content__standfirst,
.furniture-wrapper [data-gu-name=standfirst] .content__standfirst {
margin-bottom: 4px;
}
.furniture-wrapper .standfirst ul li,
.furniture-wrapper #standfirst ul li,
.furniture-wrapper [data-gu-name=standfirst] ul li {
font-size: 20px;
}
.furniture-wrapper .standfirst li a,
.furniture-wrapper .standfirst a,
.furniture-wrapper #standfirst li a,
.furniture-wrapper #standfirst a,
.furniture-wrapper [data-gu-name=standfirst] li a,
.furniture-wrapper [data-gu-name=standfirst] a {
border-bottom: none;
background-image: none !important;
text-decoration: underline;
text-underline-offset: 6px;
text-decoration-color: var(–headerBorder, #dcdcdc);
}
.furniture-wrapper .standfirst li a:hover,
.furniture-wrapper .standfirst a:hover,
.furniture-wrapper #standfirst li a:hover,
.furniture-wrapper #standfirst a:hover,
.furniture-wrapper [data-gu-name=standfirst] li a:hover,
.furniture-wrapper [data-gu-name=standfirst] a:hover {
text-decoration-color: var(–new-pillar-colour);
}
.furniture-wrapper .standfirst p:first-of-type,
.furniture-wrapper #standfirst p:first-of-type,
.furniture-wrapper [data-gu-name=standfirst] p:first-of-type {
border-top: 1px solid var(–headerBorder);
padding-bottom: 0;
}
}

@media (min-width: 980px) and (min-width: 1140px) {
.furniture-wrapper .standfirst p:first-of-type,
.furniture-wrapper #standfirst p:first-of-type,
.furniture-wrapper [data-gu-name=standfirst] p:first-of-type {
border-top: unset;
}
}

@media (min-width: 980px) {
.furniture-wrapper figure {
margin: 0 0 0 -10px;
}
.furniture-wrapper figure[data-spacefinder-role=inline].element {
max-width: 630px;
}
}

@media (min-width: 1140px) {
.furniture-wrapper {
grid-template-columns: [title-start headline-start meta-start] repeat(2, 1fr) [meta-end standfirst-start] repeat(5, 1fr) [title-end headline-end standfirst-end portrait-start] repeat(7, 1fr) [portrait-end];
grid-template-rows: [title-start portrait-start] 80px [title-end headline-start] auto [headline-end standfirst-start meta-start] auto [standfirst-end meta-end portrait-end];
}
.furniture-wrapper #meta:before,
.furniture-wrapper [data-gu-name=meta]:before {
content: “”;
width: 540px;
position: absolute;
top: 0;
background-color: var(–headerBorder);
height: 1px;
}
.furniture-wrapper .standfirst p,
.furniture-wrapper #standfirst p,
.furniture-wrapper [data-gu-name=standfirst] p {
border-top: unset;
}
.furniture-wrapper .standfirst:before,
.furniture-wrapper #standfirst:before,
.furniture-wrapper [data-gu-name=standfirst]:before {
content: “”;
width: 1px;
background-color: var(–headerBorder);
height: 100%;
position: absolute;
top: 0;
left: .5px;
}
}

@media (min-width: 1300px) {
.furniture-wrapper {
grid-template-columns: [title-start headline-start meta-start] repeat(3, 1fr) [meta-end standfirst-start] repeat(5, 1fr) [title-end headline-end standfirst-end portrait-start] repeat(8, 1fr) [portrait-end];
grid-template-rows: [title-start portrait-start] .25fr [title-end headline-start] 1fr [headline-end standfirst-start meta-start] .75fr [standfirst-end meta-end portrait-end];
}
}The provided text appears to be CSS code for styling a web page layout, including elements like headlines, meta information, captions, and media. It defines styles for different screen sizes and includes conditional rules for dark mode and mobile devices.For iOS and Android devices, the first letter of the first paragraph after the initial element or sign-in gate in feature, standard, and comment article containers is styled with a secondary pillar color.

The article header height is set to zero in these containers.

The furniture wrapper has top and side padding, with labels styled in bold, specific fonts, capitalized, and colored using a new pillar variable.

Headlines are set to 32px, bold, with bottom padding and a dark gray color.

Image figures within the furniture wrapper are also styled accordingly.For Android devices, the comment article container’s image figure has a relative position, a top margin of 14px, a left margin of -10px, and a width equal to the viewport width minus the scrollbar width. Its height adjusts automatically.

On iOS and Android, for feature, standard, and comment article containers, the inner elements, images, and links within the image figure have a transparent background, a width matching the viewport minus the scrollbar width, and an automatically adjusted height.

The standfirst section in these containers has top and bottom padding of 4px and 24px respectively, and a right margin of -10px.

Paragraphs inside the standfirst use the Guardian Headline, Guardian Egyptian Web, Guardian Headline Full, Georgia, or serif font families.

Links and list item links within the standfirst are styled with a specific color, no background image, underlined text with an offset of 6px, a defined underline color, and no bottom border.

On iOS, when hovering over links in the feature article container’s standfirst…For iOS and Android devices, when a user hovers over links within the standfirst section of feature, standard, or comment article containers, the text decoration color changes to match the new pillar color.

Additionally, the meta section in these containers has no margin, and elements such as the byline, author name, and related links are styled with the new pillar color. The meta misc section has no padding, and any SVG icons within it are also styled accordingly.For Android devices, the stroke color of SVG icons in the meta section of comment articles is set to the new pillar color.

On both iOS and Android, the caption button in showcase elements within feature, standard, and comment articles is styled as a flex container. It is centered, measures 28px by 28px, positioned 14px from the right, and has 5px padding.

The article body in feature, standard, and comment articles on both iOS and Android has 12px of horizontal padding.

Non-thumbnail, non-immersive image elements in the article body on both platforms span the full viewport width minus 24px and the scrollbar width, with auto height and no margin. Their captions have no padding.

Immersive image elements in the article body on both platforms span the full viewport width minus the scrollbar width.

Blockquotes with the “quoted” class in the article body prose on both platforms use the new pillar color for their decorative before element.

Links in the article body prose on both platforms…For links in article bodies on Android devices, the color is set to the primary pillar color. They have an underline with a 6px offset, and the underline color matches the header border color.

When these links are hovered over on iOS or Android, the underline color changes to the new pillar color.

In dark mode, the background of furniture wrappers becomes dark gray (#1a1a1a). Labels in these wrappers use the new pillar color for text. Headlines have no background and use the header border color for text. Standfirst paragraphs also use the header border color. Links in standfirsts and author bylines use the new pillar color. Icons in the meta section use the new pillar color as well.For iOS and Android devices, the following CSS rules apply:

– SVG icons in the meta section of article containers use the new pillar color for strokes.
– Captions in showcase image elements within article containers use the dateline color.
– Quoted blockquotes in article body prose use the new pillar color.
– Various body content containers (article, feature, comment, and interactive) have a dark background applied with high priority.
– The first letter of paragraphs following specific elements in article and feature bodies is styled, though the exact styling is not fully detailed here.This CSS code targets the first letter of paragraphs that follow specific elements, such as `.element-atom` or sign-in gates, within various article containers on iOS and Android devices.On Android devices, the first letter of paragraphs following specific elements in feature, standard, and comment articles is styled with a custom color variable, defaulting to white.

For comment articles on both iOS and Android, the standfirst element has top padding of 24px and no top margin.

Headings at the h2 level use a font size of 24px.

On iOS, the caption button in feature, standard, and comment articles is also styled.The CSS code defines styles for various elements, including padding adjustments for caption buttons on Android devices. It also includes dark mode color variables and specific rules for displaying branding elements. For larger screens, the layout uses a grid with defined rows. The article header has a fixed height and includes a decorative book image in the corner, with a horizontal line below on medium screens. The background color is set to a light pink shade (#fff4f2) for the page and related sections.This CSS code defines styles for a webpage layout, particularly for a “furniture-wrapper” class. It includes:

– Adjustments for headlines, such as margins, padding, and font properties (size, weight, line height), which change at different screen widths (e.g., font size increases on larger screens).
– Hover effects for headlines and links, adding underline styling.
– Positioning and padding rules for the “standfirst” (likely a subheading or summary section) and “main-media” areas, which adapt to different screen sizes.
– A rule to display a branding element within the meta section.

The code uses media queries to apply specific styles when the viewport reaches certain widths (e.g., 61.25em, 71.25em, 81.25em).The furniture wrapper styles the main media and figure elements to be full height with a left margin. Images and captions adjust in width based on the viewport, with padding and margins for spacing. A decorative frame is applied as a background image, positioned absolutely.

For larger screens, the layout changes: margins are removed or reduced, widths become fixed, and padding adjusts. The caption button position also shifts at different breakpoints.

If no media is present, a centered, flex container is used to display a message.This CSS code styles a webpage with specific formatting for text, layout, and colors. It includes rules for font sizes, weights, colors, and responsive adjustments for different screen sizes. The code also handles dark mode preferences and applies special styling for mobile devices like iOS and Android.This CSS code defines styles for a website’s opinion section, particularly for mobile devices (iOS and Android). It sets a dark background color for the weekend essay section and adjusts the layout and appearance of article containers, including grid structures, spacing, and typography. The code also specifies how labels and links should look, ensuring they use a specific color and font style. Additionally, it includes rules for positioning and styling GIF containers within article headers.For standard articles, the GIF container and its image are set to 70px by 70px on both iOS and Android. However, on Android, the comment article container also uses the same dimensions for its GIF container and image.

Elements with the class “book-gif-white” are hidden by default on both iOS and Android across feature, standard, and comment article containers.

In dark mode, elements with the class “book-gif” are hidden, while those with “book-gif-white” are displayed instead. This applies to both iOS and Android for feature, standard, and comment article containers.This CSS code defines styles for different article types and devices. It controls the display of images, grid layout, and decorative lines. For example, it shows a white book GIF on Android, adds a horizontal line below titles on iOS and Android, and adjusts the line’s width and color based on screen size and theme. It also sets grid areas for headlines and bylines on larger screens.For Android and iOS devices, the byline text in article containers (feature, standard, and comment) uses a 36px font, normal style, medium weight, and 115% line height. The text color is set to a variable called –new-pillar-colour, defaulting to #c70000. In dark mode, this color changes to #c74600 with higher priority. Additionally, avatars within the byline are styled for both operating systems.On iOS and Android devices, the following styling applies to article pages:

– The author’s avatar is hidden in comment articles.
– Headlines have no bottom margin or padding.
– The byline text is italic, but the author’s name within it remains normal.
– The main media container adjusts its height automatically with a 4:5 aspect ratio and a transparent background.
– Media figures take up the full height, are aligned to the left without margin, and their inner elements are positioned at the top left.
– The inner content of media elements has a transparent background, no padding, and allows overflow to be visible.
– Images within these elements are displayed without additional styling from their containers.For iOS and Android devices, images within article containers are styled to have a width of 100% of the viewport minus 40 pixels, with a left margin of 20 pixels and a top margin of 25 pixels. Captions are set to auto height, and their text is displayed as a block with a relative position and a default color of #999. On screens wider than 46.25em, additional styles may apply.For iOS and Android devices, the main media figure elements in feature, standard, and comment article containers have their maximum width set to unlimited.

On smaller screens, the pseudo-element before these figures spans almost the full viewport width, with a 10px margin on each side. The images inside these figures are sized to the viewport width minus 60px, with a left margin of 30px and a top margin of 40px.

On medium screens (61.25em and above), the pseudo-element width adjusts to half the viewport width minus 20px and any scrollbar width. The images are set to half the viewport width minus 40px and the scrollbar width, with a left margin of 18px and a top margin of 10px.

On larger screens (71.25em and above), the pseudo-element is positioned 4px higher.

On extra-large screens (81.25em and above), the same pseudo-element positioning applies to standard article containers as well.For iOS and Android devices, the following CSS rules apply to images within article containers:

On smaller screens, images are set to a width of 50% of the viewport minus 90px and the scrollbar width, with a left margin of 12px, negative top margin of 10px, and top padding of 21px. In dark mode, a white frame background image is applied.

For the first image in an article, the width expands to 100% of the viewport minus 20px and the scrollbar width, with no left margin and 10px padding all around.

On medium screens (min-width: 61.25em), the first image adjusts to 50% of the viewport minus 30px and the scrollbar width, with a 5px left margin and 21px top padding.

On larger screens (min-width: 81.25em), similar adjustments apply to the first image.For Android devices, the first image in feature, standard, and comment articles has a width of 50% of the viewport minus 70px and the scrollbar width, with a left margin of 5px, negative top margin of 10px, and top padding of 21px. The height adjusts automatically.

On screens wider than 61.25em, the figure containing the first image in these articles on iOS and Android takes full height, with a maximum width of 620px. A pseudo-element before the image spans 50% of the viewport minus 20px and the scrollbar width, aligned to the left and full height.

On screens wider than 81.25em, this pseudo-element shifts 20px to the left.

On screens wider than 46.25em, the caption button in these articles on iOS and Android is positioned 45px from the bottom.

On screens wider than 61.25em, the main media container in these articles on iOS and Android is placed in the grid’s portrait area, with a maximum width of 620px and automatic height.

For both iOS and Android, figures in these articles are positioned relatively with no top margin.For iOS and Android devices, the inner figure container in feature, standard, and comment articles is positioned absolutely, 15px from the top and 20px from the left. Its width is the full viewport width minus 40px, and its height adjusts automatically.

Images within this container are set to fill the entire width and height, using object-fit: cover to maintain aspect ratio.

The caption button is placed 24px from the right and 20px from the bottom.

On screens wider than 46.25em, the inner figure container changes to a fixed width of 680px, with 10px top and left spacing. The caption button moves to 25px from the bottom.

On screens wider than 61.25em, the figure element itself adjusts to half the viewport width minus 20px and the scrollbar width.

The standfirst element in these containers has no top margin, with 8px top padding and 10px right padding.For iOS and Android devices, the following CSS rules apply:

– Hide the `:before` pseudo-element of `.standfirst` in feature, standard, and comment article containers.
– Set the font size to 20px, normal style, medium weight, 115% line height, and no bottom padding for paragraphs, links, and list items inside `.standfirst__inner` in these containers.
– On screens wider than 61.25em, position `.standfirst` in the grid area named “standfirst”.
– Remove top padding from `.meta` elements in these containers.
– Position `.meta__published` relatively and add a gray horizontal line below it using an `:after` pseudo-element that spans the full viewport width.
– On wider screens, adjust the layout for `.meta` elements accordingly.The furniture-wrapper’s meta section is set to display as a block and is assigned to the grid area named “meta.”

For iOS and Android devices, the published date element in feature, standard, and comment articles has an after-element with a width of 50 viewport width units.

On screens wider than 81.25em, the miscellaneous meta information in these article types on iOS and Android has its left margin removed.

In dark mode, the after-element for the published date in these articles on iOS and Android changes its background color to #606060.

On iOS and Android, the before-elements for meta and keyline sections in feature, standard, and comment articles are hidden.

Rich link elements within the furniture-wrapper in these article types on iOS and Android are not displayed.

The cutout container in the comment header for feature, standard, and comment articles on iOS and Android is hidden with important priority.

The article and feature body sections on iOS and Android have a background color defined by the variable –weekend-essay-bg, defaulting to #fff4f2, and a top margin of 6px.

Horizontal rules in these sections are styled with a height of 1px, no border, a bottom margin of 3px, a background color of #dcdcdc, a width of 150px, no left margin, and a top margin of 48px.

For iOS, the first letter of the first paragraph without a span, or the paragraph following a horizontal rule, in the article or feature body is styled with drop cap formatting.This CSS code defines styles for a website, primarily targeting Android and iOS devices. It includes rules for drop caps, headings, horizontal rules, links, and other elements, with specific adjustments for dark mode and scripting states. The styles ensure consistent typography, spacing, and colors across different sections and device types.On Wednesday, Xi Jinping waved warmly to a crowd of 50,000 gathered in Beijing’s Tiananmen Square, projecting a confidence many Western leaders might envy. To his left stood North Korea’s Kim Jong-un, the head of an increasingly assertive isolated nation. To his right was Russian President Vladimir Putin, Xi’s “old friend” and China’s key partner in challenging the U.S.-led global order. It was the first time these three leaders had appeared together publicly since the Cold War.

“Humanity again faces a choice between peace and war, dialogue and confrontation,” the Chinese president told the audience. His pledge that China would “stay committed to peaceful development” was somewhat undercut by the country’s largest-ever military parade, which marched through the square beneath his podium on the Gate of Heavenly Peace—a historic entrance to the Forbidden City that has long symbolized Chinese authority.

Alongside Xi, Putin, and Kim, a group of autocratic leaders watched the display of Chinese military strength with solemn attention.

That same day, more than 5,000 miles away, Volodymyr Zelenskyy and his allies met in Paris for a summit on Ukraine’s future—a country devastated by war since Russia’s full-scale invasion in 2022. The “coalition of the willing,” led by the UK and France, did not include the U.S. The contrast was striking: on one side, an anti-Western bloc led by China; on the other, a Western alliance of democracies, now without its traditional leader in Washington.

China’s parade featured over 10,000 soldiers marching in sync, alongside nuclear-capable missiles and underwater drones. It was meant to mark 80 years since the end of World War II, with two goals: promoting the Communist Party’s narrative of its role in defeating Japan in 1945, and showcasing Beijing’s political and military power in 2025. Both aims reinforce the legitimacy and influence of Xi’s leadership at home and abroad.

Amid a struggling domestic economy and an ongoing trade war with the U.S., the parade also offered China’s 72-year-old leader an opportunity to stir nationalism and divert attention from the country’s internal challenges.

“This kind of event is never about building bridges,” said Yu Jie, a senior research fellow at Chatham House. “It’s more about creating political theater to tell your own version of the story.”

In Washington, there was growing unease as Xi hosted leaders from some of the world’s most isolated nations—Russia, Iran, and North Korea—countries that, along with China, have been called “the axis of upheaval.” This consolidation of alliances has been hastened by Donald Trump’s use of political and economic pressure against both allies and adversaries worldwide.

“It’s being perceived as an inflection point here in Washington, and I think in Europe too,” said Brian Hart, deputy director of the China Power Project at the Center for Strategic and International Studies in Washington. Western governments are “seeing that Xi Jinping is doubling down…”Despite global concerns, President Xi Jinping is strengthening ties with these nations. In response to the military parade in Beijing, former President Donald Trump posted on Truth Social: “May President Xi and the wonderful people of China have a great and lasting day of celebration. Please give my warmest regards to Vladimir Putin and Kim Jong-un as you conspire against the United States of America.”

A Kremlin aide, Yuri Ushakov, denied any conspiracy, stating, “No one has been plotting anything. None of these three leaders had such a thought.” Nevertheless, the display of unity among countries often critical of the U.S. was unmistakable.

While the parade and subsequent meetings yielded few concrete outcomes—and analysts believe any real agreements among U.S. rivals would remain hidden—foreign policymakers like EU foreign affairs chief Kaja Kallas warned that the gathering represented “an authoritarian alliance seeking a rapid process towards a new world order.”

Yu Jie, a senior research fellow at Chatham House, noted, “This kind of event is never about building bridges. It is more about building a political theatre to tell your own version of the story.”

Analysts pointed out that this “axis of upheaval” is marked by significant internal divisions, and its propaganda value may outweigh any real threat to the international rules-based order. Alexander Gabuev, director of the Carnegie Russia Eurasia Center, observed, “People in the west are freaking out, as if there is something that’s really big and meaningful and there is this alternative world order and everything. I think the major reason here is really the dysfunction brought into the western family by Donald Trump.”

A Chinese academic, who wished to remain anonymous, also highlighted cracks in the seemingly strong anti-western alliances, particularly between China and Russia. According to the academic, China is “pretending to have a strong relationship with Russia to push back against pressure from the U.S. and other western countries.” While China claims its ties with Russia have “no limits,” in practice, it hesitates, wary of pressure from the West, the EU, and NATO.

Although China has faced criticism for supporting Russia’s war in Ukraine, the academic noted that Moscow turned to Pyongyang, not Beijing, for additional troops. North Korea is believed to have supplied around 15,000 soldiers to the Russian armed forces, something Putin thanked Kim for during his visit to Beijing.

Xi Jinping, keen to assert his influence in the Russia-North Korea dynamic, also held talks with Kim this week. According to North Korean state media, Xi described China and North Korea as “good neighbours, good friends, and good comrades.”

The parade followed the annual Shanghai Cooperation Organisation summit in Tianjin, a diplomatic success for Beijing that drew dozens of leaders for discussions on economic and security issues. Indian Prime Minister Narendra Modi was among the notable attendees, despite frosty relations with China due to border disputes and trade tensions. Shortly after the U.S. imposed 50% tariffs on India for buying Russian oil, Modi tweeted in Russian about his “excellent” meeting with Putin in Tianjin.

Beyond diplomacy, the week also focused on military power. Wednesday’s parade was closely monitored by analysts for insights into the modernization of China’s People’s Liberation Army, reflecting the country’s ongoing military advancements.In recent years, China has strengthened its naval capabilities, positioning itself to potentially launch a full-scale invasion of Taiwan—an action that could trigger a conflict with the United States.

During a military parade, China unveiled several new weapons and aircraft, including hypersonic missiles for targeting ships at sea, underwater drones, and electronic warfare planes. These aircraft can accompany fighter jets to track moving targets and divert enemy fire. An unidentified aircraft, possibly a stealth drone fighter—real or a mock-up—also drew attention. Additionally, new submarine-launched and road-mobile intercontinental ballistic missiles were displayed, confirming China’s development of a reliable and versatile nuclear strike capability across land, air, and sea.

“We already knew China had a nuclear triad, but seeing it makes it more real,” said Jennifer Parker, an adjunct fellow in naval studies at the University of New South Wales, Canberra. “This capability places China alongside Russia and the U.S. among nuclear powers.”

However, analysts pointed out that none of these new weapons have been tested in combat. Diplomatically, China still faces challenges. Despite presenting itself as a stable alternative to the U.S., its economy is only 60% the size of America’s, and its stability partly depends on reaching a trade agreement with the Trump administration.

“China is not yet able or willing to replace the U.S. as a global provider of public goods,” said Alicja Bachulska, a policy fellow at the European Council on Foreign Relations. “Still, it aims to use the current situation to build an image as a responsible and reliable partner, in contrast to the U.S. under Donald Trump, and to benefit from that perception.”

Additional research by Lillian Yang.

Dressing for the Occasion

In a meticulously choreographed event like China’s largest military parade, Xi Jinping’s choice of attire was as deliberate as the immaculate uniforms of the synchronized troops. Xi wore a “Mao suit” while addressing the 50,000 spectators in Tiananmen Square—a style chosen to convey frugality and revolutionary spirit.

The tunic-style jacket, with its four pockets symbolizing propriety, justice, honesty, and humility, was originally adopted by Sun Yat-sen, the nationalist revolutionary who helped overthrow the Qing dynasty in 1911. Combining Chinese and Western elements, the practical design represented a break from imperial extravagance. In China, it is still referred to as the “Zhongshan suit,” after Sun Yat-sen’s Chinese name.

Internationally, however, it is better known as the Mao suit, since Chairman Mao Zedong wore one when he proclaimed the founding of the People’s Republic of China in 1949. Although the suit has fallen out of everyday fashion, Xi uses it to project authority and align himself with the Communist revolution.

The suit is “saturated with political meaning,” said Sari Arho Havrén, an associate fellow at the Royal United Services Institute. “It commemorates the revolutionary past of the Communist party and emphasizes a separation from the West.”

For routine diplomacy, Xi typically opts for Western-style suits and ties, but for major events, he chooses the Mao suit to make a symbolic statement.For example, when he attended a state banquet at Buckingham Palace in 2015, he wore a Mao suit.

Frequently Asked Questions
Of course Here is a list of FAQs about these leaders and the shifting global landscape presented in a clear and natural tone

General Beginner Questions

Q Who are Xi Jinping Vladimir Putin and Kim Jongun
A They are the current leaders of three major powers Xi Jinping is the President of China Vladimir Putin is the President of Russia and Kim Jongun is the Supreme Leader of North Korea

Q What does a shifting global landscape mean
A It refers to the major changes happening in world politics and economics Power is moving from a single dominant country to a more complex system with multiple powerful nations and alliances competing for influence

Q Why are these three leaders often discussed together
A Their countries have grown closer forming strategic partnerships that challenge the existing Westernled international order Their cooperation is a key driver of the current global shift

Q What is an example of this shift in action
A A clear example is the RussiaUkraine war Russias actions and Chinas diplomatic and economic support for Russia demonstrate a direct challenge to Western security and economic structures like NATO and the G7

Intermediate Advanced Questions

Q What are the main goals driving the cooperation between Xi Putin and Kim
A While each has their own national interests their cooperation is largely built on a shared goal to reduce American dominance and create a multipolar world where their own influence and authoritarian models of governance are more accepted and powerful

Q How is this shift affecting everyday people around the world
A It can lead to higher energy and food prices due to sanctions and conflicts increased geopolitical uncertainty affecting markets and a more fragmented internet and global supply chains as countries choose sides

Q What is the Global South and how does it fit into this narrative
A The Global South is a term for countries in Africa Latin America and much of Asia Many are not automatically siding with the US or Europe instead choosing neutrality or partnering with China and Russia for economic benefits which further weakens a unified global response

Q What are the biggest risks associated with this new era of great power competition

Related Posts