@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-tall 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 cap the width at 738px. At 61.25em and above, remove the max-width and background color. The content standfirst should have a 4px bottom margin. List items should use 20px font size. Links inside 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 in the header border color and no bottom padding.
At 71.25em and above, remove the top border from all standfirst paragraphs, including the first one. Add a 1px-wide vertical line on the left side of the standfirst, using the header border color, spanning the full height and positioned at 0.5px from the left. At 81.25em and above, shift 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 span the portrait grid area and be as wide as the viewport minus the scrollbar width. Any inner divs should be full width with no inline margins, and the outer div should have no bottom margin. At 30em and above, change the left margin to -20px. At 46.25em and above, set the left margin to -10px and cap the width at 738px. At 61.25em and above, [text cuts off].The text you provided is CSS code, not prose, so there’s no natural-language meaning to preserve or simplify. If you meant to send a different passage, please paste it and I’ll rewrite it in fluent English.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 transition, starting fully visible. Between 30em and 61.24em, it should have -20px left and right margins. When it fades out, its opacity should be 0. The title and headline elements should sit above it with a z-index of 10, shifted left by 10px with 10px of left padding.
Between 30em and 61.24em, the title, headline, standfirst, and meta 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 should be absolutely positioned, 135% tall, sit behind everything with a z-index of -1, span the full width, and be anchored to the bottom left. It should have a 12px backdrop blur and a gradient background that fades from transparent to #1a1a1a, with a mask that creates a smooth fade. Between 26.25em and 61.24em, the gradient div should be 140% tall.
The title should have a z-index of 11, with 8px of top padding and 1px of bottom padding. Links inside it should use the active pillar 400 color. The standfirst should have no bottom padding, but its paragraphs should have 24px of bottom padding.
Figcaptions should be placed in the media caption 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. Text inside should use the caption main media text color. Between 30em and 61.24em, figcaptions should have -20px left margin, -1px top margin, and 20px left padding. Above 46.25em, they should be at most 738px wide. Hidden figcaptions should not display. Video icon figcaptions should show a small video camera icon before the text. Figcaption text inside video containers and cinemagraphs should be hidden. The inner divs of lines and meta should have no right margin. Above 46.25em, meta should have 8px of bottom padding.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 each side. On screens at least 81.25em wide, the furniture wrapper gets decorative elements on both sides: a left element and a right element, each with a width calculated as half the space between the viewport and 1298px, full height, positioned outside the wrapper, with a dark background. The left one also has a right border. In these dark portrait layout articles, the article header and the 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, the headline data attribute, or the headline class inside the furniture wrapper gets a top border. The h1 inside the headline, headline data attribute, or headline class is bold and uses the feature dark text color. Any figure inside those headline elements has no top margin and a 2px bottom margin. The meta element or meta data attribute inside the furniture wrapper has a dark background.The CSS selectors target the meta section of interactive articles with dark portrait layouts, including both dropcap and no-dropcap versions. They style the FollowWrapper button’s inner elements with a dark mode fill and a border matching the article meta lines. Branding images are inverted. On wider screens, a pseudo-element before the meta section uses the header border color. Details and summary elements, including spans inside summaries, are colored with the feature dark text variable. Social links and buttons within the meta section get borders and text in the article meta line and dark mode feature colors, and their SVG icons are 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 themselves are filled with the dark background color. Text inside divs in the meta section uses the feature dark text meta color. Links in the meta section use the dark mode feature color, and on hover they keep that color with the underline matching as well.In dark-mode portrait feature layouts, links in the meta section use the dark-mode text color. Links in the standfirst have no bottom border, use the dark-mode feature color, and have no background image. They are underlined with a 1px line offset by 6px, using the dark-mode feature color. On hover, the bottom border stays removed and the underline color remains 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 feature layout is styled further.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 in hidden print layouts, and adjusts spacing for the first paragraph that follows the first atom element—accounting for cases where sign-in gates, unsafe embeds, or additional atom elements appear in between. These rules apply across the article body, interactive content, feature body, and named body sections.When an article uses the interactive portrait layout with the dark feature and no drop cap, the first paragraph after 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 first element is followed directly by the paragraph, or by a sign-in gate, another element, or a figure containing an unsafe embed block, and then the paragraph. It also applies within 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, another element, or an embedded figure—in certain interactive article layouts will inherit its font family, weight, size, and line height. It will not float, will be displayed in uppercase, and will use the text block’s text color, with no extra margin and top vertical alignment.
For interactive articles with the “pride” portrait layout, the furniture wrapper has negative side margins and some padding, with a colorful radial gradient background. On wider screens, the margins and padding adjust. A noise texture overlay is added on top with a color-burn blend mode and reduced opacity, and the texture image changes at different screen widths. 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 if they contain bold text, they become bold. In dark mode, further style adjustments apply.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 other 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 first letter of the first paragraph in an interactive obituary article with a portrait layout is styled with a font weight of 400 and a drop cap color of #1a1a1a. Links within the main content, feature article container, standard article container, and comment article container of such articles are colored #1a1a1a with a 1px solid #1a1a1a bottom border, unless they have the data-ignore=”global-link-styling” attribute. When hovered over, these links change appearance.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) with 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, feature body, or body section.
The furniture wrapper in these obituary articles has a dark background (#1a1a1a) and extends beyond the normal content margins. On smaller screens, it stretches 10px on each side with 10px of padding and 4px of bottom padding. On screens at least 30em wide, it stretches 20px on each side with 20px of padding, and the social meta section gets 10px of bottom padding.
On screens at least 61.25em wide, the wrapper shifts to have a -20px left margin and 10px right padding with 20px left padding. It also gains decorative pseudo-elements: a left panel and a right panel, both with the dark background. The left panel has a gray right border. The social meta section loses its bottom padding at this size.
On screens at least 71.25em wide, the left and right panels resize to match a wider content area (1140px instead of 980px). The meta section’s pseudo-element gets a gray background with a z-index of 0. The standfirst section also gets a pseudo-element, though the styling is cut off.@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, the social media icons in the meta section of the furniture wrapper 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 a text color of #999. The social media container, the span inside each social media list item link, and the comment section all have a border color of #606060. The standfirst section has a pseudo-element before it with a background color set by the –dateline variable. 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 have a text color of #dcdcdc. Links inside paragraphs or list items in the standfirst have a text color of #c1d8fc and a bottom border.As the war in Gaza nears its fourth year, the Guardian follows five ordinary Palestinians through their daily lives this week. Each will share the story of their day, revealing the terrible toll of the ongoing conflict.
The flatbed truck is open to the hot summer air. Its metal frame is covered on two sides by draped tarpaulins and at the back by a bedsheet hung on a line. On the tin floor lies a foam mattress and a pillow with a yellow frilled cover.
Mansoura Ibrahim Mohammed Abdel Dayem balances a thin cushion on the metal edge of the truck bed to protect her knees as she crawls in and out. She lowers her foot onto the plastic chair below, then drops to the ground, staggering slightly as she finds her balance. Mansoura is 76 years old. The truck is her home now. All around her, her family lives in tents, the fabric ripped and fraying.
This is a day in the life of a grandmother living in Gaza.
Daybreak
Last night, I stayed awake until 2am. I barely sleep at night because of the mosquitoes and the heat. I fall asleep for a short while, wake up early, pray to God, and wait to hear the call to dawn prayer. When I wake up, I call my grandson to bring over the white plastic chair I need to climb in and out of the truck.
This is where I live now: in the back of a pickup truck. We brought this truck with us when we fled for our lives from Beit Lahia, a city in northern Gaza. Its owners had abandoned it, so we took it with us, displaced from place to place, until we ended up here. When we finally arrived, there was no space for me anywhere else. The tents we have are small, torn, and overcrowded. They fall down on the children. So I was forced to live in the truck. I sleepTo escape the sand, dirt, and insects. That is the story of the truck.
After I wake up, I fold up the mattress and prop it against the wall with the pillows, then use a cloth to sweep the dirt and sand from the tarpaulin floor. I sit with my grandson, and we try to get the tiny gas stove working to boil water for coffee. It’s an old stove – inherited from my own grandfather – and it’s hard to light because there isn’t enough gas, but eventually we get a flame. I boil water in a small pot and brew coffee for my sons and me – a few spoonfuls for each person. The coffee tastes of paraffin.
Mansoura climbs out of the truck where she lives.
Midday
Mansoura’s son holds up the phone for a video call with one of her grandsons, who left Gaza and now lives overseas, and she chats with him for a while. For lunch, Mansoura takes a few basil leaves from a plant the family has grown in a tin can and grinds them with garlic in her mortar and pestle. She adds a chopped tomato and eats it with a little bread.
“This is the salad I used to make at home – back then I would add rosemary, green thyme, and mint. When I see vegetables growing, it reminds me of Beit Lahia, of our farming, crops, and land.
Before the war, I lived like a queen. I had a beautiful life. I was a farmer. I planted and harvested my land. I had animal shelters where I raised livestock, chickens, rabbits, and ducks. I lived a very beautiful life, but it has changed for me.
Now, we have no home, no source of income, and no good food. Life in tents is terrible – actually unbearable. There are insects everywhere, mosquitoes, sand, dirt, garbage, and torn tents. And the wind. In winter, it blows everything away. In summer, we die from the extreme heat. We don’t even have enough space to build a proper bathroom – a person who showers in a tent comes out dirtier than when they went in.
My feeling is that for people my age, death is more honorable than living this life. This isn’t life. We are not living. We are dead. Everything beautiful is gone. It has disappeared, and I have disappeared with it.”
Top: Mansoura cuts basil to prepare a simple lunch; below: clothes have to be washed by hand in a bucket.
After eating, I wash the clothes for my family. Back home, we lived in a two-storey house and had a washing machine – I used to run it on the long cycle, rinsing the clothes once, twice, even three times. Now, even though I am an elderly woman, I wash all the clothes by hand in a plastic bucket.
Afternoon
After lunch, Mansoura sits on the ground outside, gathers her grandchildren around her, and quizzes them about their old lives. Some are young and can barely remember a time before the war: they have spent nearly three years living in tents amid the rubble.
“Where did we live, Mohammed?” Mansoura asks.
“In northern Beit Lahia,” he answers.
“Where in the north?”
“Near 36th Street.”
“Tell them what Beit Lahia was like before the war.”
“Honestly, it was good, better than these days.”
“We will return there,” Mansoura says.
She draws her leather satchel toward her, looking through the pockets.
“Look at what I have in my bag. What is this?” Mansoura asks, dangling an object in front of her.
They answer: “The key of the house.”
“This is the most precious thing I own – the key to our house in the north. It is the key to the house that the occupation forces bulldozed. They flattened it: the house, the trees, the well, even a pen full of animals – they bulldozed it all. We couldn’t take anything with us, no money, no livestock.
I lived through wars before this. None was as bad as this one. During the 52-day war, we sheltered in schools, and we were OK – there wasn’t bombing like this, not the level of killing, and not the destruction of homes. But this war is extremely difficult. The destruction is enormous, the devastation is enormous – and all without any benefit.All of this is for nothing. Mansoura shows her grandchildren the key to their former home, which was destroyed. Life has become very different. Our family never knew hunger before, never knew displacement, bombardment, missiles, killing and destruction in this way or on this scale. The other thing I keep in this bag is a bullet – it was pulled from my son’s back. During the famine, he had nothing to eat and nothing to feed his seven children, so he went to get a bag of flour to feed his children from the aid stations, and they shot him. I keep this as a reminder of what happened – all for the sake of getting food. Honestly, every day is the same for me now. I wake up, arrange the place around us and our sleeping area, clean it, eat, sit, and sleep. The things that make me smile are when I wake up in the morning and find my children safe, when I hear that my grandchildren are well, and when I myself am OK, thank God … This is the greatest life for me and the greatest happiness for me. At night, I call my grandson to bring the chair. Then I crawl back into the truck to sleep. 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 research: Harriet Barber
Frequently Asked Questions
FAQs This Is Where I Live Now in the Back of a Truck A Day in the Life of a Grandmother in Gaza
What is this story about
Its a firstperson account of an older woman in Gaza who is displaced and now living in the back of a truck It follows one ordinary day in her life waking up finding food and water caring for family and holding onto dignity and hope
Who is the grandmother
Shes an elderly Palestinian woman and a grandmother Like many civilians in Gaza she was forced to leave her home and now shelters in a truck with relatives
Where is she living
In the back of a truck an open cargo bed used as shelter It offers little protection from heat cold rain or dust
Why is she living in a truck
Because her home was destroyed or she was ordered to evacuate and there was no other shelter available With so many homes damaged or unsafe people use whatever they can find
What does a typical day look like for her
She wakes early checks on her grandchildren waits in line for water or food tries to cook or prepare something to eat cleans what she can and spends long hours sitting praying and comforting family
What does she eat and drink
Usually very little bread canned food or whatever aid is distributed Clean water is scarce so she rations it carefully
How does she stay clean
With great difficulty She uses small amounts of water for washing faces hands and clothes often reusing it Privacy and hygiene are constant struggles
What are the biggest challenges she faces
Lack of food clean water medicine and privacy plus extreme heat or cold noise insects and the constant fear of bombing
How does she cope emotionally
Through prayer patience memories of her old home and focusing on her grandchildren She says keeping busy and trusting God helps her get through each day
What does displaced mean
It means being forced to leave your home because its no longer safe to stay Displaced people often move multiple times and live in tents schools or makeshift shelters like trucks
What is a day in the life story
Its a piece of writing that follows one person through a normal day showing their routines
