This is a CSS code block that defines a set of web fonts for the “Guardian Headline Full” typeface. It includes multiple font styles and weights, each with its own file source. The code specifies the font family name, provides the font files in different formats (WOFF2, WOFF, and TTF) for compatibility across browsers, and sets the font weight and style for each variation. The styles range from light (300) to semibold (600), with both normal and italic versions available.This is a CSS code block that defines font-face rules for the Guardian Headline and Guardian Titlepiece font families. It specifies the source files for different font weights and styles, including bold, italic, black, light, and regular variants, using WOFF2, WOFF, and TTF formats. The code sets the font-weight and font-style for each variant accordingly.This is a CSS code block that defines the “Guardian Headline Full” font family with various weights and styles. It includes multiple @font-face rules, each specifying the font files (in WOFF2, WOFF, and TTF formats) for different font weights (400, 500, 600, 700, 900) and styles (normal and italic). The URLs point to the Guardian’s asset server for the font files.This is a block of CSS code, not a text to be rewritten. 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 padding is set to 4px on top and 0 on the bottom. In the main article body, interactive content, comment sections, and feature body areas, the lines and meta sections within the interactive grid are placed in a specific grid area (row 2, column 1, spanning to row 5). The lines section has a height that fits its content and a top margin of 5px, while the meta section has a top margin of 18px. At a minimum screen width of 81.25em, the interactive grid uses a column layout of 219px, 1px, 620px, 80px, and 300px. On iOS and Android devices, the standfirst text in article headers uses the Guardian Headline font with a medium weight, and the article kicker section is displayed as a block with the first letter capitalized. The keyline-4 element has 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 rewrite this text as it’s not written in natural language—it’s CSS code for defining web fonts. If you have a different text you’d like me to rewrite, please share it, and I’ll be happy to help.Here is the text rewritten in fluent, natural English:
“`css
@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 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”]) {
/ Add any specific styling here if needed /
}
“`
I’ve cleaned up the formatting, added proper spacing, and made the code more readable while keeping all the original rules and values intact..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 style defined here, but the selector is kept for potential styling /
}This is a block of CSS code, not a text to be rewritten in natural English. It contains selectors and style rules for a webpage. If you meant to ask for a summary or explanation of what this CSS does, I can provide that instead. Please clarify your request.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,
.furnitur.e-wrapper #standfirst:before,
.furniture-wrapper [data-gu-name=”standfirst”]:before {
left: -0.5px;
}
.furniture-wrapper .article-header .content__labels > div,
.furniture-wrapper [data-gu-name=”title”] .content__labels > div {
padding-top: 2px;
}
.furniture-wrapper #headline h1,
.furniture-wrapper [data-gu-name=”headline”] h1,
.furniture-wrapper .headline h1 {
font-weight: 600;
max-width: 620px;
font-size: 32px;
}
@media (min-width: 71.25em) {
.furniture-wrapper #headline h1,
.furniture-wrapper [data-gu-name=”headline”] h1,
.furniture-wrapper .headline h1 {
max-width: 540px;
font-size: 50px;
}
}
@media (min-width: 46.25em) {
.furniture-wrapper .keyline-4,
.furniture-wrapper [data-gu-name=”lines”] {
margin-right: 0;
}
}
@media (min-width: 61.25em) {
.furniture-wrapper .keyline-4,
.furniture-wrapper [data-gu-name=”lines”] {
display: none;
}
}
.furniture-wrapper .keyline-4 svg,
.furniture-wrapper [data-gu-name=”lines”] svg {
stroke: var(–headerBorder);
}
@media (min-width: 46.25em) {
.furniture-wrapper #meta,
.furniture-wrapper [data-gu-name=”meta”] {
margin-right: 0;
}
}
.furniture-wrapper #meta .meta__social,
.furniture-wrapper #meta .meta__social ul li a span,
.furniture-wrapper #meta .meta__comment,
.furniture-wrapper [data-gu-name=”meta”] .meta__social,
.furniture-wrapper [data-gu-name=”meta”] .meta__social ul li a span,
.furniture-wrapper [data-gu-name=”meta”] .meta__comment {
border-color: var(–headerBorder);
}
.furniture-wrapper #meta .content__meta-container_dcr > div > gu-island,
.furniture-wrapper [data-gu-name=”meta”] .content__meta-container_dcr > div > gu-island {
display: none;
}
.furniture-wrapper .standfirst,
.furniture-wrapper #standfirst,
.furniture-wrapper [data-gu-name=”standfirst”] {
margin-left: -10px;
padding-left: 10px;
position: relative;
}
@media (min-width: 46.25em) {
.furniture-wrapper .standfirst,
.furniture-wrapper #standfirst,
.furniture-wrapper [data-gu-name=”standfirst”] {
padding-top: 2px;
}
}
.furniture-wrapper .standfirst p,
.furniture-wrapper #standfirst p,
.furniture-wrapper [data-gu-name=”standfirst”] p {
font-weight: 400;
font-size: 20px;
padding-bottom: 14px;
}
.furniture-wrapper #main-media,
.furniture-wrapper [data-gu-name=”media”] {
position: relative;
margin-top: 0;
margin-bottom: 2px;
grid-area: portrait;
}
.furniture-wrapper #main-media div div,
.furniture-wrapper [data-gu-name=”media”] div div {
width: 100%;
margin-inline: 0;
}
@media (min-width: 61.25em) {
.furniture-wrapper #main-media,
.furniture-wrapper [data-gu-name=”media”] {
margin-bottom: 0;
}
}
@media (max-width: 46.24em) {
.furniture-wrapper #main-media,
.furniture-wrapper [data-gu-name=”media”] {
width: calc(100vw – var(–scrollbar-width, 0px));
margin-left: -10px;
}
}
@media (max-width: 46.24em) and (min-width: 30em) {
.furniture-wrapper #main-media,
.furniture-wrapper [data-gu-name=”media”] {
margin-left: -20px;
}
}
.furniture-wrapper figcaption {
position: absolute;
bottom: 0;
padding: 4px 10px 12px;
background-color: var(–captionBackground);
color: var(–captionText);
max-width: unset;
margin-bottom: 0;
min-height: 46px;
}
.furniture-wrapper figcaption span {
color: var(–headerBorder);
}
.furniture-wrapper figcaption span svg {
fill: var(–headerBorder);
}
.furniture-wrapper figcaption span:nth-of-type(1) {
display: none;
}
.furniture-wrapper figcaption span:nth-of-type(2) {
display: inline;
max-width: 90%;
}
@media (min-width: 30em) {
.furniture-wrapper figcaption {
padding: 4px 20px 12px;
}
}
.furniture-wrapper figcaption.hidden {
opacity: 0;
}
.furniture-wrapper #caption-button {
display: block;
position: absolute;
bottom: 10px;
right: 8px;
z-index: 30;
background-color: var(–captionBackground);
border: none;
border-radius: 50%;
padding: 6px 5px 5px;
}
.furniture-wrapper #caption-button svg {
transform: scale(0.85);
}
@media (min-width: 30em) {
.furniture-wrapper #caption-button {
right: 10px;
}
}
@media (min-width: 71.25em) {
.content__main-column–interactive:before {
top: -12px !important;
height: calc(100% + 24px) !important;
}
}
.content__main-column–interactive h2 {
max-width: 620px;
}
:root:has(.ios, .android) {
–darkBackground: #1a1a1a;
–feature: #c70000;
–darkmodeFeature: #ff5943;
–new-pillar-colour: var(–primary-pillar, var(–feature));
}
@media (prefers-color-scheme: dark) {
:root:has(.ios, .android) {
–new-pillar-colour: var(–darkmode-pillar, var(–darkmodeFeature));
}
}
body.ios #feature-article-container .element-atom:first-of-type + p:first-of-tThis text appears to be a technical CSS code snippet, not natural language prose. It contains selectors and style rules for a website (likely The Guardian) that control typography and layout on mobile devices. Since it’s code, rewriting it into “fluent, natural English” would change its meaning and function.
If you meant to provide a different text for rewriting, please share it, and I’ll be happy to help.figure.element-image {
position: relative;
margin: 14px 0 0 -10px;
width: calc(100vw – var(–scrollbar-width, 0px));
height: auto;
}
/ On iOS and Android, 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;
}
/ Adjust standfirst spacing on mobile /
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;
}
/ Style paragraphs inside 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;
}
/ Style links inside standfirst /
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;
}
/ 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__inneOn iOS and Android, when you hover over links in the standfirst section of feature, standard, or comment articles, the underline color changes to match the new pillar color. The meta section in these article containers has no margin. The byline text, including author names and links, also uses the new pillar color. The meta misc section has no padding, and any SVG icons inside it are 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 #standaFor links inside the article body on both iOS and Android, the text color uses the main pillar color, with an underline that sits slightly below the text. The underline color matches the header border.
When you hover over these links on iOS or Android, the underline color changes to the new pillar color.
In dark mode, the background behind the article header (the furniture wrapper) becomes a dark gray. The labels in that section use the new pillar color, and the main headline keeps its color but no longer has a background. The standfirst text and any links within it, as well as the author byline and its links, all use the new pillar color. Icons in the meta section also follow this color scheme.Here is the rewritten text in fluent, natural English:
—
For iOS and Android devices, the icons in the article’s meta section use the pillar colour as their stroke. On iOS, the captions for showcase images in the furniture section use the dateline colour. On both platforms, quoted blockquotes in the article body use the pillar colour.
The main content areas of feature, standard, and comment articles—including the article body, interactive content, and comment sections—have a dark background colour applied. Additionally, the first letter of any paragraph that follows an element atom (or a sign-in gate) is styled with a drop cap effect.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 is the rewritten text in fluent, natural English:
—
For the caption button on article containers (including Android and comment sections), the padding is set to 4px on top and sides, with no bottom padding.
In dark mode (when the system preference is dark and no light color scheme is forced), the following custom colors are applied: follow text is light gray, follow icon fill and standfirst text use the dark mode pillar color, standfirst links use the same pillar color for both text and border, and the byline also uses the pillar color.
On iOS and Android devices, within the furniture wrapper of feature, standard, and comment articles, the labels and headline text are set to a font weight of 500. This also applies to the headline and standfirst sections in the furniture wrapper.
The root body element uses a light pinkish background (like #fff4f2) for the weekend essay theme, and this background is also used for the article section and sub-meta areas. The lines element is hidden.
The furniture wrapper is positioned relatively. On very wide screens (over 81.25em), the grid rows are defined with specific proportions for the title, portrait, headline, standfirst, and meta sections.
The article header and title section have a fixed height of 70px. The labels inside them take up the full height. A decorative book image (from a GIF) is placed at the bottom right corner, sized at 70x70px, and scales up to 110x110px on wide screens. A horizontal line is drawn below the labels, spanning the full viewport width (accounting for scrollbar), with adjustments for different screen sizes—on medium screens it’s 738px wide and positioned differently, and on larger screens it’s hidden.
The header and title heights increase to 80px on screens wider than 71.25em, and to 125px on screens wider than 81.25em. On very wide screens, the headline section has a slight negative top margin.The padding-bottom is set to zero for the headline section and its inner elements. The headline wrapper is designed to fill its container, with its content positioned relative to it, hidden overflow, and extra padding at the bottom. The headline text and links inside this wrapper have no maximum width limit. When you hover over them, the underline becomes thicker and moves slightly further away from the text. The headline text, links, and byline are all styled with a font size of 36 pixels, a medium font weight, and a line height of 115%. On larger screens, the font size increases to 50 pixels. The standfirst section has a small amount of padding at the top, which is removed on medium screens and then slightly increased on larger ones. The branding element within the meta section is displayed as a block. The main media section is positioned relative to its container, and on medium screens and above, it is placed in a specific grid area. The media content is also positioned relative, and any text following it is displayed as a block. The figure inside the media section takes up the full height of its container, with a small margin on the left. The image inside the figure and its caption are also styled accordingly.Here’s the rewritten text in fluent, natural English:
The wrapper for the media element and the furniture wrapper both style the image and caption inside the figure. The image takes up the full width of the viewport minus 40 pixels and the scrollbar width, with a height that adjusts automatically. It has a left margin of 10 pixels and padding of 10 pixels on top and bottom.
The caption below the image has a bottom margin of 10 pixels and padding of 10 pixels on all sides.
Before the image, there’s a decorative frame. It’s a block element that spans the full width minus 20 pixels and the scrollbar width. The frame uses a background image from a specific URL, which is scaled to fit, centered, and not repeated. It’s positioned absolutely at the top with a left offset of 10 pixels, and its height matches the parent element.
For cinemagraph figures (which have a video instead of a static image), the first child div has a transparent background. The video itself takes up 92% of the width, with a top margin of 16 pixels and side margins of 8 pixels. The caption for cinemagraphs has a bottom margin of 12 pixels, a width of 93%, and a left margin of 2 pixels.
On smaller screens (at least 23.4375em wide), the cinemagraph video expands to 94% width, and the caption adjusts to 91% width with a left margin of 9 pixels.
On medium screens (at least 46.25em wide), the figure loses its left margin. The image becomes 670 pixels wide with a left margin of 5 pixels and padding of 15 pixels on top and 10 pixels on the sides. The frame widens to 700 pixels and shifts left by 10 pixels. The caption is 650 pixels wide with a left margin of 15 pixels, a bottom margin of 15 pixels, and padding of 15 pixels on top and 10 pixels on the sides. The cinemagraph video takes up 96% width with a top margin of 18 pixels and side margins of 6 pixels, and its caption is 96% wide with a left margin of 6 pixels and a bottom margin of 17 pixels.
On larger screens (at least 61.25em wide), the frame narrows to 470 pixels. The image and caption both become 450 pixels wide with no left margin. The image has padding of 10 pixels on top and bottom, while the caption has a bottom margin of 10 pixels. The cinemagraph video has a top margin of 10 pixels and side margins of 6 pixels, and its caption has a left margin of 6 pixels and a bottom margin of 12 pixels.
On the widest screens (at least 71.25em wide), the frame expands to 550 pixels. The image is 520 pixels wide with a left margin of 5 pixels and padding of 10 pixels on top and 5 pixels on the sides. The caption is 510 pixels wide with a left margin of 10 pixels and a bottom margin of 10 pixels. The cinemagraph video has a top margin of 12 pixels and side margins of 6 pixels, and its caption has a left margin of 6 pixels and a bottom margin of 12 pixels.caption, .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 span should have a font size of 14px.
For main media and media sections, the width of divs, figures, and pictures should fit their content.
In dark mode, the article section background and weekend essay background should be set to a dark color. The decorative images for the article header and title labels should use white versions. The byline anchor color should be white, and the media figure background should use a white frame image.
On iOS and Android devices, the body background should be white, and the content labels in feature, standard, and comment article containers should be styled appropriately.For Android and iOS devices, the labels and headline in the article containers (feature, standard, and comment) should use a font weight of 500.
In light mode, the background color of the page (for both iOS and Android) should be set to a soft pinkish tone, using the variable `–weekend-essay-bg` with a fallback of `#fff4f2`. The main accent color for opinion pieces is set to a dark orange (`#c74600`), which is also used for bylines and the primary pillar color.
In dark mode, the background changes to a dark gray (`#1a1a1a`), and the opinion accent color becomes a brighter orange (`#ff7f0f`). For opinion articles on iOS in dark mode, the article body and tags should not have a background color.
The article containers themselves should use the same background color as the page (`–weekend-essay-bg`).
On wider screens (at least 61.25em), the layout of the furniture wrapper (which holds the title, headline, meta, and standfirst) is adjusted. It uses a grid with two sets of five columns, separated by a 20px gap. The rows are arranged so that the title and portrait start together, followed by the headline, standfirst, and meta, with the portrait spanning the full height.
The title and GIF wrapper is a flex container that arranges its children in a row, with space between them. The labels inside this wrapper are styled with a font size of 17px, bold weight, and a line height of 115%. Any links within these labels inherit the same styling.For links inside the content labels on Android devices, the text color is set to a pillar color (defaulting to #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.
When the “book-gif-white” class is applied to the GIF container or its images, they are hidden from view on both iOS and Android.
In dark mode (when the user’s system preference is set to dark), the regular “book-gif” class is displayed instead, while the white version remains hidden.On Android devices, the book GIF and its image inside the title-and-GIF wrapper are hidden for feature, standard, and comment article containers. On iOS devices, the white book GIF and its image are shown as block elements in the same containers. After the title-and-GIF wrapper in these containers, a decorative line is added: it spans the full width of the viewport, is 1 pixel tall, has a light gray color, and is positioned at the bottom, slightly offset to the left. On screens wider than 61.25em, the wrapper is placed in the title area of the grid, and the line’s width is reduced to half the viewport. In dark mode, the line’s color changes to a darker gray. Additionally, on wider screens, the portrait main media headline wrapper in these containers is adjusted accordingly.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 for a news website, targeting different device types (iOS and Android) and article layouts. The code sets font sizes, styles, colors, and grid areas for headlines and bylines, with adjustments for dark mode.
If you meant to provide a different text for rewriting, please share it, and I’ll be happy to help.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. If you meant to provide a different text, please share it, and I’ll be happy to help.On Android devices, the main media figure inside the furniture wrapper of feature, standard, and comment articles should be positioned at the top-left corner (top: 0; left: 0).
For both iOS and Android, the inner element of this figure should have a transparent background, no overflow clipping, and no padding.
On both platforms, images inside this figure should be 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 iOS, the top margin should be reduced to 13 pixels.
The caption (figcaption) for this figure should automatically adjust its height on both iOS and Android. Any paragraphs or spans within the caption should also be styled appropriately, though the specific styling details are not fully specified here.For iOS and Android devices, the caption text inside the main media figure in article containers is displayed as a block, with no maximum height limit, positioned relatively, and colored using a custom variable (falling back to a light gray if not set).
On screens wider than 46.25em (about 740px), the main media figure in these containers has no maximum width. A pseudo-element is placed 10px from the left, spanning the full viewport width minus 20px. The image inside is sized to the viewport width minus 60px, centered with a 30px margin on the left and a 40px margin on the top.
On screens wider than 61.25em (about 980px), the pseudo-element’s width is adjusted to half the viewport width minus 20px, also accounting for any scrollbar width. The image sizing remains the same as in the previous breakpoint.This is a block of CSS code, not a text to be rewritten in natural English. It contains styling rules for a website’s layout, including media queries, selectors, and properties. If you’d like, I can explain what this CSS does in plain English, or you can provide a different text for rewriting.For the first image inside the main media section, the image should take up nearly the full width of the screen, minus a small margin and the scrollbar width, with some padding around it. On larger screens (over 61.25em wide), the image is adjusted to take up about half the screen width, with a slight left margin and extra padding at the top. On even wider screens (over 81.25em), the image width is reduced further, and it’s pulled up slightly with a negative top margin.
The container for this first image is set to fill the available height and has a maximum width of 620 pixels. A decorative element (shown with a pseudo-element) is positioned to match the image’s width and height, and on very wide screens, it’s shifted slightly to the left. The caption button for the main media is also styled to work well on different screen sizes, starting from a minimum width of 46.25em.For iOS and Android devices, the caption button inside the main media area of the furniture wrapper is positioned 45 pixels from the bottom. On screens wider than 61.25em, the main media area is set to a grid area called “portrait,” with a maximum width of 620 pixels and automatic height. The figure element inside the furniture wrapper is positioned relatively with no top margin. Its inner content is placed absolutely, 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 this inner content fill the entire width and height, using a cover fit. The caption button within this figure is placed 24 pixels from the right and 20 pixels from the bottom. On screens at least 46.25em wide, the inner content is set to a fixed width of 680 pixels, with automatic height, and is positioned 10 pixels from both the top and left. The caption button remains in the same position relative to the figure.{ 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__publFinished. Here is the rewritten text in fluent, natural English:
On Android devices, the published date in the article meta section is positioned relative to its container. On iOS devices, a decorative line is added below the published date using a pseudo-element. This line spans the full width of the screen and is positioned at the bottom of the meta section, slightly offset to the left.
For screens wider than 61.25em (about 980px), the meta section is placed in a specific grid area and displayed as a block. The decorative line’s width is reduced to half the viewport width.
For screens wider than 81.25em (about 1300px), the additional meta information (like author or comments) has no left margin.
In dark mode, the decorative line’s color changes to a darker gray.
On both iOS and Android, certain decorative elements (like the meta section’s top border and keyline) are hidden. Additionally, rich link elements within the article are not displayed on these devices.This is a CSS stylesheet, so rewriting it in “fluent, natural English” isn’t quite right—it’s code, not prose. However, I can explain what it does in plain English.
Here’s a summary of the CSS rules:
– On Android devices, hide the “rich link” element in the furniture wrapper.
– On both iOS and Android, hide the “cutout” container in the comment header across all article types.
– On iOS and Android, set the background color of the article and feature bodies to a light pinkish tone (or a custom variable), with a small top margin.
– Style horizontal rules (lines) inside the article body: make them thin, light gray, 150px wide, and positioned with extra top margin.
– For the first paragraph (or a paragraph right after a horizontal rule) that doesn’t contain a span, style the first letter as a large drop cap: big, bold-ish, uppercase, floated left, with specific spacing and color.
– Make bold text inside headings (h2) slightly less bold (weight 500).
– In dark mode, adjust the line color to a darker gray, change the drop cap color to a reddish tone, and remove underlines from links in paragraphs.
– For paragraphs that follow an “element-atom” (like an embedded widget), adjust the drop cap styling to be slightly bolder.
– Apply similar drop cap styling rules to comment bodies and other body sections on both iOS and Android.Having settled in California after their dramatic split from the royal family in 2020, the Duke and Duchess of Sussex announced a partnership that seemed to set a clear direction for their new lives outside the House of Windsor. With every major media outlet competing for their attention, the couple revealed a deal with Netflix reportedly worth $100 million. Their ambitions were big and wide-ranging, covering scripted and unscripted shows, content for all ages, and documentaries.
A $20 million podcast deal with Spotify appeared to confirm their goals; the Sussexes were reinventing themselves in the competitive world of content creation, becoming a media force in the fast-growing streaming and podcasting space. As the couple now get ready to return to the UK, they do so with those mega-deals either scaled back or ended, and their media plans less certain. This raises the question: is this the end of their American dream?
As with everything related to Harry and Meghan, their various media ventures have sparked a huge amount of reactionary content and commentary. Every appearance, commission, and production has been closely examined: there have been blockbuster hits, widely publicized misses, and some harsh reviews along the way.
View image in fullscreen
Prince Harry and Meghan, Duchess of Sussex, being interviewed by Oprah Winfrey in 2021. Photograph: Reuters
For Harry, the pull to return to the UK—if not permanently, at least for now—has been clear for a while. He says he loves his country, and in an interview with the Guardian last year, he admitted he misses home. “I have always loved the UK and I always will love the UK. It’s been good to reconnect with the causes I am passionate about. I have been able to spend some time with people that I have known for so long. It is hard to do it from far away.”
Perhaps this feeling has grown stronger recently because his father, King Charles, has been ill. And on the work front, things haven’t been easy either. Six years in the content industry offers a lesson in how tough it can be to navigate the constantly changing landscape of modern media—so tough that even a Hollywood actor and a British prince aren’t guaranteed success.
“They arrived in Hollywood with almost every advantage imaginable, but audiences now effectively have infinite choice,” said Matt Navarra, a social media consultant.
Those years have shown that one part of the Sussex brand is always reliable: their relationship with the royal family continues to be consumed on a massive scale. HoweveLaunching lifestyle brands and philanthropic projects that rely purely on name recognition—even with a contact list full of A-list friends to help—can’t guarantee steady success in the cutthroat world of the attention economy.
“The Sussexes have kind of got caught up in the media’s awkward teenage transition,” said Evan Shapiro, a former US media executive turned leading analyst of the creator economy. “Just being famous is no longer enough … The last time Meghan Markle worked in show business [starring in the US legal drama Suits], it was a different era. It was top down: ‘We push it out, you watch it.’ That’s just how it worked.”
“That era has passed. It’s really hard [now] … the competition is literally every human on earth. Eight billion people with phones who are all competing with Meghan Markle.”
The Sussexes couldn’t have timed their eye-catching 2020 Netflix deal better, through their Archewell Productions company—streaming platforms were scrambling for big names to attract subscribers.
The pair were in demand, talking with the likes of Disney and Apple before signing with Netflix. Spotify was also chasing big-name deals when it secured the Sussexes.
While the Netflix announcement mentioned a range of potential projects, the biggest draw was always the story of the Sussexes’ relationship with the royal family. The 2022 documentary series, Harry & Meghan, delivered on that, setting record viewing figures for a documentary debut and becoming one of the platform’s most successful docuseries ever.
Other Netflix projects featuring the couple followed, including the Live to Lead interview series, Harry’s Polo documentary, and two seasons of the cooking and lifestyle show With Love, Meghan.
Unsurprisingly, content without the royal drama couldn’t match the success of Harry & Meghan. Polo failed to make Netflix’s top 10 lists worldwide, while ratings for the second season of With Love, Meghan dropped. It was the 1,217th most-watched title on Netflix in the second half of last year. A planned animated children’s series, Pearl, was cancelled.
Netflix also ended its partnership with Meghan’s lifestyle brand, As Ever, after seven months. The company said handing full control to Meghan was always the plan. However, the relationship continues—Netflix renewed its partnership with the Sussexes, but scaled it down to a “first look” deal.
As for podcasting, the Spotify deal ended by mutual agreement in 2023, having only produced Meghan’s 12-episode podcast Archetypes, which featured interviews with people like former tennis champion Serena Williams and pop star Mariah Carey.
Meghan later launched another podcast series, Confessions of a Female Founder, in 2025 with Lemonada Media. Only nine episodes were made. She revealed last year that there would be no second season, saying she was focusing on As Ever.
In line with all of Harry and Meghan’s ventures, there have been some sharp critiques of their media efforts. Most notably, Spotify executive Bill Simmons called them “fucking grifters” after the company’s deal with the couple ended.
Less inflammatory industry analysts point to the timing. The Sussexes’ reduced Netflix deal and split with Spotify coincided with content providers pulling back on big celebrity bets, and the disruption caused by the rapid rise of the creator economy.
“This isn’t a story about nobody being interested in [the Sussexes],” said Matt Navarra, a social media consultant who has worked with broadcasters. “It’s quite the opposite. They can generate attention almost on demand. The harder thing is turning that attention into a repeatable media business.”Harry and Meghan arrived in Hollywood with nearly every advantage you could think of, but audiences today have almost unlimited options. They don’t care how expensive a deal was or how famous someone is.
“I think that’s one of the harsh realities of the new media world: fame can get you the first click, but only good content earns the second one. Their original Harry & Meghan series was basically a huge hit. What they’ve struggled with is keeping that success going.”
It’s Harry and Meghan in Finding Freedom 2: Back in Blighty | Marina Hyde
Several industry insiders compared them to the Obamas, whose production company Higher Ground had a multi-year deal with Netflix that was reduced to a “first look” deal in 2024. Their Spotify deal also ended in 2022.
Shapiro said the Sussexes haven’t yet shown they can attract big audiences beyond content tied to their royal family experiences. “Through no fault of their own, the Sussexes weren’t ready for this moment,” he said. “It turns out that, apart from marrying a prince, Meghan Markle isn’t all that special. And apart from being born into royalty, Harry isn’t all that interesting.”
Navarra said: “There’s huge curiosity about them, but being curious about a person isn’t the same as wanting everything they create. Celebrity gives you a head start in distribution, but it’s not a content plan. Harry and Meghan show that you can inherit massive attention and still have to win over the audience every single time. To me, that’s the really interesting change.”
View image in fullscreen: Meghan, as Rachel Zane, with Patrick J Adams, as Michael Ross, in a scene from Suits. Photograph: USA Network/NBCU Photo Bank/Getty Images
So it’s understandable that Meghan is reportedly returning to a reliable acting career she paused after marrying Harry. Initial reports from Australia about a UK-based role for Meghan were supported by Tina Brown, the former editor of Vanity Fair and founding editor of the Daily Beast.
Brown said this was driven by Meghan’s positive experience as a celebrity judge on MasterChef Australia last month. “She finally realized how much easier and more fun it is to perform in a hit show that someone else created,” Brown wrote.
“She was back on the market, and it didn’t take long for Hollywood’s big deal machine, WME, the talent agency that still represents her, to find her a role.”
Sources close to the Sussexes haven’t denied these reports.
On Friday night, it was reported that Meghan was in talks to return to acting in Netflix’s series The Gentlemen. According to Variety, she was discussing joining the third season of the show created by Guy Ritchie.
However, the couple isn’t leaving the media production business. Archewell has become a more traditional production company. Its upcoming Netflix projects include a polo drama and a film adaptation of the romantic novel Meet Me at the Lake. Several sources familiar with the company said there are also projects in the works beyond Netflix.
In practical terms, moving back to the UK creates few issues for their media goals. It’s common for major production companies to be based outside Hollywood and make shows away from the US, and the UK remains a major production hub.
As for Harry, he—or anyone else—will find it hard to match the massive media success of his memoir, Spare. He’s focusing on the Invictus Games coming to Birmingham next year. Meanwhile, Meghan has suggested that any return as a business podcaster might depend on how her lifestyle brand progresses.
“I would love to bring the show back when I’m at a different stage of my founder journey,” she said last summer, explaining why she put her Confessions of a Female Founder podcast on hold. “I think a different time will be so exciting to compare and contrast.”
Frequently Asked Questions
Here is a list of FAQs about the future of Harry and Meghans ventures in the US ranging from basic context to deeper analysis
General Background
1 What exactly is the American dream in this context
For Harry and Meghan it refers to their goal of building a financially independent life in Montecito California away from the British royal family This includes lucrative media deals their Archewell charity and building a brand as global humanitarian figures
2 Why do people think the dream is ending
The main reasons are the end of their Spotify podcast deal lukewarm reception to some of their projects declining public approval ratings in both the US and UK and the perception that they havent delivered a blockbuster hit yet
3 Is Harry and Meghans American dream actually over
Not definitively They still have a massive Netflix deal a successful podcast with Lemonada Media and significant personal wealth However the honeymoon phase is over and they are facing the same market pressures as any other celebrity couple
Financial Business Side
4 Did they lose all their money when the Spotify deal ended
No The Spotify deal was worth an estimated 20 million but they have a much larger multiyear deal with Netflix worth roughly 100 million They also have Meghans lifestyle brand and Harrys memoir Spare which was a massive commercial success
5 What happened with Spotify
Their production company Archewell Audio produced a 12episode series called Archetypes in 2022 After that they failed to produce enough content to meet the deals requirements and both parties agreed to part ways Spotifys executive called them grifters which fueled the narrative of failure
6 Is the Netflix deal in danger
Not yet but its under pressure Netflix is a business and expects hits Their first major project the docuseries Harry Meghan was a huge success However their subsequent animated series Pearl was cancelled and they need to deliver upcoming projects to prove their longterm value
