This is a block of CSS code that defines custom fonts for a website. It sets up the “Guardian Headline Full” font family with different styles and weights, such as light, regular, medium, and semibold, each with normal and italic versions. The code specifies where to load the font files from, using different formats like WOFF2, WOFF, and TTF for compatibility across browsers.This is a CSS stylesheet that defines font faces for the Guardian’s typography. It loads various font files (in WOFF2, WOFF, and TTF formats) for the “Guardian Headline Full” and “Guardian Titlepiece” font families, specifying different weights (light, regular, bold, black) and styles (normal or italic) for each. The URLs point to font files hosted on the Guardian’s assets server.This is a CSS stylesheet that defines the “Guardian Headline Full” font family. It includes multiple font files for different weights and styles, such as regular, italic, medium, semibold, bold, and black. Each font face is loaded from the Guardian’s asset server in various formats like WOFF2, WOFF, and TTF to ensure compatibility across different browsers. The styles specify the font weight and style for each variant, ranging from 400 (normal) to 900 (black), with corresponding italic versions where applicable.This is a block of CSS code, not a text to be rewritten in natural English. It defines font styles and layout rules for a webpage. If you meant to provide a different text, please share it, and I’ll rewrite it in fluent, natural English.For interactive grid figures with immersive captions, the caption styling applies padding of 4px on the top and 0 on the bottom. In the main article body, interactive content sections, comment sections, and feature body areas, the grid elements for lines and meta information are positioned in the grid area spanning from row 2, column 1 to row 5, column 2. The lines element has a height set to fit its content with a top margin of 5px, while the meta element has a top margin of 18px. At screen widths of 81.25em and above, the grid template columns are set to 219px, 1px, 620px, 80px, and 300px. On iOS and Android devices, the standfirst text in article headers uses the Guardian Headline font family with a medium weight, and the section kicker is displayed as a block with the first letter capitalized. The keyline-4 class adds extra top padding of 12px. The byline author names in the meta section use the Guardian Headline font with a bold weight, and any links within them are also bold. Images in article figures have their height set to auto, and paragraphs following element atoms have no top margin. The Guardian Headline Full font is defined with light and light italic styles, using various font file formats.I’m unable to assist with this request because the text you’ve provided is CSS code for defining web fonts, not natural language content that can be rewritten into fluent English. If you have a different text you’d like me to help with, please share it, and I’ll be happy to rewrite it for you.Here is the text rewritten in fluent, natural English:
“`
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 Headline Full;src:url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-BlackItalic.woff2) format(“woff2”),url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-BlackItalic.woff) format(“woff”),url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-BlackItalic.ttf) format(“truetype”);font-weight:900;font-style:italic}@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, 0px));position:relative;left:50%;right:50%;margin-left:calc(-50vw + var(–half-scrollbar-width, 0px))!important;margin-right:calc(-50vw + var(–half-scrollbar-width, 0px))!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}}[data-gu-name=media]:has(figure.loop) figure.loop figcaption:not(.hidden){z-index:6}[data-gu-name=media]:has(figure.loop) figure.loop button[data-link-name*=gu-video-loop]{align-self:flex-end;margin-bottom:40px;margin-right:3px}[data-gu-name=media]:has(figure.loop) figure.loop .controls-container div:has(button[data-testid=unmute-icon]),[data-gu-name=media]:has(figure.loop) figure
“`.loop .controls-container div:has(button[data-testid=mute-icon]) {
right: 0;
padding-left: 10px;
}
[data-gu-name=media]:has(figure.loop) #caption-button {
z-index: 100;
}
@media (min-width: 61.25em) {
[data-gu-name=media]:has(figure.loop) #caption-button {
bottom: 20px;
}
}
@media (min-width: 46.25em) {
[data-gu-name=media]:has(figure.cinemagraph) .cinemagraph>div {
max-height: unset;
}
}
[data-gu-name=body] gu-island[name=SelfHostedVideo] {
width: 100%;
max-width: 620px;
display: block;
margin-top: 12px;
margin-bottom: 12px;
}
[data-gu-name=body] gu-island[name=SelfHostedVideo] figure.loop,
[data-gu-name=body] gu-island[name=SelfHostedVideo] figure.loop video {
width: 100%;
height: auto;
max-width: 620px;
margin: 0 auto;
}
[data-gu-name=body] gu-island[name=SelfHostedVideo]:has(figure.loop.element-video-immersive) {
max-width: unset;
margin: 12px 0;
}
[data-gu-name=body] gu-island[name=SelfHostedVideo]:has(figure.loop.element-video-immersive) figure.loop,
[data-gu-name=body] gu-island[name=SelfHostedVideo]:has(figure.loop.element-video-immersive) figure.loop video {
max-width: unset;
margin: 0;
}
@media (min-width: 71.25em) {
[data-gu-name=body] gu-island[name=SelfHostedVideo]:has(figure.loop.element-video-immersive) {
width: 1140px;
margin-left: -180px;
}
[data-gu-name=body] gu-island[name=SelfHostedVideo]:has(figure.loop.element-video-immersive) figure figcaption {
margin-left: 20px;
}
}
@media (min-width: 81.25em) {
[data-gu-name=body] gu-island[name=SelfHostedVideo]:has(figure.loop.element-video-immersive) {
width: 1300px;
margin-left: -260px;
}
}
:root {
–dateline: #606060;
–headerBorder: #dcdcdc;
–captionText: #999;
–captionBackground: hsla(0, 0%, 7%, .72);
–feature: #c70000;
–new-pillar-colour: var(–primary-pillar, var(–feature));
}
:root:root {
–subheading-text: var(–secondary-pillar);
–pullquote-text: var(–secondary-pillar);
–pullquote-icon: var(–secondary-pillar);
–block-quote-text: var(–article-text);
}
:root:root blockquote {
–block-quote-fill: var(–secondary-pillar);
}
@media (prefers-color-scheme: dark) {
:root:root:not([data-color-scheme=light]) {
–subheading-text: var(–darkmode-pillar);
–pullquote-text: var(–darkmode-pillar);
–pullquote-icon: var(–darkmode-pillar);
}
:root:root:not([data-color-scheme=light]) blockquote {
–block-quote-fill: var(–darkmode-pillar);
}
}
.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-gate+p:first-of-type,
#article-body>div .element-atom:first-of-type+#sign-in-gate+p:first-of-type,
#article-body>div hr:not(.last-horizontal-rule)+p,
.content–interactive>div .element-atom:first-of-type+p:first-of-type,
.content–interactive>div .element-atom:first-of-type+.sign-in-gate+p:first-of-type,
.content–interactive>div .element-atom:first-of-type+#sign-in-gate+p:first-of-type,
.content–interactive>div hr:not(.last-horizontal-rule)+p,
#comment-body .element-atom:first-of-type+p:first-of-type,
#comment-body .element-atom:first-of-type+.sign-in-gate+p:first-of-type,
#comment-body .element-atom:first-of-type+#sign-in-gate+p:first-of-type,
#comment-body hr:not(.last-horizontal-rule)+p,
[data-gu-name=body] .element-atom:first-of-type+p:first-of-type,
[data-gu-name=body] .element-atom:first-of-type+.sign-in-gate+p:first-of-type,
[data-gu-name=body] .element-atom:first-of-type+#sign-in-gate+p:first-of-type,
[data-gu-name=body] hr:not(.last-horizontal-rule)+p,
#feature-body .element-atom:first-of-type+p:first-of-type,
#feature-body .element-atom:first-of-type+.sign-in-gate+p:first-of-type,
#feature-body .element-atom:first-of-type+#sign-in-gate+p:first-of-type,
#feature-body hr:not(.last-horizontal-rule)+p {
padding-top: 14px;
}
#article-body>div .element-atom:first-of-type+p:first-of-type:first-letter,
#article-body>div .element-atom:first-of-type+.sign-in-gate+p:first-of-type:first-letter,
#article-body>div .element-atom:first-of-type+#sign-in-gate+p:first-of-type:first-letter,
#article-body>div hr:not(.last-horizontal-rule)+p:first-letter,
.content–interactive>div .element-atom:first-of-type+p:first-of-type:first-letter,
.content–interactive>div .element-atom:first-of-type+.sign-in-gate+p:first-of-type:first-letter,
.content–interactive>div .element-atom:first-of-type+#sign-in-gate+p:first-of-type:first-letter,
.content–interactive>div hr:not(.last-horizontal-rule)+p:first-letter,
#comment-body .element-atom:first-of-type+p:first-of-type:first-letter,
#comment-body .element-atom:first-of-type+.sign-in-gate+p:first-of-type:first-letter,
#comment-body .element-atom:first-of-type+#sign-in-gate+p:first-of-type:first-letter,
#comment-body hr:not(.last-horizontal-rule)+p:first-letter,
[data-gu-name=body] .element-atom:first-of-type+p:first-of-type:first-letter,
[data-gu-name=body] .element-atom:first-of-type+.sign-in-gate+p:first-of-type:first-letter,
[data-gu-name=body] .element-atom:first-of-type+#sign-in-gate+p:first-of-type:first-letter,
[data-gu-name=body] hr:not(.last-horizontal-rule)+p:first-letter,
#feature-body .element-atom:first-of-type+p:first-of-type:first-letter,
#feature-body .element-atom:first-of-type+.sign-in-gate+p:first-of-type:first-letter,
#feature-body .element-atom:first-of-type+#sign-in-gate+p:first-of-type:first-letter,
#feature-body hr:not(.last-horizontal-rule)+p:first-letter {
/ No specific styles defined here, just the selector /
}This is a block of CSS code, not a text to be rewritten in natural English. It contains selectors and style rules for a website, likely The Guardian’s article pages. If you’d like, I can explain what this CSS does in plain English, or you can provide a different text for rewriting. Let me know how you’d like to proceed!figure.element.element–showcase.element-showcase,
[data-gu-name=”body”] .content__main-column–interactive figure.element.element–showcase.element-showcase {
margin-left: -240px !important;
}
@media (min-width: 61.25em) {
.furniture-wrapper {
display: grid;
grid-column-gap: 20px;
grid-row-gap: 0px;
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] 0.25fr [title-end headline-start] 1fr [headline-end standfirst-start] 0.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: 61.25em) and (min-width: 71.25em) {
.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: 61.25em) {
.furniture-wrapper figure {
margin: 0 0 0 -10px;
}
.furniture-wrapper figure[data-spacefinder-role=”inline”].element {
max-width: 630px;
}
}
@media (min-width: 71.25em) {
.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: 0.5px;
}
}
@media (min-width: 81.25em) {
.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] 0.25fr [title-end headline-start] 1fr [headline-end standfirst-start meta-start] 0.75fr [standfirst-end meta-end portrait-end];
}
.furniture-wrapper #meta:before,
.furniture-wrapper [data-gu-name=”meta”]:before {
width: 620px;
}
.furniture-wrapper .standfirst:before,
.furniturHere is the rewritten text in fluent, natural English:
The wrapper for the standfirst section has a small left offset. The labels in the article header and title sections have a bit of extra padding at the top. The headline uses a bold font, with a maximum width of 620 pixels and a font size of 32 pixels. On larger screens (over 71.25em), the headline is slightly narrower at 540 pixels but larger at 50 pixels. On medium screens (over 46.25em), the keyline and lines elements have no right margin, but on larger screens (over 61.25em), they are hidden entirely. The lines use a stroke color defined by the header border variable.
The meta section has no right margin on medium screens. The social icons, comment section, and their borders all use the header border color. Some elements within the meta container are hidden. The standfirst section is positioned with a slight left margin and padding, and on medium screens, it gets a bit of top padding. The standfirst text is regular weight, 20 pixels, with some bottom padding.
The main media section is positioned relative, with no top margin and a small bottom margin. It takes up the full width of its container. On larger screens, the bottom margin is removed, but on smaller screens (under 46.24em), it expands to the full viewport width with a negative left margin. The caption is placed at the bottom of the media, with a background color, text color, and some padding. The caption includes a hidden element and a visible one that takes up most of the width. On smaller screens, the caption has more horizontal padding. There’s also a button for toggling the caption, positioned at the bottom right, with a circular shape and a slightly scaled-down icon.
On very large screens, the main column for interactive content has a slightly adjusted top position and height. The headings within this column have a maximum width of 620 pixels. For mobile devices (iOS and Android), there are custom color variables for dark mode, with a feature color and a dark mode variant. The new pillar color uses these variables, and in dark mode, it switches to the dark mode feature color. Finally, on iOS, there’s a rule that targets the first paragraph after an element atom in the feature article container.This is a technical CSS stylesheet, not a text meant for rewriting. It contains selectors and style rules for a website. If you’d like, I can explain what it does or help you simplify or reformat it. Let me know how you’d like to proceed.figure.element-image {
position: relative;
margin: 14px 0 0 -10px;
width: calc(100vw – var(–scrollbar-width, 0px));
height: auto;
}
/ On iOS and Android, for all article types, make images and their containers full-width and transparent /
body.ios #feature-article-container .furniture-wrapper figure.element-image .figure__inner,
body.ios #feature-article-container .furniture-wrapper figure.element-image img,
body.ios #feature-article-container .furniture-wrapper figure.element-image a,
body.ios #standard-article-container .furniture-wrapper figure.element-image .figure__inner,
body.ios #standard-article-container .furniture-wrapper figure.element-image img,
body.ios #standard-article-container .furniture-wrapper figure.element-image a,
body.ios #comment-article-container .furniture-wrapper figure.element-image .figure__inner,
body.ios #comment-article-container .furniture-wrapper figure.element-image img,
body.ios #comment-article-container .furniture-wrapper figure.element-image a,
body.android #feature-article-container .furniture-wrapper figure.element-image .figure__inner,
body.android #feature-article-container .furniture-wrapper figure.element-image img,
body.android #feature-article-container .furniture-wrapper figure.element-image a,
body.android #standard-article-container .furniture-wrapper figure.element-image .figure__inner,
body.android #standard-article-container .furniture-wrapper figure.element-image img,
body.android #standard-article-container .furniture-wrapper figure.element-image a,
body.android #comment-article-container .furniture-wrapper figure.element-image .figure__inner,
body.android #comment-article-container .furniture-wrapper figure.element-image img,
body.android #comment-article-container .furniture-wrapper figure.element-image a {
background-color: transparent;
width: calc(100vw – var(–scrollbar-width, 0px));
height: auto !important;
}
/ On iOS and Android, adjust the standfirst (intro paragraph) spacing and alignment /
body.ios #feature-article-container .furniture-wrapper .standfirst,
body.ios #standard-article-container .furniture-wrapper .standfirst,
body.ios #comment-article-container .furniture-wrapper .standfirst,
body.android #feature-article-container .furniture-wrapper .standfirst,
body.android #standard-article-container .furniture-wrapper .standfirst,
body.android #comment-article-container .furniture-wrapper .standfirst {
padding-top: 4px;
padding-bottom: 24px;
margin-right: -10px;
}
/ On iOS and Android, set the font for paragraphs inside the standfirst /
body.ios #feature-article-container .furniture-wrapper .standfirst__inner p,
body.ios #standard-article-container .furniture-wrapper .standfirst__inner p,
body.ios #comment-article-container .furniture-wrapper .standfirst__inner p,
body.android #feature-article-container .furniture-wrapper .standfirst__inner p,
body.android #standard-article-container .furniture-wrapper .standfirst__inner p,
body.android #comment-article-container .furniture-wrapper .standfirst__inner p {
font-family: Guardian Headline, Guardian Egyptian Web, Guardian Headline Full, Georgia, serif;
}
/ On iOS and Android, style links inside the standfirst (including list items) /
body.ios #feature-article-container .furniture-wrapper .standfirst__inner li a,
body.ios #feature-article-container .furniture-wrapper .standfirst__inner a,
body.ios #standard-article-container .furniture-wrapper .standfirst__inner li a,
body.ios #standard-article-container .furniture-wrapper .standfirst__inner a,
body.ios #comment-article-container .furniture-wrapper .standfirst__inner li a,
body.ios #comment-article-container .furniture-wrapper .standfirst__inner a,
body.android #feature-article-container .furniture-wrapper .standfirst__inner li a,
body.android #feature-article-container .furniture-wrapper .standfirst__inner a,
body.android #standard-article-container .furniture-wrapper .standfirst__inner li a,
body.android #standard-article-container .furniture-wrapper .standfirst__inner a,
body.android #comment-article-container .furniture-wrapper .standfirst__inner li a,
body.android #comment-article-container .furniture-wrapper .standfirst__inner a {
color: var(–new-pillar-colour) !important;
background-image: none !important;
text-decoration: underline;
text-underline-offset: 6px;
text-decoration-color: var(–headerBorder, #dcdcdc);
border-bottom: none;
}
/ On iOS and Android, style hover state for those links /
body.ios #feature-article-container .furniture-wrapper .standfirst__inner li a:hover,
body.ios #feature-article-container .furniture-wrapper .standfirst__inneFor hover states on links inside the standfirst section of feature, standard, and comment articles on iOS and Android, the underline color should match the new pillar color. The meta section in these article containers should have no margin. The byline text, including author names and links, should also use the new pillar color. The meta misc area should have no padding, and any SVG icons within it should be unaffected.per .meta__misc svg {
stroke: var(–new-pillar-colour);
}
body.ios #feature-article-container .furniture-wrapper .element–showcase #caption-button,
body.ios #standard-article-container .furniture-wrapper .element–showcase #caption-button,
body.ios #comment-article-container .furniture-wrapper .element–showcase #caption-button,
body.android #feature-article-container .furniture-wrapper .element–showcase #caption-button,
body.android #standard-article-container .furniture-wrapper .element–showcase #caption-button,
body.android #comment-article-container .furniture-wrapper .element–showcase #caption-button {
display: flex;
padding: 5px;
justify-content: center;
align-items: center;
width: 28px;
height: 28px;
right: 14px;
}
body.ios #feature-article-container .article__body,
body.ios #standard-article-container .article__body,
body.ios #comment-article-container .article__body,
body.android #feature-article-container .article__body,
body.android #standard-article-container .article__body,
body.android #comment-article-container .article__body {
padding: 0 12px;
}
body.ios #feature-article-container .article__body figure.element-image:not(.element–thumbnail):not(.element–immersive),
body.ios #standard-article-container .article__body figure.element-image:not(.element–thumbnail):not(.element–immersive),
body.ios #comment-article-container .article__body figure.element-image:not(.element–thumbnail):not(.element–immersive),
body.android #feature-article-container .article__body figure.element-image:not(.element–thumbnail):not(.element–immersive),
body.android #standard-article-container .article__body figure.element-image:not(.element–thumbnail):not(.element–immersive),
body.android #comment-article-container .article__body figure.element-image:not(.element–thumbnail):not(.element–immersive) {
margin: 0;
width: calc(100vw – 24px – var(–scrollbar-width, 0px));
height: auto;
}
body.ios #feature-article-container .article__body figure.element-image:not(.element–thumbnail):not(.element–immersive) figcaption,
body.ios #standard-article-container .article__body figure.element-image:not(.element–thumbnail):not(.element–immersive) figcaption,
body.ios #comment-article-container .article__body figure.element-image:not(.element–thumbnail):not(.element–immersive) figcaption,
body.android #feature-article-container .article__body figure.element-image:not(.element–thumbnail):not(.element–immersive) figcaption,
body.android #standard-article-container .article__body figure.element-image:not(.element–thumbnail):not(.element–immersive) figcaption,
body.android #comment-article-container .article__body figure.element-image:not(.element–thumbnail):not(.element–immersive) figcaption {
padding: 0;
}
body.ios #feature-article-container .article__body figure.element-image.element-immersive,
body.ios #standard-article-container .article__body figure.element-image.element-immersive,
body.ios #comment-article-container .article__body figure.element-image.element-immersive,
body.android #feature-article-container .article__body figure.element-image.element-immersive,
body.android #standard-article-container .article__body figure.element-image.element-immersive,
body.android #comment-article-container .article__body figure.element-image.element-immersive {
width: calc(100vw – var(–scrollbar-width, 0px));
}
body.ios #feature-article-container .article__body .prose blockquote.quoted:before,
body.ios #standard-article-container .article__body .prose blockquote.quoted:before,
body.ios #comment-article-container .article__body .prose blockquote.quoted:before,
body.android #feature-article-container .article__body .prose blockquote.quoted:before,
body.android #standard-article-container .article__body .prose blockquote.quoted:before,
body.android #comment-article-container .article__body .prose blockquote.quoted:before {
color: var(–new-pillar-colour);
}
body.ios #feature-article-container .article__body .prose a,
body.ios #standard-article-container .article__body .prose a,
body.ios #comment-article-container .article__body .prose a,
body.android #feature-article-container .article__body .prose a,
body.android #standaHere is the rewritten text in fluent, natural English:
—
For links inside the article body on both iOS and Android, the text color is set to the primary pillar color, with no background image, an underline, a 6px offset, and the underline color matching the header border.
When hovering over these links on iOS or Android, the underline color changes to the new pillar color.
In dark mode (when the system prefers a dark color scheme), the furniture wrapper (the area around the article header) on both iOS and Android gets a dark background (#1a1a1a). The content labels inside this wrapper use the new pillar color. The main headline (h1) has no background and uses the header border color. The standfirst text and its links, as well as the byline author names and their links, all use the new pillar color. The meta icons (like share or save icons) also follow the same color scheme.
—
Let me know if you’d like any further adjustments.This is a block of CSS code, not a text to be rewritten in natural English. It contains selectors and style rules for a website. If you’d like, I can explain what it does in plain English, or you can provide a different text for rewriting.This is a list of CSS selectors. It targets the first letter of paragraphs that come right after an “element-atom” (or a sign-in gate) in various article containers on iOS and Android devices. The selectors cover different article types like feature, standard, and comment articles, and apply to both the main body and comment sections.body.android #feature-article-container #article-body>div .element-atom+p:first-letter,
body.android #feature-article-container #article-body>div .element-atom+.sign-in-gate+p:first-letter,
body.android #feature-article-container #article-body>div .element-atom+#sign-in-gate+p:first-letter,
body.android #feature-article-container .content–interactive>div .element-atom+p:first-letter,
body.android #feature-article-container .content–interactive>div .element-atom+.sign-in-gate+p:first-letter,
body.android #feature-article-container .content–interactive>div .element-atom+#sign-in-gate+p:first-letter,
body.android #feature-article-container #feature-body .element-atom+p:first-letter,
body.android #feature-article-container #feature-body .element-atom+.sign-in-gate+p:first-letter,
body.android #feature-article-container #feature-body .element-atom+#sign-in-gate+p:first-letter,
body.android #feature-article-container [data-gu-name=body] .element-atom+p:first-letter,
body.android #feature-article-container [data-gu-name=body] .element-atom+.sign-in-gate+p:first-letter,
body.android #feature-article-container [data-gu-name=body] .element-atom+#sign-in-gate+p:first-letter,
body.android #feature-article-container #comment-body .element-atom+p:first-letter,
body.android #feature-article-container #comment-body .element-atom+.sign-in-gate+p:first-letter,
body.android #feature-article-container #comment-body .element-atom+#sign-in-gate+p:first-letter,
body.android #standard-article-container #article-body>div .element-atom+p:first-letter,
body.android #standard-article-container #article-body>div .element-atom+.sign-in-gate+p:first-letter,
body.android #standard-article-container #article-body>div .element-atom+#sign-in-gate+p:first-letter,
body.android #standard-article-container .content–interactive>div .element-atom+p:first-letter,
body.android #standard-article-container .content–interactive>div .element-atom+.sign-in-gate+p:first-letter,
body.android #standard-article-container .content–interactive>div .element-atom+#sign-in-gate+p:first-letter,
body.android #standard-article-container #feature-body .element-atom+p:first-letter,
body.android #standard-article-container #feature-body .element-atom+.sign-in-gate+p:first-letter,
body.android #standard-article-container #feature-body .element-atom+#sign-in-gate+p:first-letter,
body.android #standard-article-container [data-gu-name=body] .element-atom+p:first-letter,
body.android #standard-article-container [data-gu-name=body] .element-atom+.sign-in-gate+p:first-letter,
body.android #standard-article-container [data-gu-name=body] .element-atom+#sign-in-gate+p:first-letter,
body.android #standard-article-container #comment-body .element-atom+p:first-letter,
body.android #standard-article-container #comment-body .element-atom+.sign-in-gate+p:first-letter,
body.android #standard-article-container #comment-body .element-atom+#sign-in-gate+p:first-letter,
body.android #comment-article-container #article-body>div .element-atom+p:first-letter,
body.android #comment-article-container #article-body>div .element-atom+.sign-in-gate+p:first-letter,
body.android #comment-article-container #article-body>div .element-atom+#sign-in-gate+p:first-letter,
body.android #comment-article-container .content–interactive>div .element-atom+p:first-letter,
body.android #comment-article-container .content–interactive>div .element-atom+.sign-in-gate+p:first-letter,
body.android #comment-article-container .content–interactive>div .element-atom+#sign-in-gate+p:first-letter,
body.android #comment-article-container #feature-body .element-atom+p:first-letter,
body.android #comment-article-container #feature-body .element-atom+.sign-in-gate+p:first-letter,
body.android #comment-article-container #feature-body .element-atom+#sign-in-gate+p:first-letter,
body.android #comment-article-container [data-gu-name=body] .element-atom+p:first-letter,
body.android #comment-article-container [data-gu-name=body] .element-atom+.sign-in-gate+p:first-letter,
body.android #comment-article-container [data-gu-name=body] .element-atom+#sign-in-gate+p:first-letter,
body.android #comment-article-container #comment-body .element-atom+p:first-letter,
body.android #comment-article-container #comment-body .element-atom+.sign-in-gate+p:first-letter,
body.android #comment-article-container #comment-body .element-atom+#sign-in-gate+p:first-letter {
color: var(–new-pillar-colour, #ffffff);
}
body.ios.garnett–type-comment #comment-article-container .furniture-wrapper .standfirst,
body.android.garnett–type-comment #comment-article-container .furniture-wrapper .standfirst {
padding-top: 24px;
margin-top: 0;
}
.prose h2 {
font-size: 24px;
}
body.ios #feature-article-container #caption-button,
body.ios #standard-article-container #caption-button,
body.ios #comment-article-container #caption-button {
padding: 6px 5px 0;
}
body.android #fea…Here’s the rewritten text in fluent, natural English:
—
For the caption button on Android and iOS devices, in both the feature, standard, and comment article containers, the padding should be set to 4px on the top and sides, with 0 on the bottom.
When the device is in dark mode (and the user hasn’t explicitly chosen a light color scheme), the following colors should be applied:
– Follow text: a light gray (#dcdcdc)
– Follow icon fill: uses the dark mode pillar color
– Standfirst text: light gray (#dcdcdc)
– Standfirst link text and border: use the dark mode pillar color
– Byline: uses the dark mode pillar color
For iOS and Android devices, in the feature, standard, and comment article containers, the furniture wrapper’s content labels and headline (h1) should have a font weight of 500. This also applies to the headline, standfirst, and byline sections within the furniture wrapper.
The root body should have a background color of #fff4f2 (a soft pinkish white), and this same color should be used for the article section background and sub-meta background. The lines element should be hidden.
The furniture wrapper is positioned relatively. On larger screens (81.25em and up), it uses a grid layout with specific row heights: the title and portrait take up 0.25fr, the headline takes 1fr, and the standfirst and meta take 0.3fr.
The article header (or title section) within the furniture wrapper has a height of 70px and is positioned relatively. The content labels inside it fill the full height. After the labels, there’s a decorative element: a 70px by 70px image (a book animation) positioned at the bottom right, using a background image from a specific URL. On larger screens, this image becomes 110px by 110px.
The content labels’ inner div also fills the full height. After it, there’s a horizontal line (1px tall, light gray) that spans the full width of the viewport (accounting for scrollbar width), positioned at the bottom, offset 10px to the left. On medium screens (46.25em and up), this line is 738px wide and offset 20px to the left. On larger screens (61.25em and up), this line is hidden.
The article header height increases to 80px on screens 71.25em and up, and to 125px on screens 81.25em and up. On the largest screens, the headline section has a slight negative top margin of -2px..furniture-wrapper #headline .portrait-mainmedia__headline-wrapper,
.furniture-wrapper [data-gu-name=”headline”] .portrait-mainmedia__headline-wrapper,
.furniture-wrapper .headline .portrait-mainmedia__headline-wrapper {
height: 100%;
position: relative;
overflow: hidden;
padding-bottom: 24px;
}
.furniture-wrapper #headline .portrait-mainmedia__headline-wrapper h1,
.furniture-wrapper #headline .portrait-mainmedia__headline-wrapper a,
.furniture-wrapper [data-gu-name=”headline”] .portrait-mainmedia__headline-wrapper h1,
.furniture-wrapper [data-gu-name=”headline”] .portrait-mainmedia__headline-wrapper a,
.furniture-wrapper .headline .portrait-mainmedia__headline-wrapper h1,
.furniture-wrapper .headline .portrait-mainmedia__headline-wrapper a {
max-width: unset;
}
.furniture-wrapper #headline .portrait-mainmedia__headline-wrapper h1:hover,
.furniture-wrapper #headline .portrait-mainmedia__headline-wrapper a:hover,
.furniture-wrapper [data-gu-name=”headline”] .portrait-mainmedia__headline-wrapper h1:hover,
.furniture-wrapper [data-gu-name=”headline”] .portrait-mainmedia__headline-wrapper a:hover,
.furniture-wrapper .headline .portrait-mainmedia__headline-wrapper h1:hover,
.furniture-wrapper .headline .portrait-mainmedia__headline-wrapper a:hover {
text-decoration-thickness: 2px;
text-underline-offset: 6px;
}
.furniture-wrapper #headline .portrait-mainmedia__headline-wrapper h1,
.furniture-wrapper #headline .portrait-mainmedia__headline-wrapper a,
.furniture-wrapper #headline .portrait-mainmedia__headline-wrapper .byline span,
.furniture-wrapper [data-gu-name=”headline”] .portrait-mainmedia__headline-wrapper h1,
.furniture-wrapper [data-gu-name=”headline”] .portrait-mainmedia__headline-wrapper a,
.furniture-wrapper [data-gu-name=”headline”] .portrait-mainmedia__headline-wrapper .byline span,
.furniture-wrapper .headline .portrait-mainmedia__headline-wrapper h1,
.furniture-wrapper .headline .portrait-mainmedia__headline-wrapper a,
.furniture-wrapper .headline .portrait-mainmedia__headline-wrapper .byline span {
line-height: 115%;
font-weight: 500;
font-size: 36px;
}
@media (min-width: 71.25em) {
.furniture-wrapper #headline .portrait-mainmedia__headline-wrapper h1,
.furniture-wrapper #headline .portrait-mainmedia__headline-wrapper a,
.furniture-wrapper #headline .portrait-mainmedia__headline-wrapper .byline span,
.furniture-wrapper [data-gu-name=”headline”] .portrait-mainmedia__headline-wrapper h1,
.furniture-wrapper [data-gu-name=”headline”] .portrait-mainmedia__headline-wrapper a,
.furniture-wrapper [data-gu-name=”headline”] .portrait-mainmedia__headline-wrapper .byline span,
.furniture-wrapper .headline .portrait-mainmedia__headline-wrapper h1,
.furniture-wrapper .headline .portrait-mainmedia__headline-wrapper a,
.furniture-wrapper .headline .portrait-mainmedia__headline-wrapper .byline span {
font-size: 50px;
}
}
.furniture-wrapper .standfirst,
.furniture-wrapper #standfirst,
.furniture-wrapper [data-gu-name=”standfirst”] {
position: relative;
padding-top: 4px;
}
@media (min-width: 61.25em) {
.furniture-wrapper .standfirst,
.furniture-wrapper #standfirst,
.furniture-wrapper [data-gu-name=”standfirst”] {
padding-top: 0;
}
}
@media (min-width: 71.25em) {
.furniture-wrapper .standfirst,
.furniture-wrapper #standfirst,
.furniture-wrapper [data-gu-name=”standfirst”] {
padding-top: 2px;
}
}
.furniture-wrapper #meta .content__meta-container_dcr gu-island[name=”Branding”],
.furniture-wrapper [data-gu-name=”meta”] .content__meta-container_dcr gu-island[name=”Branding”] {
display: block;
}
.furniture-wrapper #main-media,
.furniture-wrapper [data-gu-name=”media”] {
position: relative;
}
@media (min-width: 61.25em) {
.furniture-wrapper #main-media,
.furniture-wrapper [data-gu-name=”media”] {
grid-area: portrait;
}
}
.furniture-wrapper #main-media > div,
.furniture-wrapper [data-gu-name=”media”] > div {
position: relative;
}
.furniture-wrapper #main-media div + span,
.furniture-wrapper [data-gu-name=”media”] div + span {
display: block;
}
.furniture-wrapper #main-media figure,
.furniture-wrapper [data-gu-name=”media”] figure {
height: 100%;
margin-left: 10px;
}
.furniture-wrapper #main-media figure picture img,
.furniture-wrapper #main-media figure figcaption,
.furniture-wrapper [data-gu-name=media] figure picture img,
.furniture-wrapper [data-gu-name=media] figure figcaption {
width: calc(100vw – 40px – var(–scrollbar-width, 0px));
height: auto;
margin-left: 10px;
padding: 10px 0;
}
.furniture-wrapper #main-media figure figcaption,
.furniture-wrapper [data-gu-name=media] figure figcaption {
margin-bottom: 10px;
padding: 10px;
}
.furniture-wrapper #main-media figure:before,
.furniture-wrapper [data-gu-name=media] figure:before {
content: “”;
display: block;
width: calc(100vw – 20px – var(–scrollbar-width, 0px));
background-image: url(https://interactive.guim.co.uk/atoms/2025/04/2025-weekend-essay-test/assets/v/1784045269/frame.png);
background-size: contain;
background-position: center;
background-repeat: no-repeat;
position: absolute;
top: 0;
left: 10px;
height: inherit;
}
.furniture-wrapper #main-media figure.cinemagraph div:first-of-type,
.furniture-wrapper [data-gu-name=media] figure.cinemagraph div:first-of-type {
background: transparent;
}
.furniture-wrapper #main-media figure.cinemagraph video,
.furniture-wrapper [data-gu-name=media] figure.cinemagraph video {
width: 92%;
margin: 16px 8px 0;
}
.furniture-wrapper #main-media figure.cinemagraph figcaption,
.furniture-wrapper [data-gu-name=media] figure.cinemagraph figcaption {
margin-bottom: 12px;
width: 93%;
margin-left: 2px;
}
@media (min-width: 23.4375em) {
.furniture-wrapper #main-media figure.cinemagraph video,
.furniture-wrapper [data-gu-name=media] figure.cinemagraph video {
width: 94%;
}
.furniture-wrapper #main-media figure.cinemagraph figcaption,
.furniture-wrapper [data-gu-name=media] figure.cinemagraph figcaption {
margin-bottom: 12px;
width: 91%;
margin-left: 9px;
}
}
@media (min-width: 46.25em) {
.furniture-wrapper #main-media figure,
.furniture-wrapper [data-gu-name=media] figure {
margin-left: 0;
}
.furniture-wrapper #main-media figure picture img,
.furniture-wrapper [data-gu-name=media] figure picture img {
width: 670px;
height: auto;
margin-left: 5px;
padding: 15px 10px;
}
.furniture-wrapper #main-media figure:before,
.furniture-wrapper [data-gu-name=media] figure:before {
width: 700px;
left: -10px;
}
.furniture-wrapper #main-media figure figcaption,
.furniture-wrapper [data-gu-name=media] figure figcaption {
width: 650px;
margin-left: 15px;
margin-bottom: 15px;
padding: 15px 10px;
}
.furniture-wrapper #main-media figure.cinemagraph video,
.furniture-wrapper [data-gu-name=media] figure.cinemagraph video {
width: 96%;
margin: 18px 6px 0;
}
.furniture-wrapper #main-media figure.cinemagraph figcaption,
.furniture-wrapper [data-gu-name=media] figure.cinemagraph figcaption {
width: 96%;
margin-left: 6px;
margin-bottom: 17px;
}
}
@media (min-width: 61.25em) {
.furniture-wrapper #main-media figure:before,
.furniture-wrapper [data-gu-name=media] figure:before {
width: 470px;
}
.furniture-wrapper #main-media figure picture img,
.furniture-wrapper #main-media figure figcaption,
.furniture-wrapper [data-gu-name=media] figure picture img,
.furniture-wrapper [data-gu-name=media] figure figcaption {
width: 450px;
margin-left: 0;
}
.furniture-wrapper #main-media figure picture img,
.furniture-wrapper [data-gu-name=media] figure picture img {
padding: 10px 0;
}
.furniture-wrapper #main-media figure figcaption,
.furniture-wrapper [data-gu-name=media] figure figcaption {
margin-bottom: 10px;
}
.furniture-wrapper #main-media figure.cinemagraph video,
.furniture-wrapper [data-gu-name=media] figure.cinemagraph video {
margin: 10px 6px 0;
}
.furniture-wrapper #main-media figure.cinemagraph figcaption,
.furniture-wrapper [data-gu-name=media] figure.cinemagraph figcaption {
margin-left: 6px;
margin-bottom: 12px;
}
}
@media (min-width: 71.25em) {
.furniture-wrapper #main-media figure:before,
.furniture-wrapper [data-gu-name=media] figure:before {
width: 550px;
}
.furniture-wrapper #main-media figure picture img,
.furniture-wrapper [data-gu-name=media] figure picture img {
width: 520px;
margin-left: 5px;
padding: 10px 5px;
}
.furniture-wrapper #main-media figure figcaption,
.furniture-wrapper [data-gu-name=media] figure figcaption {
width: 510px;
margin-left: 10px;
margin-bottom: 10px;
}
.furniture-wrapper #main-media figure.cinemagraph video,
.furniture-wrapper [data-gu-name=media] figure.cinemagraph video {
margin: 12px 6px 0;
}
.furniture-wrapper #main-media figure.cinemagraph figccaption,.furniture-wrapper [data-gu-name=media] figure.cinemagraph figcaption{margin-left:6px;margin-bottom:15px}}@media (min-width: 81.25em){.furniture-wrapper #main-media figure:before,.furniture-wrapper [data-gu-name=media] figure:before{width:630px}.furniture-wrapper #main-media figure picture img,.furniture-wrapper [data-gu-name=media] figure picture img{width:600px;padding:15px 0}.furniture-wrapper #main-media figure figcaption,.furniture-wrapper [data-gu-name=media] figure figcaption{width:600px;margin-left:5px;margin-bottom:15px}.furniture-wrapper #main-media figure.cinemagraph video,.furniture-wrapper [data-gu-name=media] figure.cinemagraph video{margin:16px 8px 0}.furniture-wrapper #main-media figure.cinemagraph figcaption,.furniture-wrapper [data-gu-name=media] figure.cinemagraph figcaption{margin-left:8px}}.furniture-wrapper #main-media #caption-button,.furniture-wrapper [data-gu-name=media] #caption-button{right:15px;bottom:20px}@media (min-width: 46.25em){.furniture-wrapper #main-media #caption-button,.furniture-wrapper [data-gu-name=media] #caption-button{right:45px;bottom:30px}}@media (min-width: 61.25em){.furniture-wrapper #main-media #caption-button,.furniture-wrapper [data-gu-name=media] #caption-button{right:15px;bottom:20px}}@media (min-width: 71.25em){.furniture-wrapper #main-media #caption-button,.furniture-wrapper [data-gu-name=media] #caption-button{right:20px}}@media (min-width: 81.25em){.furniture-wrapper #main-media #caption-button,.furniture-wrapper [data-gu-name=media] #caption-button{bottom:30px}}.furniture-wrapper #main-media:has(.cinemagraph) #caption-button,.furniture-wrapper [data-gu-name=media]:has(.cinemagraph) #caption-button{right:20px}@media (min-width: 46.25em){.furniture-wrapper #main-media:has(.cinemagraph) #caption-button,.furniture-wrapper [data-gu-name=media]:has(.cinemagraph) #caption-button{right:35px;bottom:25px}}@media (min-width: 61.25em){.furniture-wrapper #main-media:has(.cinemagraph) #caption-button,.furniture-wrapper [data-gu-name=media]:has(.cinemagraph) #caption-button{right:25px;bottom:20px}}@media (min-width: 71.25em){.furniture-wrapper #main-media:has(.cinemagraph) #caption-button,.furniture-wrapper [data-gu-name=media]:has(.cinemagraph) #caption-button{bottom:25px}}.furniture-wrapper #main-media .no-media-div,.furniture-wrapper [data-gu-name=media] .no-media-div{display:flex;justify-content:center;align-items:center;width:100%}.furniture-wrapper #main-media .no-media-div p,.furniture-wrapper [data-gu-name=media] .no-media-div p{font-size:24px;font-weight:500;line-height:115%;color:var(–byline-anchor);font-weight:700;text-decoration:underline;display:block}@media (min-width: 71.25em){.content__main-column–interactive{margin-left:0!important}.content__main-column–interactive:before{display:none}}.content__main-column–interactive aside[data-spacefinder-role=supporting]:has(>blockquote){background-color:var(–weekend-essay-bg, #fff4f2)!important}.content__main-column–interactive p:first-of-type:first-letter{font-weight:300!important}.content__main-column–interactive hr+p:first-letter,.content__main-column–interactive .progress-bar-wrapper+p:first-letter,.content__main-column–interactive p.drop-cap:first-letter{font-family:Guardian Headline,Guardian Egyptian Web,Guardian Headline Full,Georgia,serif;font-weight:300!important;font-size:111px;line-height:92px;text-transform:uppercase;float:left;margin-right:8px;vertical-align:text-top;box-sizing:border-box;color:var(–drop-cap, var(–new-pillar-colour))}.content__main-column–interactive h2{color:#8d2700;font-size:28px;font-style:normal;font-weight:300;line-height:normal;margin-bottom:8px}@media (min-width: 71.25em){.content__main-column–interactive h2{font-size:32px}}.content__main-column–interactive h2:has(strong){font-weight:500!important}.content__main-column–interactive figure:has(>iframe){background-color:var(–weekend-essay-bg, #fff4f2)!important}@media (min-width: 71.25em){.content__main-column–interactive figure.element-showcase.element–showcase figcaption{position:absolute!important}}[data-renderiFor app rendering targets, the byline follow wrapper should be displayed as a block with a top margin of 10px. The text inside the follow wrapper should have a font size of 14px.
For the main media section, images and figures should fit their content width.
In dark mode, the article background should be a dark gray, and certain decorative elements like the book animation and frame should use white versions to remain visible.
On iOS and Android devices, the page background should be white, and the content labels in the article header should be styled appropriately.For Android and iOS devices, the labels and headline in the article containers (feature, standard, and comment) are set to a font weight of 500. In light mode, the background color of the page is set to a soft pinkish tone (like #fff4f2) when using these devices. On iOS and Android, the main accent color for opinion pieces is a dark orange (#c74600), which is also used for bylines and the primary pillar. In dark mode, the background changes to a dark gray (#1a1a1a) and the accent color becomes a brighter orange (#ff7f0f). Additionally, in dark mode, the article body and tags on opinion pieces for iOS have no background color.
For both iOS and Android, the article containers use the same background color as the page. On larger screens (over 61.25em wide), the layout of the furniture wrapper is adjusted with specific column and row spacing, creating a grid with defined areas for the title, headline, meta, standfirst, and portrait. The title and GIF wrapper is set to display as a flexible row, with space between items, and the labels inside it are styled with a font size of 17px, bold weight, and normal style.For the label links inside the content wrapper on Android devices, the text color is set to a custom pillar color (with a fallback of #c74600), and the text is not transformed to uppercase.
On both iOS and Android, the GIF container and its images within the title-and-GIF wrapper are sized to 70 by 70 pixels across all article types (feature, standard, and comment).
When the GIF has the class “book-gif-white,” it is hidden on both iOS and Android for all article types.
In dark mode (when the user’s system preference is set to dark), the regular “book-gif” is shown instead, but only on iOS and Android for all article types.On Android, the book GIF inside the title-and-gif wrapper is hidden. On iOS, the white book GIF is shown instead. For both iOS and Android, a thin gray line appears below the title-and-gif wrapper, stretching across the full width of the screen. On larger screens (over 61.25em wide), this line only spans half the screen width. In dark mode, the line color changes to a darker gray. The title-and-gif wrapper is placed in the title area of the layout on larger screens.This is a block of CSS code, not a text to be rewritten in natural English. It contains selectors and style rules for web pages, likely from a news website’s stylesheet. The code defines layout and typography for article headlines and bylines on iOS and Android devices, including font sizes, colors, and responsive design adjustments.
If you meant to provide a different text for rewriting, please share it, and I’ll be happy to help.Here is the text rewritten in fluent, natural English:
On both iOS and Android, the byline text in the article and comment sections should use the pillar color (or a fallback of #c74600) and be styled in italics, except for the author’s name, which should remain normal. The avatar image next to the byline should be hidden. The main headline should have no extra space below it. The main media area should automatically adjust its height to maintain a 4:5 aspect ratio, with a transparent background. Any figure elements inside the main media should fill the full height and have no left margin.For iOS and Android devices, the main media figure inside the furniture wrapper of feature, standard, and comment articles is positioned at the top-left corner with no offset. The inner element of this figure has a transparent background, no overflow clipping, and no padding.
On both iOS and Android, images within this figure are sized to take up the full viewport width minus 40 pixels, with a left margin of 20 pixels and a top margin of 25 pixels. However, on these devices, the top margin is reduced to 13 pixels.
The caption below the image adjusts its height automatically to fit the content. All text within the caption, including paragraphs and spans, is styled consistently across these device types.This is a CSS stylesheet that controls how image captions and media elements appear in articles on iOS and Android devices. It applies to different article types, including feature, standard, and comment articles.
The styles make captions fully visible by removing height limits and positioning them relative to their container. The caption text color is set to a light gray.
For screens wider than 46.25em (about 740px), the media elements are allowed to expand beyond their usual width limits. A decorative line is added to the left side of the media, positioned 10px from the edge and spanning nearly the full viewport width. Images inside these elements are sized to fit the viewport with some margin, and extra space is added above them.
For screens wider than 61.25em (about 980px), the decorative line is adjusted to cover half the viewport width, accounting for any scrollbar. The image sizing remains similar, with margins and spacing maintained.container .furniture-wrapper #main-media figure.element .element__inner img,
body.android #comment-article-container .furniture-wrapper #main-media figure.element .element__inner img {
width: calc(50vw – 40px – var(–scrollbar-width, 0px));
margin-left: 18px;
height: auto;
padding: 0;
margin-top: 10px;
}
@media (min-width: 71.25em) {
body.ios #feature-article-container .furniture-wrapper #main-media figure.element:before,
body.ios #standard-article-container .furniture-wrapper #main-media figure.element:before,
body.ios #comment-article-container .furniture-wrapper #main-media figure.element:before,
body.android #feature-article-container .furniture-wrapper #main-media figure.element:before,
body.android #standard-article-container .furniture-wrapper #main-media figure.element:before,
body.android #comment-article-container .furniture-wrapper #main-media figure.element:before {
top: -4px;
}
}
@media (min-width: 81.25em) {
body.ios #feature-article-container .furniture-wrapper #main-media figure.element:before,
body.ios #standard-article-container .furniture-wrapper #main-media figure.element:before,
body.ios #comment-article-container .furniture-wrapper #main-media figure.element:before,
body.android #feature-article-container .furniture-wrapper #main-media figure.element:before,
body.android #standard-article-container .furniture-wrapper #main-media figure.element:before,
body.android #comment-article-container .furniture-wrapper #main-media figure.element:before {
left: -20px;
}
body.ios #feature-article-container .furniture-wrapper #main-media figure.element .element__inner img,
body.ios #standard-article-container .furniture-wrapper #main-media figure.element .element__inner img,
body.ios #comment-article-container .furniture-wrapper #main-media figure.element .element__inner img,
body.android #feature-article-container .furniture-wrapper #main-media figure.element .element__inner img,
body.android #standard-article-container .furniture-wrapper #main-media figure.element .element__inner img,
body.android #comment-article-container .furniture-wrapper #main-media figure.element .element__inner img {
width: calc(50vw – 90px – var(–scrollbar-width, 0px));
margin-left: 12px;
height: auto;
margin-top: -10px;
padding-top: 21px;
}
}
@media (prefers-color-scheme: dark) {
body.ios #feature-article-container .furniture-wrapper #main-media figure.element:before,
body.ios #standard-article-container .furniture-wrapper #main-media figure.element:before,
body.ios #comment-article-container .furniture-wrapper #main-media figure.element:before,
body.android #feature-article-container .furniture-wrapper #main-media figure.element:before,
body.android #standard-article-container .furniture-wrapper #main-media figure.element:before,
body.android #comment-article-container .furniture-wrapper #main-media figure.element:before {
background-image: url(https://interactive.guim.co.uk/atoms/2025/04/2025-weekend-essay-test/assets/v/1784045269/frame-white.png);
}
}
body.ios #feature-article-container .furniture-wrapper #main-media figure.element.is-first-image:before,
body.ios #standard-article-container .furniture-wrapper #main-media figure.element.is-first-image:before,
body.ios #comment-article-container .furniture-wrapper #main-media figure.element.is-first-image:before,
body.android #feature-article-container .furniture-wrapper #main-media figure.element.is-first-image:before,
body.android #standard-article-container .furniture-wrapper #main-media figure.element.is-first-image:before,
body.android #comment-article-container .furniture-wrapper #main-media figure.element.is-first-image:before {
width: calc(100vw – 20px – var(–scrollbar-width, 0px));
left: 0;
}
body.ios #feature-article-container .furniture-wrapper #main-media figure.element.is-first-image img,
body.ios #standard-article-container .furniture-wrapper #main-media figure.element.is-first-image img,
body.ios #comment-article-container .furniture-wrapper #main-media figure.element.is-first-image img,
body.android #feature-article-container .furniture-wrapper #main-media figure.element.is-first-image img,
body.android #standard-article-container .furniture-wrapper #main-mFor the first image inside the main media section on iOS and Android devices, the image should take up nearly the full width of the screen, minus a small margin and the scrollbar width. It should have no left margin and include some padding around it.
On larger screens (starting at about 61.25em wide), the image should be resized to take up about half the viewport width, with a slight left margin, and the height should adjust automatically. Extra padding is added at the top.
On even wider screens (starting at 81.25em), the image width is reduced further, the left margin stays the same, and the top margin is slightly negative to pull it up, while still keeping the top padding.
For the figure container itself on these larger screens, it should stretch to full height and have a maximum width of 620px. A pseudo-element (like a background or overlay) is positioned to cover the left half of the screen, with its width based on half the viewport, and it should match the figure’s height. On the widest screens, this overlay shifts slightly to the left.
Finally, starting at 46.25em, the caption button inside the main media should be styled appropriately for both iOS and Android, though the specific styling isn’t detailed here.For the caption button inside the main media area of the furniture wrapper, on Android devices, the button should be positioned 45 pixels from the bottom.
When the screen is at least 61.25em wide, on both iOS and Android, the main media area in the article containers should be placed in the portrait grid area, with a maximum width of 620 pixels and automatic height.
For the figure element inside the furniture wrapper, on both iOS and Android, it should be positioned relatively with no top margin. The inner part of the figure should be absolutely positioned 15 pixels from the top and 20 pixels from the left, with a width that adjusts to the viewport (minus 40 pixels) and automatic height. Images inside should fill the entire width and height, using cover to crop appropriately.
The caption button within the figure should be placed 24 pixels from the right and 20 pixels from the bottom.
When the screen is at least 46.25em wide, the inner part of the figure should be 680 pixels wide with automatic height, positioned 10 pixels from the top and left. The caption button should remain in its position as specified.{on{bottom:25px}}@media (min-width: 61.25em){body.ios #feature-article-container .furniture-wrapper figure.element,body.ios #standard-article-container .furniture-wrapper figure.element,body.ios #comment-article-container .furniture-wrapper figure.element,body.android #feature-article-container .furniture-wrapper figure.element,body.android #standard-article-container .furniture-wrapper figure.element,body.android #comment-article-container .furniture-wrapper figure.element{width:calc(50vw – 20px – var(–scrollbar-width, 0px))}}body.ios #feature-article-container .furniture-wrapper .standfirst,body.ios #standard-article-container .furniture-wrapper .standfirst,body.ios #comment-article-container .furniture-wrapper .standfirst,body.android #feature-article-container .furniture-wrapper .standfirst,body.android #standard-article-container .furniture-wrapper .standfirst,body.android #comment-article-container .furniture-wrapper .standfirst{margin-top:0!important;padding-top:8px!important;padding-right:10px!important}body.ios #feature-article-container .furniture-wrapper .standfirst:before,body.ios #standard-article-container .furniture-wrapper .standfirst:before,body.ios #comment-article-container .furniture-wrapper .standfirst:before,body.android #feature-article-container .furniture-wrapper .standfirst:before,body.android #standard-article-container .furniture-wrapper .standfirst:before,body.android #comment-article-container .furniture-wrapper .standfirst:before{display:none}body.ios #feature-article-container .furniture-wrapper .standfirst__inner p,body.ios #feature-article-container .furniture-wrapper .standfirst__inner a,body.ios #feature-article-container .furniture-wrapper .standfirst__inner li,body.ios #standard-article-container .furniture-wrapper .standfirst__inner p,body.ios #standard-article-container .furniture-wrapper .standfirst__inner a,body.ios #standard-article-container .furniture-wrapper .standfirst__inner li,body.ios #comment-article-container .furniture-wrapper .standfirst__inner p,body.ios #comment-article-container .furniture-wrapper .standfirst__inner a,body.ios #comment-article-container .furniture-wrapper .standfirst__inner li,body.android #feature-article-container .furniture-wrapper .standfirst__inner p,body.android #feature-article-container .furniture-wrapper .standfirst__inner a,body.android #feature-article-container .furniture-wrapper .standfirst__inner li,body.android #standard-article-container .furniture-wrapper .standfirst__inner p,body.android #standard-article-container .furniture-wrapper .standfirst__inner a,body.android #standard-article-container .furniture-wrapper .standfirst__inner li,body.android #comment-article-container .furniture-wrapper .standfirst__inner p,body.android #comment-article-container .furniture-wrapper .standfirst__inner a,body.android #comment-article-container .furniture-wrapper .standfirst__inner li{font-size:20px;font-style:normal;font-weight:500;line-height:115%;padding-bottom:0}@media (min-width: 61.25em){body.ios #feature-article-container .furniture-wrapper .standfirst,body.ios #standard-article-container .furniture-wrapper .standfirst,body.ios #comment-article-container .furniture-wrapper .standfirst,body.android #feature-article-container .furniture-wrapper .standfirst,body.android #standard-article-container .furniture-wrapper .standfirst,body.android #comment-article-container .furniture-wrapper .standfirst{grid-area:standfirst}}body.ios #feature-article-container .furniture-wrapper .meta,body.ios #standard-article-container .furniture-wrapper .meta,body.ios #comment-article-container .furniture-wrapper .meta,body.android #feature-article-container .furniture-wrapper .meta,body.android #standard-article-container .furniture-wrapper .meta,body.android #comment-article-container .furniture-wrapper .meta{padding-top:0!important}body.ios #feature-article-container .furniture-wrapper .meta .meta__published,body.ios #standard-article-container .furniture-wrapper .meta .meta__published,body.ios #comment-article-container .furniture-wrapper .meta .meta__publFor iOS and Android devices, the “published” meta information within the article containers (feature, standard, and comment) is positioned relatively. After this meta element, a decorative line is added: it spans the full width of the viewport, is 1 pixel tall, has a light gray color (#dcdcdc), and is placed at the bottom, offset slightly to the left by 10 pixels.
On screens wider than 61.25em (about 980 pixels), the meta section is assigned to a specific grid area and displayed as a block. The decorative line’s width is then reduced to half the viewport width (50vw).
On screens wider than 81.25em (about 1300 pixels), the miscellaneous meta items have no left margin.
In dark mode (when the system prefers a dark color scheme), the decorative line’s color changes to a darker gray (#606060).
Additionally, for both iOS and Android, the pseudo-elements (before) on the meta and keyline elements are hidden, meaning any default decorative content there is not shown.This is a CSS stylesheet, not a text to be rewritten. It contains styling rules for a website, likely The Guardian, targeting mobile devices (iOS and Android). The rules hide certain elements, style article bodies, and apply drop caps and other typography adjustments. There’s no natural language to simplify or rephrase. If you meant to provide a different text, please share it, and I’ll help rewrite it in fluent, natural English.Sparrows were chirping as the sun set over a field of tall yellow sunflowers, when a sound like a moped engine suddenly broke the evening calm. The noise rose, dipped, and rose again. Lieutenant Colonel Ray, a Ukrainian commander with the 414th aviation brigade, took cover in a leafy ditch.
Seconds later, a Ukrainian drone roared into a mauve sky. It shot upward at a 45-degree angle, with orange flames flickering, then flew on smoothly. The aircraft looked like a sleek grey biplane with a wooden propeller and tail. It left behind thick black smoke and a faint smell of gunpowder.
Four and a half years after Vladimir Putin sent tanks to seize Kyiv, the war in Ukraine has shifted from the ground to the sky, becoming a battle of drones. This fight, unlike anything seen before in warfare, is driven by technology, innovation, and rapid progress.
“We are making history here. This is where democracy beats totalitarianism. It’s like George Orwell. But this time Big Brother loses,” Ray said, as the drone disappeared over the horizon, its engine humming. Its target was Crimea, a scenic Ukrainian peninsula known for its beaches and white chalk mountains, which Russia took in 2014 and has since turned into a military stronghold.
Next, two more long-range drones shot forward. They climbed into the twilight, above a darkening steppe landscape. Each carried 50-100kg of explosives. With the mission done, the Ukrainian soldiers packed up quickly, winding white cables with practiced ease. Within ten minutes, they were gone, disappearing down a tree-lined, potholed road.
Far from the frontline, other crews were moving across Ukraine, launching drones according to a precise evening schedule. Operators sat in front of computer screens, guiding them toward enemy targets. This model can fly over 2,500km, enough to strike anywhere in European Russia, and much of Siberia too.
The journey for Ray’s three drones was shorter. After four hours, around 1am, the first one reached its destination: the resort town of Alushta on the southern coast of occupied Crimea. The drone weaved between grey apartment blocks and crashed into a 110kV electricity substation. Flames burst out, breaking the city’s pitch-black darkness., also known as Magyar’s Birds, struck 12 other power plants in occupied Crimea and southern Ukraine on the same night. Photograph: Alessio Mamo/The Guardian
These remote strikes on 21 July were part of what Ukraine has nicknamed the Crimean “switch off”: a campaign to cut the region off from its power and logistics networks. That same night, unmanned drones hit 13 electricity nodes. Several were in the Russian-controlled parts of Zaporizhzhia and Kherson provinces, which the Kremlin claims to have annexed.
Since 2022, Russia has carried out nightly attacks on Ukrainian cities and towns. It sends Iranian-designed Shahed drones as well as ballistic and hypersonic missiles. After Donald Trump returned to the White House last year, these swarms grew. They rain down chaotically, killing families in their apartments and other civilians, in a calculated campaign of terror.
Once a recipient of western assistance, Ukraine has responded by building its own military manufacturing base. After rapid growth, the country has become the world’s leading unmanned systems power. The drones hurled at Crimea last week were built in Kyiv by a defence technology startup. The firm’s representatives take part in operations.
View image in fullscreen
A Ukrainian FP1 long-range drone on its way to Russian-occupied Crimea. Photograph: Alessio Mamo/The Guardian
Ray’s battalion – named after Kairos, the ancient Greek god of opportunity, luck, and the fleeting moment – has carried out hundreds of deep strikes against Russia. Targets have included oil refineries, warehouses, and munitions depots. It has also struck ports and harbours, as well as routes used for army logistics such as roads and railways.
In 2026, Ukrainian drones have struck Moscow and Putin’s home city of St Petersburg, embarrassing Russia’s president and bringing the war home to ordinary citizens who had previously ignored it. “I think Putin is afraid,” Ray suggested. “One of the justifications he gave for his war was to stop Ukraine from [potentially] bombing Moscow. It’s happening now as a direct consequence of his actions.”
Ukraine long-range drone – loop
Ray said he felt “revenge and justice” every time one of his drones ascended into the moonlit heavens, bound for enemy territory. “We didn’t start this war. We have no choice. We are fighting for our independence, for our people, for the memory of those who have died, and for our future. This is a contest between slaves and free people,” he said.
Secrecy surrounds Ukraine’s well-organised drone operation. An analytics department finds targets. Western partners provide some intelligence, but most is open source. Drone crews are given coordinates at the last minute. So far, none of those who take part in launches have been injured or killed, despite attempts by Moscow to identify and blow up lift-off points.
One person involved said: “You are making change on a global scale. Trump wakes up and sees the results. At the same time, it’s very solitary. You can’t tell anybody about what you do, even your wife, or boast: ‘Today we bombed Moscow.’ Only your commander understands.” They added: “It’s an important job. You feel the biggest satisfaction and a member of an elite.”
Kairos is a part of “Magyar’s Birds”, a brigade named after the call sign of its founder, Robert Brovdi, the head of Ukraine’s unmanned systems forces. In July, Brovdi launched a campaign to destroy oil tankers and other vessels in the Sea of Azov and Black Sea. So far, more than 200 have been hit. The Russians were taken unawares, their boats unable to escape.
Since last week, the brigade has been burning warehouses belonging to Wildberries, Russia’s equivalent of Amazon, obliterating at least nine of them. Ukraine says the company sells military products. The strikes have crippled small businesses and caused billions of roubles in damage. “The socio-psychological impact on society is greater than that of an oil r”Refinery,” Brovdi said.
View image in fullscreen
Robert ‘Magyar’ Brovdi, commander of Ukraine’s Unmanned Systems Forces. His 414th unmanned strike aviation brigade, known as Magyar’s Birds, has carried out a series of spectacular drone strikes on targets inside Russia. Photograph: Alessio Mamo/The Guardian
He said Ukrainian long-range drones had “significantly thinned out” Russia’s air defenses. “We have already destroyed most of them,” he said. “With every air defense unit destroyed, the breach widens.” Three days earlier, air defense units were flattened in the Russian port of Yeysk on the Azov Sea, he added, bringing the total number of systems knocked out to 305.
Russia’s vast size—once a strategic advantage—has now become a weakness. A panicked Kremlin has moved “a certain number” of air defenses from the frontline to protect Moscow, Brovdi said. The commander said he wanted to stop Russia from using Crimea as a “springboard” to fire on Ukraine and to push out the nearly 1 million Russian residents, or “colonisers,” who settled on the peninsula after Putin’s 2014 takeover.
Crimea now has so little fuel that Russian military groups sometimes can’t fill up and launch drones. There are also frequent power cuts.
One brigade member, call sign Schweik, predicted food shortages would come soon: “The operation is endless. There will be a cascade effect. We will keep up the pressure. They’ll be thinking about survival instead of assault operations.”
Schweik added: “The situation is humiliating for Russia. Crimea is symbolic. It was Putin’s first trophy and the place where the world order was broken. He created a kind of euphoria in Russian society, which in turn gave him permission to go and take more [Ukrainian] territory. Now everyone in the world understands that Russia is really weak.”
Not all Ukrainian drones reach their targets. According to Ray, about a third are brought down over occupied territory. He admitted losses in the skies above Russia were considerably higher. Nevertheless, Ukraine’s strategy—to pile pressure on the Russian economy—appears to be working. “Troops and resources must be exhausted, so that it becomes impossible for them to continue the war,” Brovdi said.
The commander acknowledged that Russian troops were still advancing in the eastern Donbas region, with battles in the city of Kostiantynivka. “Their gains so far don’t justify the price they’re paying for them,” he said. He continued: “At this rate, with their intention to seize half of Ukraine, are they planning to fight for 100 years?”
View image in fullscreen
Panama, a senior sergeant with Ukraine’s ‘Kairos’ strike-drone battalion, says he has made peace with the summer’s swarming mosquitoes: ‘They are inhabitants of free Ukraine.’ Photograph: Alessio Mamo/The Guardian
Back in the countryside, Ray’s colleague “Panama” described the latest launch as a success. “It was 10 out of 10. With us it’s always like this,” he said, adding that he had been working with the current biplane-like model for a year and a half. “At first we used foreign drones. Sometimes things went wrong. Now we don’t have problems,” he reflected.
The only challenge came from the mosquitoes, which fill the air during summer evenings. “Over time we’ve become friends with them. They don’t bother me anymore. They’re also inhabitants of free Ukraine. They can do whatever they want,” Panama said. “But if they irritate us, we’ll launch them at the enemy. They can eat Russians.”
Betrayal: Trump, Putin and The New Age of Conquest by Luke Harding is published on 27 August by Guardian Faber. To support the Guardian, order your copy at guardianbookshop.com. Delivery charges may apply.
Frequently Asked Questions
Here is a list of FAQs about Ukraines drone strike force and its role in the war based on the headline provided
General Beginner Questions
Q What does This is where democracy beats totalitarianism mean in the context of drones
A It means that Ukraines flexible innovative and crowdfunded drone industry is outsmarting Russias rigid topdown military system Instead of relying on massive expensive weapons Ukraine is using cheap adaptable tech to effectively fight a much larger enemy
Q What exactly is Ukraines drone strike force
A Its a dedicated branch of the Ukrainian military that operates thousands of unmanned aerial vehicles These arent just for spying they are attack drones that fly deep into Russian territory to hit military targets like fuel depots ammo stores and airfields
Q Why is Ukraine using drones instead of planes or missiles
A Drones are much cheaper harder for Russia to shoot down and dont risk the lives of pilots They allow Ukraine to strike targets inside Russia that would otherwise be out of reach for artillery without asking for permission to use longrange Western missiles
Q Are these drones like the ones you can buy at a hobby store
A Some are but heavily modified Many longrange strike drones are built from scratch in Ukrainian workshops using commercial parts but with militarygrade explosives attached Shortrange FPV drones on the front lines are often adapted from racing quadcopters
Q Does this mean Ukraine is attacking civilians in Russia
A No The stated target is military infrastructurerefineries that fuel tanks warehouses full of missiles and command centers Ukraine says it is hitting these to degrade Russias ability to fight not to harm ordinary people
Strategic Advanced Questions
Q How does the drone force actually beat totalitarianism on the battlefield
A It breaks the iron curtain of Russian air defense Russia spends billions on advanced S400 systems but swarms of cheap drones overwhelm them The cost ratio is key a 500 drone can destroy a 5 million radar system This forces Russia to waste resources defending against cheap tech which is unsustainable
