@font-face {
font-family: ‘Guardian Headline Full’;
src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Light.woff2) format(“woff2”),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Light.woff) format(“woff”),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Light.ttf) format(“truetype”);
font-weight: 300;
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-LightItalic.woff2) format(“woff2”),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-LightItalic.woff) format(“woff”),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-LightItalic.ttf) format(“truetype”);
font-weight: 300;
font-style: italic;
}
@font-face {
font-family: ‘Guardian Headline Full’;
src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Regular.woff2) format(“woff2”),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Regular.woff) format(“woff”),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Regular.ttf) format(“truetype”);
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: ‘Guardian Headline Full’;
src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-RegularItalic.woff2) format(“woff2”),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-RegularItalic.woff) format(“woff”),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-RegularItalic.ttf) format(“truetype”);
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: ‘Guardian Headline Full’;
src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Medium.woff2) format(“woff2”),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Medium.woff) format(“woff”),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Medium.ttf) format(“truetype”);
font-weight: 500;
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-MediumItalic.woff2) format(“woff2”),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-MediumItalic.woff) format(“woff”),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-MediumItalic.ttf) format(“truetype”);
font-weight: 500;
font-style: italic;
}
@font-face {
font-family: ‘Guardian Headline Full’;
src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Semibold.woff2) format(“woff2”),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Semibold.woff) format(“woff”),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Semibold.ttf) format(“truetype”);
font-weight: 600;
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-SemiboldItalic.woff2) format(“woff2”),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-SemiboldItalic.woff) format(“woff”),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-SemiboldItalic.ttf) format(“truetype”);
font-weight: 600;
font-style: italic;
}
@font-face {
font-family: ‘Guardian Headline Full’;
src: url(https:@font-face { font-family: ‘Guardian Headline Full’; src: url(‘https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Bold.woff2’) format(‘woff2’), url(‘https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Bold.woff’) format(‘woff’), url(‘https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Bold.ttf’) format(‘truetype’); font-weight: 700; font-style: normal; }
@font-face { font-family: ‘Guardian Headline Full’; src: url(‘https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-BoldItalic.woff2’) format(‘woff2’), url(‘https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-BoldItalic.woff’) format(‘woff’), url(‘https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-BoldItalic.ttf’) format(‘truetype’); font-weight: 700; font-style: italic; }
@font-face { font-family: ‘Guardian Headline Full’; src: url(‘https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Black.woff2’) format(‘woff2’), url(‘https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Black.woff’) format(‘woff’), url(‘https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Black.ttf’) format(‘truetype’); font-weight: 900; font-style: normal; }
@font-face { font-family: ‘Guardian 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) {Here is the CSS with the same meaning, written in a cleaner and more natural style:
“`css
.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-top: 12px;
padding-bottom: 12px;
}
.content__main-column–interactive p + .element-atom {
margin-top: 12px;
margin-bottom: 12px;
padding-top: 0;
padding-bottom: 0;
}
.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”] {
display: block;
width: 100%;
max-width: 620px;
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;
}
}
[data-article-theme=”News”] {
–active-pillar-100: #660505;
–active-pillar-200: #8b0000;
–active-pillar-300: #ab0613;
–active-pillar-400: #c70000;
–active-pillar-500: #ff5943;
–active-pillar-600: #ffbac8;
}
[data-article-theme=”Lifestyle”] {
–active-pillar-100: #510043;
–active-pillar-200: #650054;
–active-pillar-300: #7d0068;
–active-pillar-400: #bb3b80;
–active-pillar-500: #ffabdb;
–active-pillar-600: #fec8d3;
}
[data-article-theme=”Culture”] {
–active-pillar-100: #3e3323;
–active-pillar-200: #574835;
–active-pillar-300: #6b5840;
–active-pillar-400: #866d50;
–active-pillar-500: #eacca0;
–active-pillar-600: #e7d4b9;
}
[data-article-theme=”Sport”] {
–active-pillar-100: #003c60;
–active-pillar-200: #004e7c;
–active-pillar-300: #005689;
–active-pillar-400: #0077b6;
–active-pillar-500: #00b2ff;
–active-pillar-600: #90dcff;
}
[data-article-theme=”Opinion”] {
–active-pillar-100: #4b2e2e;
–active-pillar-200: #6b3b3b;
–active-pillar-300: #8b4747;
–active-pillar-400: #ab5454;
–active-pillar-500: #cb6161;
–active-pillar-600: #eb6e6e;
}
:root[data-article-theme=”Labs”] {
–active-pillar-100: #09615b;
–active-pillar-200: #0c7a73;
–active-pillar-300: #65a897;
–active-pillar-400: #69d1ca;
–active-pillar-500: #a8e3df;
–active-pillar-600: #dcf4f3;
–active-pillar-700: #f3fbfb;
}
:root[data-article-theme=”SpecialReport”] {
–active-pillar-100: #222527;
–active-pillar-200: #303538;
–active-pillar-300: #3f464a;
–active-pillar-400: #595c5f;
–active-pillar-500: #abc2c9;
–active-pillar-700: #e4e5e8;
}
:root[data-article-theme=”SpecialReportAlt”] {
–active-pillar-100: #2b2b2a;
–active-pillar-200: #b9300a;
–active-pillar-300: #ff663d;
–active-pillar-700: #ebe6e1;
–active-pillar-800: #f5;
}
“`:root{–dateline: #606060;–headerBorder: #dcdcdc;–captionText: #999;–captionBackground: hsla(0, 0%, 7%, .72)}.furniture-wrapper{position:relative;display:grid;grid-template-areas:”portrait” “title” “headline” “standfirst” “mediacaption” “lines” “meta”;margin-bottom:26px!important}@media (min-width: 61.25em){.furniture-wrapper{grid-column-gap:20px;grid-row-gap:0px;grid-template-areas:none;grid-template-columns:[title-start headline-start standfirst-start mediacaption-start meta-start] repeat(5,1fr) [title-end headline-end standfirst-end mediacaption-end meta-end portrait-start] repeat(5,1fr) [portrait-end];grid-template-rows:[title-start portrait-start] .25fr [title-end headline-start] 1fr [headline-end standfirst-start] .75fr [standfirst-end mediacaption-start] auto [mediacaption-end meta-start] auto [meta-end portrait-end];margin-bottom:0!important}}@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]}}@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] .25fr [title-end headline-start] 1fr [headline-end standfirst-start meta-start] .75fr [standfirst-end meta-end portrait-end]}}.furniture-wrapper .article-header .content__labels>div,.furniture-wrapper [data-gu-name=title] .content__labels>div{padding-top:2px}@media (min-width: 46.25em) and (max-width: 61.24em){.furniture-wrapper .article-header,.furniture-wrapper [data-gu-name=title]{max-width:738px}}@media (min-width: 46.25em) and (max-width: 61.24em){.furniture-wrapper #headline,.furniture-wrapper [data-gu-name=headline],.furniture-wrapper .headline{max-width:738px}}@media (min-width: 61.25em){.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 #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}}.furniture-wrapper .keyline-4,.furniture-wrapper [data-gu-name=lines]{width:100vw;margin-left:-10px;padding-left:10px;position:relative;background-color:#fff;margin-top:-1px;margin-bottom:-1px}@media (min-width: 30em){.furniture-wrapper .keyline-4,.furniture-wrapper [data-gu-name=lines]{margin-left:-20px}.furniture-wrapper .keyline-4>div>div,.furniture-wrapper [data-gu-name=lines]>div>div{padding:0 20px}}@media (min-width: 33.4375em){.furniture-wrapper .keyline-4,.furniture-wrapper [data-gu-name=lines]{padding-left:20px}}@media (min-width: 41.25em){.furniture-wrapper .keyline-4,.furniture-wrapper [data-gu-name=lines]{padding-left:0}}@media (min-width: 46.25em){.furniture-wrapper .keyline-4,.furniture-wrapper [data-gu-name=lines]{max-width:738px}}@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)}.furniture-wrapper #meta,.furniture-wrapper [data-gu-name=meta]{width:100vw;margin-left:-10px;padding-left:10px;position:relative;background-color:#fff}@media (min-width: 46.25em){.furniture-wrapper #meta,.furniture-wrapper [data-gu-name=meta]{margin-right:0;width:auto;max-width:738px}}@media (min-width: 61.25em){.furniture-wrapper #meta,.furniture-wrapper [data-gu-name=meta]{margin-left:unset;padding-left:unSet padding-top to 2px. At widths of 71.25em and above, add a 540px-wide, 1px-high line above the meta section using the header border color. At 81.25em and above, make that line 620px wide. The social and comment elements in the meta section should use the header border color for their borders.
The standfirst section should have a -10px left margin, 8px top padding, 10px side padding, 16px bottom padding, a white background, and relative positioning. Its paragraphs should use normal font weight, 20px font size, and 14px bottom padding. At 46.25em and above, add 2px top padding and set a maximum width of 738px. At 61.25em and above, remove the maximum width and background color. The content standfirst should have a 4px bottom margin. List items should use 20px font size. Links in the standfirst should have no bottom border or background image, but should be underlined with a 6px offset, using the header border color (or #dcdcdc) at 1px thickness. On hover, the underline color should change to the new pillar color. The first paragraph should have a 1px top border using the header border color and no bottom padding. At 71.25em and above, remove the top border from all paragraphs, including the first one, and add a 1px-wide vertical line on the left side of the standfirst using the header border color, positioned at 0.5px from the left. At 81.25em and above, move that line to -0.5px from the left.
The main media section should be relatively positioned, with a 0 top margin, 0 right margin, 2px bottom margin, and -10px left margin. It should be placed in the portrait grid area and span the full viewport width minus any scrollbar width. Any inner divs should be full width with no inline margins, and divs should have no bottom margin. At 30em and above, change the left margin to -20px. At 46.25em and above, change the left margin to -10px and set a maximum width of 738px. At 61.25em and above, the main media section should…The provided text is CSS code, not prose, so there is no natural English to rewrite. If you meant to share a different passage, please send it and I’ll rewrite it as requested.When an ad slot follows an interactive horizontal rule in the main content column, remove the top padding. Pull quotes in interactive articles should be limited to 620 pixels wide. Immersive elements should span the full viewport width, with margins adjusted at each breakpoint: -10px on small screens, -20px from 30em, and progressively wider maximum widths at larger breakpoints (738px at 46.25em, 978px at 61.25em, 1098px at 71.25em, and 1258px at 81.25em), with left margins shifting to -160px and -240px at the two largest breakpoints. Figure captions inside immersive elements get inline padding of 20px from 30em, which is removed at 71.25em. Showcase figures follow similar margin adjustments at 71.25em and 81.25em. Their captions are static and full-width up to 620px, becoming absolutely positioned with a max-width of 140px at 71.25em and 220px at 81.25em. Inline elements are capped at 630px from 61.25em. Figures with the “will-fade-in” class start invisible and shifted down 50px, then fade in and move to their normal position when the “fade-in” class is added. Blockquote paragraphs use a dark text color, and h2 headings are limited to 620px wide. Credits box paragraphs have minimal vertical margins and no top padding. At 71.25em, the interactive main column’s pseudo-element is shifted up 12px and its height increased by 24px. In dark mode, the body background uses a dark background variable unless the user has explicitly set a light color scheme.For dark portrait layout features, the branding image inside the island should not be inverted. The root element, unless the color scheme is set to light, should also keep the branding image uninverted.
Unsafe embed blocks and iframes with the class js-embed__iframe should be displayed as blocks with zero height.
Elements should have no margin. In the apps rendering target, the meta container inside interactive content should have no right margin.
On screens up to 61.24em wide, the media element inside the furniture wrapper should have a bottom margin of -65px, stick to the top, use a #1a1a1a background, and fade in and out with a 0.5s ease-in-out transition, starting fully visible.
On screens between 30em and 61.24em wide, that media element should have -20px left and right margins.
On screens up to 61.24em wide, when the media element fades out it should become fully transparent. The title and headline elements should sit above other content with a z-index of 10, shifted 10px to the left with 10px of left padding.
On screens between 30em and 61.24em wide, the title, headline, standfirst, and meta elements should have -20px horizontal margins and 20px horizontal padding.
On screens up to 61.24em wide, the headline should be relatively positioned. Its inner div should have 32px of bottom padding. The h1 inside it should be white and use a normal font weight. The gradient div inside the headline should be absolutely positioned, 135% tall, sit behind other content, span the full width, and be anchored to the bottom-left. It should have a 12px backdrop blur and a gradient background fading from transparent to #1a1a1a, starting at 120px and continuing to the bottom. It should also use a mask image with a similar vertical fade.
On screens between 26.25em and 61.24em wide, that gradient div should be 140% tall.
On screens up to 61.24em wide, the title should sit above other content with a z-index of 11, with 8px top padding and 1px bottom padding. Links inside the title should use the active pillar 400 color. The standfirst container should have no bottom padding, but paragraphs inside it should have 24px of bottom padding.
On screens up to 61.24em wide, figcaptions should be placed in the mediacaption grid area, relatively positioned, with no background, 12px of bottom padding, 10px of left padding, -10px left margin, no minimum height, full viewport width, and a white background. Spans inside figcaptions should use the caption main media text color.
On screens between 30em and 61.24em wide, figcaptions should have -20px left margin, -1px top margin, and 20px left padding.
On screens between 46.25em and 61.24em wide, figcaptions should have a maximum width of 738px.
On screens up to 61.24em wide, figcaptions with the hidden class should not be displayed. Figcaptions with the video-icon class should show a video camera icon before their span text, using a 17px by 10px inline-block element with a 4px right margin and a background image. Figcaption spans inside video containers and cinemagraphs should be hidden. The inner divs of the lines and meta elements should have no right margin.
On screens between 46.25em and 61.24em wide, the meta element should have 8px of bottom padding.
Figcaptions with the video-icon class should show a video camera icon before their span text, using a 17px by 10px inline-block element with a 4px right margin and a background image.background-repeat: no-repeat; background-size: contain; } @media (max-width: 61.24em) { [data-gu-name=body] { background-color: #fff; margin: 0 -10px; padding: 0 10px; } } @media (max-width: 61.24em) and (min-width: 30em) { [data-gu-name=body] { margin: 0 -20px; padding: 0 20px; } } @media (max-width: 61.24em) { [data-gu-name=body] #maincontent { margin-top: 0; } } article.content–interactive.portrait-layout .furniture-wrapper #headline h1, article.content–interactive.portrait-layout .furniture-wrapper [data-gu-name=headline] h1, article.content–interactive.portrait-layout .furniture-wrapper .headline h1 { font-weight: 500; } article.content–interactive.portrait-layout .furniture-wrapper .standfirst div p, article.content–interactive.portrait-layout .furniture-wrapper #standfirst div p, article.content–interactive.portrait-layout .furniture-wrapper [data-gu-name=standfirst] div p { font-weight: 500; } article.content–interactive.portrait-layout-feature .article__body h2, article.content–interactive.portrait-layout-feature [data-gu-name=body] h2 { font-weight: 200; } article.content–interactive.portrait-layout-feature .article__body h2:has(strong), article.content–interactive.portrait-layout-feature [data-gu-name=body] h2:has(strong) { font-weight: 700; } article.content–interactive.portrait-layout-feature .content__meta-container_dcr>div>gu-island { display: block !important; } article.content–interactive.portrait-layout-feature-dark, article.content–interactive.portrait-layout-feature-dark-no-dropcap { –new-pillar-colour: var( –darkmode-pillar, var(–darkModeFeature) ) !important; –headerBorderColor: #606060; –darkModeFeature: #ff5943; –darkBackground: #1a1a1a; –feature-dark-text: #dcdcdc; –feature-dark-text-meta: #999; –follow-icon-fill: var(–darkModeFeature); –article-meta-lines: var(–headerBorderColor); } article.content–interactive.portrait-layout-feature-dark nav+section, article.content–interactive.portrait-layout-feature-dark-no-dropcap nav+section { display: none; } article.content–interactive.portrait-layout-feature-dark nav+aside, article.content–interactive.portrait-layout-feature-dark-no-dropcap nav+aside { display: none; } article.content–interactive.portrait-layout-feature-dark aside+section, article.content–interactive.portrait-layout-feature-dark-no-dropcap aside+section { display: none; } article.content–interactive.portrait-layout-feature-dark .furniture-wrapper, article.content–interactive.portrait-layout-feature-dark-no-dropcap .furniture-wrapper { background-color: var(–darkBackground); margin: 0 -10px; padding: 0 10px; } @media (min-width: 30em) { article.content–interactive.portrait-layout-feature-dark .furniture-wrapper, article.content–interactive.portrait-layout-feature-dark-no-dropcap .furniture-wrapper { margin: 0 -20px; padding: 0 20px; } } @media (max-width: 61.24em) { article.content–interactive.portrait-layout-feature-dark .furniture-wrapper [data-gu-name=standfirst], article.content–interactive.portrait-layout-feature-dark .furniture-wrapper [data-gu-name=lines], article.content–interactive.portrait-layout-feature-dark .furniture-wrapper [data-gu-name=meta], article.content–interactive.portrait-layout-feature-dark .furniture-wrapper figcaption, article.content–interactive.portrait-layout-feature-dark-no-dropcap .furniture-wrapper [data-gu-name=standfirst], article.content–interactive.portrait-layout-feature-dark-no-dropcap .furniture-wrapper [data-gu-name=lines], article.content–interactive.portrait-layout-feature-dark-no-dropcap .furniture-wrapper [data-gu-name=meta], article.content–interactive.portrait-layout-feature-dark-no-dropcap .furniture-wrapper figcaption { z-index: 10; background-color: var(–darkBackground) !important; } article.content–interactive.portrait-layout-feature-dark .furniture-wrapper figcaption, article.content–interactive.portrait-layout-feature-dark .furniture-wrapper [data-gu-name=meta], article.content–interactive.portrait-layout-feature-dark-no-dropcap .furniture-wrapper figcaption, article.content–interactive.portrait-layout-feature-dark-no-dropcap .furniture-wrapper [data-gu-name=meta] { margin-left: -10px; padding-left: 10px; } } @media (min-width: 61.25em) { article.contFor interactive articles with a dark portrait layout feature, the furniture wrapper gets 20px of padding on both sides. On screens at least 81.25em wide, the furniture wrapper gets decorative elements on both sides: a left element that extends to fill the space outside the 1298px content area, with a dark background and a right border, and a matching right element with the same dark background. The article header and title links and spans inside the furniture wrapper are forced to use the dark mode feature color. On screens at least 61.25em wide, the first child div of the headline gets a top border. The headline h1 is bold and uses the feature dark text color. The headline figure has no top margin and a 2px bottom margin. The meta section has a dark background.The CSS selectors target the meta and branding elements within dark interactive article layouts. They apply styles to the follow wrapper button, setting its fill color to the dark mode feature color and adding a border using the article meta lines color. For branding images, a filter inverts the colors. On wider screens, a pseudo-element before the meta section gets a background color from the header border color. Details and summary elements, including spans inside them, use the feature dark text color. Social media links and buttons in the meta section have borders and text in the article meta lines and dark mode feature colors, respectively, with their SVG icons also styled.In dark feature layouts, social media icons in the meta section are filled with the dark mode feature color. When you hover over these social media links or buttons, the text turns to the dark background color and the background becomes the dark mode feature color, while the icons switch to the dark background fill. All text inside the meta section uses the feature dark meta text color. Links in the meta section use the dark mode feature color, and on hover they keep that same color with the underline matching it as well.For interactive articles with a dark portrait layout feature, links in the meta section use the dark mode text color. Links in the standfirst—including those in list items—have no bottom border, use the dark mode feature color, and have no background image. They are underlined with a 1px line in the dark mode feature color, offset by 6px. On hover, the bottom border remains removed and the underline color stays the dark mode feature color. Paragraphs in the standfirst use the feature dark text color. On screens at least 61.25em wide, the first paragraph in the standfirst of a dark portrait layout feature article is styled as follows:For interactive articles with a dark portrait layout, the first paragraph of the standfirst gets a top border. On wider screens (at least 71.25em), this top border is removed. List items in the standfirst use the dark feature text color. On wider screens, the standfirst’s pseudo-element background matches the header border color. On medium screens (at least 46.25em), the furniture wrapper gets decorative side panels: a left panel with a dark background and right border, and a right panel with a dark background and left border, both extending to the edges of the viewport. On larger screens (at least 61.25em), these side panels are recalculated with different widths and positions.:””;width:calc((100vw – var(–scrollbar-width, 0px) – 978px) / 2);right:calc((100vw – var(–scrollbar-width, 0px) – 978px) / -2)}}@media (min-width: 71.25em){article.content–interactive.portrait-layout-feature-dark .furniture-wrapper:before,article.content–interactive.portrait-layout-feature-dark-no-dropcap .furniture-wrapper:before{content:””;width:calc((100vw – var(–scrollbar-width, 0px) – 1138px) / 2);left:calc((100vw – var(–scrollbar-width, 0px) – 1138px) / -2)}article.content–interactive.portrait-layout-feature-dark .furniture-wrapper:after,article.content–interactive.portrait-layout-feature-dark-no-dropcap .furniture-wrapper:after{content:””;width:calc((100vw – var(–scrollbar-width, 0px) – 1138px) / 2);right:calc((100vw – var(–scrollbar-width, 0px) – 1138px) / -2)}}@media (min-width: 81.25em){article.content–interactive.portrait-layout-feature-dark .furniture-wrapper:before,article.content–interactive.portrait-layout-feature-dark-no-dropcap .furniture-wrapper:before{content:””;width:calc((100vw – var(–scrollbar-width, 0px) – 1298px) / 2);left:calc((100vw – var(–scrollbar-width, 0px) – 1298px) / -2)}article.content–interactive.portrait-layout-feature-dark .furniture-wrapper:after,article.content–interactive.portrait-layout-feature-dark-no-dropcap .furniture-wrapper:after{content:””;width:calc((100vw – var(–scrollbar-width, 0px) – 1298px) / 2);right:calc((100vw – var(–scrollbar-width, 0px) – 1298px) / -2)}}article.content–interactive.portrait-layout-feature-dark .furniture-wrapper .keyline-4 svg,article.content–interactive.portrait-layout-feature-dark .furniture-wrapper [data-gu-name=lines] svg,article.content–interactive.portrait-layout-feature-dark-no-dropcap .furniture-wrapper .keyline-4 svg,article.content–interactive.portrait-layout-feature-dark-no-dropcap .furniture-wrapper [data-gu-name=lines] svg{stroke:var(–headerBorderColor)}article.content–interactive.portrait-layout-feature-dark .furniture-wrapper #meta .meta__social,article.content–interactive.portrait-layout-feature-dark .furniture-wrapper #meta .meta__social ul li a span,article.content–interactive.portrait-layout-feature-dark .furniture-wrapper #meta .meta__comment,article.content–interactive.portrait-layout-feature-dark .furniture-wrapper [data-gu-name=meta] .meta__social,article.content–interactive.portrait-layout-feature-dark .furniture-wrapper [data-gu-name=meta] .meta__social ul li a span,article.content–interactive.portrait-layout-feature-dark .furniture-wrapper [data-gu-name=meta] .meta__comment,article.content–interactive.portrait-layout-feature-dark-no-dropcap .furniture-wrapper #meta .meta__social,article.content–interactive.portrait-layout-feature-dark-no-dropcap .furniture-wrapper #meta .meta__social ul li a span,article.content–interactive.portrait-layout-feature-dark-no-dropcap .furniture-wrapper #meta .meta__comment,article.content–interactive.portrait-layout-feature-dark-no-dropcap .furniture-wrapper [data-gu-name=meta] .meta__social,article.content–interactive.portrait-layout-feature-dark-no-dropcap .furniture-wrapper [data-gu-name=meta] .meta__social ul li a span,article.content–interactive.portrait-layout-feature-dark-no-dropcap .furniture-wrapper [data-gu-name=meta] .meta__comment{border-color:var(–article-meta-lines)}article.content–interactive.portrait-layout-feature-dark .furniture-wrapper figcaption,article.content–interactive.portrait-layout-feature-dark-no-dropcap .furniture-wrapper figcaption{color:var(–feature-dark-text-meta)}article.content–interactive.portrait-layout-feature-dark .article .article__body h2,article.content–interactive.portrait-layout-feature-dark [data-gu-name=body] h2,article.content–interactive.portrait-layout-feature-dark-no-dropcap .article .article__body h2,article.content–interactive.portrait-layout-feature-dark-no-dropcap [data-gu-name=body] h2{font-weight:200}article.content–interactive.portrait-layout-feature-dark .article .article__body h2:has(strong),article.content–interactive.portrait-layout-feature-dark [data-gu-name=body] h2:has(strong),article.cThis CSS targets interactive article layouts with a dark portrait feature and no drop cap. It makes any `h2` containing a `` tag bold, removes background images from lists hidden in print, and adjusts spacing for the first paragraph after the first atom element in various containers.When an article uses the interactive portrait layout with the dark feature and no drop cap, the first paragraph that follows the first element gets 14px of top padding. Also, in that same layout, the first letter of that first paragraph is styled as a drop cap. This applies whether the paragraph comes right after the first element, or after a figure containing an unsafe embed block, a sign-in gate, or another element. It also applies inside the article body, the interactive content container, and the feature body.The first letter of the first paragraph following a specific element—such as a sign-in gate, a figure with an unsafe embed, or another element—should inherit its font family, weight, size, and line height. It should not float, should be uppercase, and should use the default box-sizing, with no right margin, top vertical alignment, and the text block’s text color.
For interactive articles with the “pride” portrait layout, the furniture wrapper gets a colorful radial gradient background and negative margins with padding. On wider screens, the margins and padding adjust. A noise texture overlay is added with a color-burn blend mode and reduced opacity, switching to higher-resolution images at wider breakpoints. The first image uses an overlay blend mode with slightly reduced opacity. Headings in the article body are set to a lighter font weight, but become bold when they contain strong text.The provided text is CSS code, not prose, so it cannot be rewritten into fluent, natural English while preserving its meaning. If you’d like, I can explain what this CSS does in plain English instead.When you hover over a headline link in an interactive opinion article with a portrait layout, the underline becomes 2px thick and shifts down 6px.
In the same layout, byline text that isn’t inside a `gu-island` element is set to 32px with a font weight of 100. On screens at least 71.25em wide, that byline text grows to 50px.
The inner container of the headline has no bottom padding.
The standfirst is positioned relatively. Paragraphs, links, and list items inside the standfirst all use a font weight of 100. On screens at least 61.25em wide, the standfirst has no top padding; on screens at least 71.25em wide, it gets 2px of top padding.
The portrait main media headline wrapper fills its height, is positioned relatively, and hides overflow. It has an `:after` pseudo-element that creates a background with a repeating horizontal line pattern, positioned at the bottom left, 28px tall and full width, sitting behind the content. On screens up to 61.24em wide, this pseudo-element gets a 4px bottom margin.In the opinion portrait layout, the thumbnail figure inside the headline wrapper should span the full width with no left or right margins and an 18px bottom margin. Any inner div in that thumbnail should have no fixed height. The picture element and the inner link div should both use flex display. The thumbnail image should be 120px wide and aligned to the right; on screens 71.25em and wider, it should be 140px wide. The figcaption should be hidden. For landscape thumbnails, the image should be 200px wide, increasing to 240px on screens 61.25em and wider. When there is no thumbnail, add 28px of bottom padding.
In the interactive opinion portrait layout, the first paragraph’s first letter should use a font weight of 300. The h2 headings should use the drop-cap color (defaulting to #8d2700), font weight 300, font size 28px, normal style, normal line height, and an 8px bottom margin; on screens 71.25em and wider, the font size should be 32px.
In the interactive obituary portrait layout, set the pillar color to #c1d8fc, the secondary pillar to #1a1a1a, the dark mode pillar to the new pillar color, the follow text to #dcdcdc, the follow icon fill to the new pillar color, the standfirst text to #dcdcdc, the standfirst link text and border to the new pillar color, the byline to the new pillar color, and the article meta lines to #606060.
When the user prefers dark mode and the article is not set to light mode, set the subheading text, pullquote text, and pullquote icon to the new pillar color; set the blockquote fill to the new pillar color; and set the follow icon fill to the new pillar color.
When the user prefers light mode, invert the branding image inside the gu-island.
In the obituary portrait layout, atom elements should have no padding. Hide any section or aside immediately following a nav, and hide any section immediately following an aside. Also, remove the drop cap from the first paragraph that follows the first atom element, whether or not a sign-in gate sits between them.The text you’ve provided is CSS code, not prose, so there’s no meaningful way to rewrite it as fluent, natural English while keeping the meaning intact. It’s a set of style rules (selectors and declarations), and translating it into English sentences would change it into something else entirely.
If you meant to paste a different piece of text, feel free to share it and I’ll rewrite it for you.In obituary articles with an interactive portrait layout, links inside the main content, feature article container, standard article container, and comment article container should turn gray (#606060) and get a gray underline when hovered over, unless they have the `data-ignore=global-link-styling` attribute. This applies whether the links are in the main content area, the feature body, or the body section.
The furniture wrapper in these articles has a dark background (#1a1a1a) and extends beyond the normal margins. On smaller screens, it stretches 10px on each side with 10px of padding and 4px at the bottom. On screens 30em and wider, the margins increase to 20px, and the social meta section gets 10px of bottom padding. On screens 61.25em and wider, the wrapper shifts its left margin to -20px, keeps 10px of right padding and 20px of left padding, and positions itself relatively. It also adds decorative pseudo-elements before and after it that fill the extra space on either side with the same dark background, with the left one having a gray right border. The social meta section loses its bottom padding at this size.
On screens 71.25em and wider, the pseudo-elements recalculate their width and position based on a 1140px content width instead of 980px. The meta section’s pseudo-element gets a gray background (#606060) and sits behind other content. The standfirst section also gets a pseudo-element with similar styling..trait-layout-obituary .furniture-wrapper [data-gu-name=standfirst]:before{height:100%;left:-.5px}}@media (min-width: 81.25em){article.content–interactive.portrait-layout-obituary .furniture-wrapper:before{width:calc((100vw – 1300px – var(–scrollbar-width, 0) + 2px) / 2);left:calc((100vw – 1300px – var(–scrollbar-width, 0) + 2px) / -2)}article.content–interactive.portrait-layout-obituary .furniture-wrapper:after{width:calc((100vw – 1300px – var(–scrollbar-width, 0) + 2px) / 2);right:calc((100vw – 1300px – var(–scrollbar-width, 0) + 2px) / -2)}article.content–interactive.portrait-layout-obituary .furniture-wrapper .standfirst:before,article.content–interactive.portrait-layout-obituary .furniture-wrapper #standfirst:before,article.content–interactive.portrait-layout-obituary .furniture-wrapper [data-gu-name=standfirst]:before{left:-2px}}article.content–interactive.portrait-layout-obituary .furniture-wrapper .article-header .content__labels,article.content–interactive.portrait-layout-obituary .furniture-wrapper [data-gu-name=title] .content__labels{display:flex;gap:8px;align-items:center}article.content–interactive.portrait-layout-obituary .furniture-wrapper .article-header .content__labels:before,article.content–interactive.portrait-layout-obituary .furniture-wrapper [data-gu-name=title] .content__labels:before{content:”Obituary”;background-color:#c1d8fc;padding:2px 6px 4px;margin:8px 0 4px;display:block;font-size:17px;font-weight:600;width:-moz-max-content;width:max-content;font-family:Guardian Headline,Guardian Egyptian Web,Guardian Headline Full,Georgia,serif;color:#1a1a1a}@media (min-width: 81.25em){article.content–interactive.portrait-layout-obituary .furniture-wrapper .article-header .content__labels:before,article.content–interactive.portrait-layout-obituary .furniture-wrapper [data-gu-name=title] .content__labels:before{font-size:1.25rem}}article.content–interactive.portrait-layout-obituary .furniture-wrapper .article-header .content__labels>div a:hover,article.content–interactive.portrait-layout-obituary .furniture-wrapper [data-gu-name=title] .content__labels>div a:hover{color:#c1d8fc}article.content–interactive.portrait-layout-obituary .furniture-wrapper .article-header .content__labels>div a span,article.content–interactive.portrait-layout-obituary .furniture-wrapper [data-gu-name=title] .content__labels>div a span{color:#c1d8fc}article.content–interactive.portrait-layout-obituary .furniture-wrapper #headline h1,article.content–interactive.portrait-layout-obituary .furniture-wrapper [data-gu-name=headline] h1,article.content–interactive.portrait-layout-obituary .furniture-wrapper .headline h1{font-size:34px;font-weight:200;color:#dcdcdc}@media (min-width: 61.25em){article.content–interactive.portrait-layout-obituary .furniture-wrapper #headline>div:first-child,article.content–interactive.portrait-layout-obituary .furniture-wrapper [data-gu-name=headline]>div:first-child,article.content–interactive.portrait-layout-obituary .furniture-wrapper .headline>div:first-child{border-top:var(–dateline) 1px solid}}article.content–interactive.portrait-layout-obituary .furniture-wrapper #meta a,article.content–interactive.portrait-layout-obituary .furniture-wrapper #meta a:not([data-ignore=global-link-styling]),article.content–interactive.portrait-layout-obituary .furniture-wrapper [data-gu-name=meta] a,article.content–interactive.portrait-layout-obituary .furniture-wrapper [data-gu-name=meta] a:not([data-ignore=global-link-styling]){color:#c1d8fc}article.content–interactive.portrait-layout-obituary .furniture-wrapper #meta .meta__social a,article.content–interactive.portrait-layout-obituary .furniture-wrapper #meta .meta__social button,article.content–interactive.portrait-layout-obituary .furniture-wrapper [data-gu-name=meta] .meta__social a,article.content–interactive.portrait-layout-obituary .furniture-wrapper [data-gu-name=meta] .meta__social button{border-color:var(–dateline);color:#c1d8fc}article.content–interactive.portrait-layout-obituary .furniture-wrapper #meta .meta__social a svgIn an interactive article with a portrait-layout obituary, within the furniture wrapper, the social media icons in the meta section are filled with the color #c1d8fc. When you hover over the social media links or buttons in the meta section, their border and background turn to #c1d8fc, and the text becomes #1a1a1a. The icons inside those hovered links or buttons also change to fill #1a1a1a. Any divs inside the meta section have text colored #999. The social media container, the span inside each social media list item link, and the comment section all have borders colored #606060. The standfirst section has a background color set by the variable –dateline for its pseudo-element before. The first paragraph inside the standfirst has a top border of 1px solid var(–dateline), but on screens at least 71.25em wide, that top border is removed. List items inside the standfirst are colored #dcdcdc. Links inside paragraphs or list items in the standfirst are colored #c1d8fc with a bottom border.1px solid #c1d8fc}article.content–interactive.portrait-layout-obituary .furniture-wrapper .keyline-4 svg,article.content–interactive.portrait-layout-obituary .furniture-wrapper [data-gu-name=lines] svg{stroke:#606060}@media (prefers-color-scheme: dark){article.content–interactive.portrait-layout-obituary:not([data-color-scheme=light]) #article-body>div .element-atom:first-of-type+:first-of-type:first-letter,article.content–interactive.portrait-layout-obituary:not([data-color-scheme=light]) #article-body>div .element-atom:first-of-type+.sign-in-gate+p:first-of-type:first-letter,article.content–interactive.portrait-layout-obituary:not([data-color-scheme=light]) #article-body>div .element-atom:first-of-type+#sign-in-gate+p:first-of-type:first-letter,article.content–interactive.portrait-layout-obituary:not([data-color-scheme=light]) .content–interactive>div .element-atom:first-of-type+:first-of-type:first-letter,article.content–interactive.portrait-layout-obituary:not([data-color-scheme=light]) .content–interactive>div .element-atom:first-of-type+.sign-in-gate+p:first-of-type:first-letter,article.content–interactive.portrait-layout-obituary:not([data-color-scheme=light]) .content–interactive>div .element-atom:first-of-type+#sign-in-gate+p:first-of-type:first-letter,article.content–interactive.portrait-layout-obituary:not([data-color-scheme=light]) #feature-body .element-atom:first-of-type+:first-of-type:first-letter,article.content–interactive.portrait-layout-obituary:not([data-color-scheme=light]) #feature-body .element-atom:first-of-type+.sign-in-gate+p:first-of-type:first-letter,article.content–interactive.portrait-layout-obituary:not([data-color-scheme=light]) #feature-body .element-atom:first-of-type+#sign-in-gate+p:first-of-type:first-letter,article.content–interactive.portrait-layout-obituary:not([data-color-scheme=light]) [data-gu-name=body] .element-atom:first-of-type+:first-of-type:first-letter,article.content–interactive.portrait-layout-obituary:not([data-color-scheme=light]) [data-gu-name=body] .element-atom:first-of-type+.sign-in-gate+p:first-of-type:first-letter,article.content–interactive.portrait-layout-obituary:not([data-color-scheme=light]) [data-gu-name=body] .element-atom:first-of-type+#sign-in-gate+p:first-of-type:first-letter{–drop-cap: #c1d8fc}}
@font-face{font-family:Guardian Headline Full;src:url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Light.woff2) format(“woff2”),url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Light.woff) format(“woff”),url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Light.ttf) format(“truetype”);font-weight:300;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-LightItalic.woff2) format(“woff2”),url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-LightItalic.woff) format(“woff”),url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-LightItalic.ttf) format(“truetype”);font-weight:300;font-style:italic}@font-face{font-family:Guardian Headline Full;src:url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Regular.woff2) format(“woff2”),url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Regular.woff) format(“woff”),url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Regular.ttf) format(“truetype”);font-weight:400;font-style:normal}@font-face{font-family:Guardian Headline Full;src:url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-RegularItalic.woff2) format(“woff2”),url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not@font-face { font-family: ‘Guardian Headline Full’; src: url(‘https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-RegularItalic.woff’) format(‘woff’), url(‘https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-RegularItalic.ttf’) format(‘truetype’); font-weight: 400; font-style: italic; }
@font-face { font-family: ‘Guardian Headline Full’; src: url(‘https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Medium.woff2’) format(‘woff2’), url(‘https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Medium.woff’) format(‘woff’), url(‘https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Medium.ttf’) format(‘truetype’); font-weight: 500; 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-MediumItalic.woff2’) format(‘woff2’), url(‘https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-MediumItalic.woff’) format(‘woff’), url(‘https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-MediumItalic.ttf’) format(‘truetype’); font-weight: 500; font-style: italic; }
@font-face { font-family: ‘Guardian Headline Full’; src: url(‘https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Semibold.woff2’) format(‘woff2’), url(‘https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Semibold.woff’) format(‘woff’), url(‘https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Semibold.ttf’) format(‘truetype’); font-weight: 600; 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-SemiboldItalic.woff2’) format(‘woff2’), url(‘https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-SemiboldItalic.woff’) format(‘woff’), url(‘https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-SemiboldItalic.ttf’) format(‘truetype’); font-weight: 600; font-style: italic; }
@font-face { font-family: ‘Guardian Headline Full’; src: url(‘https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Bold.woff2’) format(‘woff2’), url(‘https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Bold.woff’) format(‘woff’), url(‘https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Bold.ttf’) format(‘truetype’); font-weight: 700; font-style: normal; }
@font-face { font-family: ‘Guardian Headline Full’; src: url(‘https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-BoldItalic.woff2’) format(‘woff2’), url(‘https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-BoldItalic.woff’) format(‘woff’), url(‘https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-BoldItalic.ttf’) format(‘truetype’); font-weight: 700; font-style: italic; }
@font-face { font-family: ‘Guardian Headline Full’; src: url(‘https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Black.woff2’) format(‘woff2’), url(‘https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Black.woff’) format(‘woff’), url(‘https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Black.ttf’) format(‘truetype’); font-weight: 900; font-style: normal; }
@font-face { font-family: ‘Guardian 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://asIt’s time for Mahmoud Seydam’s online lecture on museum architecture. He crouches in front of a step he uses as a table and opens his laptop. “Is Mohammed the only one here?” He takes out his phone and types in the students’ chat group that the lecture is about to begin. Now there are two students. Mahmoud decides to wait a bit for the others to join. “Today, we have a simple presentation: an overview of museum design.” He asks his students to imagine the museum as honey in a glass. “The museum is a beautiful interior space. It becomes something that draws people in.” The internet connection drops and the lecture stops.
Mahmoud gives an online lecture on a laptop in his tent.
Mahmoud, head of engineering sciences and applied arts at the University College of Science and Technology in Khan Younis and a lecturer at al-Aqsa University, doesn’t seem frustrated. He’s used to this. In his usual calm and professional tone, he records a voice message for his students: “Hello everyone … There seems to be an internet problem, so I’ll record the lecture, upload it to YouTube and send you the link.” This is what a day in the life of a university lecturer in Gaza looks like.
Daybreak
“Sleep itself is a struggle. Sleeping isn’t easy while living in tents. Anxiety dominates everything … because there’s no sense of stability. You compare how your life was before the war to your current life and, psychologically, you’re unable to accept this reality. You’re living in a tent, which doesn’t protect you from anything and doesn’t provide any privacy. You can’t even do your work peacefully because of the noise. Not to mention the anxiety about an emergency happening. There was a strike on the tents around us before. There’s fear for the children, of harm to any member of the family. There’s anxiety about being displaced again. We were displaced more than 15 times, including from a place that was uncomfortable, unstable and didn’t support human life, to one that was even worse, sometimes abandoning all our belongings just to save our lives. We slept for three or four nights on the street, on the pavement. You feel a”I feel anxious at night. I wake up around dawn, pray, and check my phone. I make coffee and sit outside the tent to reply to messages from students and colleagues that arrived overnight. I save some of my phone’s battery just for this. It’s easier to send voice notes than to type. This is how I start my day.
Morning
Mahmoud’s first task of the day is to fetch water. He grabs a plastic container and walks to where the water truck stops. His children—three sons and a daughter studying engineering, nursing, and computer science—often help. He carries the water back to the tent and pours it into their tank, then into buckets of different sizes and colours in front of the tent.
“We use these buckets to store some of the water for daily use so it lasts as long as possible, because the tank only holds 200 litres.
“We don’t have any other tanks. They were all destroyed when our house was bombed. And the water doesn’t reach us every day.”
In displacement, we face things we never expected. The tent constantly needs repairs. On top of that, there’s the exhausting task of trying to charge my phone and laptop so I can start my day and do my work. Sometimes we have breakfast; sometimes we don’t. Right now there is flour, so we knead and bake in the tent, but the bread spoils from the heat and then there’s no breakfast. Meals are irregular, but if I get absorbed in work, I forget about food.
Afternoon
Mahmoud starts setting up for the day’s lecture. As soon as he plugs his laptop into the power strip, the system shuts down. He has learned basic solar energy technology to deal with these recurring breakdowns. He grabs a broom, steps on a plastic chair, and cleans dust off the solar panels on top of the tent. He records the museum design lecture, and then it’s time to head to the Scholars Without Borders offices, the college’s temporary headquarters.
Top: Mahmoud cleans dust off his tent’s solar panels; above: the power system he uses to record his lectures
Not everything is online; there are meetings and student issues that require you to be there in person. The distance to Scholars Without Borders is about 6km.
I usually walk because transportation is so difficult: the roads are rough and everything is packed with tents and carts. Today, I took a cart pulled by an old car—the kind usually pulled by a horse or donkey—and then a run-down tuk-tuk. It takes me an hour to get there.
Being in these circumstances and still being able to carry on, to give my all—honestly, I find it incredibly difficult. A person needs the basics of life in place to excel at work. Right now, people don’t even have the bare minimum to live.
The practical side of learning has become extremely difficult. Most sessions are online. Most of the basic tools and materials needed for learning are hard to access or simply unavailable.
From the early stages of the war, we noticed that universities were deliberately targeted. The university has a certain symbolic significance. It brings together all the future talent and potential, whether among students or teaching staff.
At one point, we were displaced in an area between Rafah and Khan Younis, where my university was visible in the distance. I saw with my own eyes the military strikes against the university buildings and facilities. When the ceasefire was broken, a video emerged showing the demolition of all the university buildings, a complete levelling of the site.
We continue with a certain degree of patience and perseverance.
Video footage shows the university buildings being bombed
Evening
Before the war, you could take your family out to eat at a restaurant.
As an architect, I was also very interested in archaeological and heritage sites, and I’d stop by some ofWe used to stroll through antique shops just to browse. That’s all gone now. There’s no time for leisure—we can hardly secure the basic necessities. Our lives run like machines. Every day is identical to the last. My parents and two siblings live in tents nearby, a 10-minute walk away. Because of the war, illness, and old age, my parents have suffered greatly. It’s a duty, so I visit them almost every day to check if they need anything. Sometimes I sit outside my tent and chat with others to relax after a long day. Then I go back to messaging my students. This continues until I fall asleep. From the moment you wake up until you go to bed, you can barely keep up with anything beyond the tasks you must do. Credits Video: Tantesh Media Services Art direction: Harry Fischer, Anaïs Mims, Barry Ainslie and Alessia Amitriano Video editor/producer: Joshua Jacob Video executive producers: Temujin Doran and Augusta Anthony Additional reporting and research: Aseel Mousa and Harriet Barber
Frequently Asked Questions
FAQs First theres the exhausting job of trying to charge my laptop A Day in the Life of a University Lecturer in Gaza
1 What is this article about
Its a firstperson account of a typical day for a university lecturer in Gaza showing how everyday taskslike charging a laptop or getting to classbecome major challenges
2 Why is charging a laptop such a big deal
Gaza often has only a few hours of electricity per day so lecturers must plan their work around power schedules hunt for working outlets or rely on generators and solar panels
3 What does a typical teaching day look like
It usually means teaching large classes often in crowded or damaged buildings grading papers by candlelight or phone light and squeezing in lesson prep whenever electricity is available
4 What are the biggest challenges lecturers face
Frequent power cuts poor internet damaged classrooms limited teaching materials checkpoints and travel delays and the emotional toll of living through conflict
5 How do they teach without reliable electricity
They print materials in advance download resources when the internet works use phone hotspots teach in person as much as possible and adjust lessons to whatever tools are available
6 Do students face the same problems
Yes Students also struggle with power internet and safety which makes attendance and studying hard for everyone
7 How has the war affected universities in Gaza
Many campuses have been destroyed or damaged classes are often held in makeshift spaces and some teaching has moved onlinethough internet access is unreliable
8 What practical tips help lecturers cope
Charge devices whenever power is on keep backup batteries and power banks download materials ahead of time use lowpower devices and share resources with colleagues
9 Why is this story important to read
It shows the human reality behind headlineshow education continues through extraordinary hardship and how much effort goes into something as simple as a charged laptop
10 What can people outside Gaza do to help
Support organizations providing education power and internet access in Gaza share accurate information and advocate for humanitarian aid and protection of schools and universities
