‘It’s not just about survival’: In a frontline Ukrainian city, life continues under the cover of resilience.

This CSS code defines a custom font family called “Guardian Headline Full” with multiple font weights and styles. It includes light, regular, medium, and semibold weights, each with normal and italic variations. The fonts are loaded from the Guardian’s servers in WOFF2, WOFF, and TrueType formats to ensure compatibility across different browsers.@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 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;
}

@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;
}The font “Guardian Headline Full” is available in several styles and weights. The regular italic style uses font-weight 400 and includes files in woff2, woff, and truetype formats. The medium style has a weight of 500 and is normal (not italic). The medium italic also uses weight 500 but is italic. The semibold style is normal with weight 600, and its italic version has the same weight. The bold style is normal with weight 700, and the bold italic is italic with weight 700. The black style is normal with weight 900, and the black italic is italic with weight 900. Each style provides font files in woff2, woff, and truetype formats from the same source directory.The provided text appears to be a mix of CSS font definitions and responsive grid layout rules for a website, likely The Guardian. Here is a fluent, natural English rewrite that simplifies the technical phrasing while preserving the meaning:

This CSS code defines custom fonts and the layout for article content. It specifies font files for “Guardian Headline” in bold, black, and italic styles, and for “Guardian Titlepiece” in bold. The layout uses a grid system that changes based on screen size.

On small screens, the grid is a single column with areas stacked vertically for media, title, headline, standfirst, lines, meta, and body. As the screen gets wider, the layout adjusts: captions on immersive images get padding, the grid adds some spacing, and the main content area gains right padding on medium screens.

On larger screens, the grid becomes two columns—a main content area and a right sidebar—with the various content areas assigned to these columns. On the largest screens, it adds a left border and adjusts the placement of elements like the standfirst and image captions accordingly.For interactive grid figures with immersive captions, set padding to 4 pixels at the top and 0 elsewhere. In various content sections, position lines and meta elements within the grid from row 2, column 1 to row 5, column 2. Adjust lines to fit content height with a 5px top margin, and add an 18px top margin for meta elements.

On wider screens, define grid columns with specific widths for different content areas.

For iOS and Android devices, style article headers with specific fonts and weights. Ensure section names start with a capital letter, adjust top padding for keylines, and set byline authors to bold. Keep image figures at auto height and remove extra margin after atom elements.

Load the Guardian Headline font in Light and Light Italic weights from specified URLs.The provided text appears to be a series of CSS font-face rules for a font family named “Guardian Headline Full.” These rules define different font weights and styles (like regular, italic, medium, bold, etc.) and specify the web addresses where the actual font files (in formats like WOFF2, WOFF, and TTF) can be found for the browser to download and use.@font-face {
font-family: ‘Guardian Headline Full’;
src: url(‘https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Black.woff2’) format(‘woff2’),
url(‘https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Black.woff’) format(‘woff’),
url(‘https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Black.ttf’) format(‘truetype’);
font-weight: 900;
font-style: normal;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

#article-body > div .element-atom:first-of-type + p:first-of-type,
#article-body > div .element-atom:first-of-type {The first paragraph after certain elements like sign-in gates, horizontal rules, or specific content sections gets a top padding of 14 pixels.

For the first letter of the first paragraph following those same elements, apply a special drop cap style. This uses a headline font, sets the size to 111px with a line height of 92px, floats it to the left, makes it uppercase, and colors it with a specific variable. It also adds a right margin of 8px.

Paragraphs that come directly after a horizontal rule should have no top padding.

Elements with the attribute `data-gu-name=”pullquote”` inside main content areas should have a maximum width of 620 pixels.

For showcase elements within the main article containers, the figure caption should be positioned statically, take the full width, and also be limited to a maximum width of 620 pixels.

Immersive elements should span the full viewport width, accounting for the scrollbar. On screens smaller than 71.24em, these immersive elements should have a maximum width of 978px, and their captions should have inline padding.@media (max-width: 71.24em) and (min-width: 30em) {
.element.element–immersive.element-immersive figcaption {
padding-inline: 20px;
}
}

@media (min-width: 46.25em) and (max-width: 61.24em) {
.element.element–immersive.element-immersive {
max-width: 738px;
}
}

@media (max-width: 46.24em) {
.element.element–immersive.element-immersive {
margin-left: -10px !important;
margin-right: 0 !important;
left: 0;
}
}

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

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

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

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

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

@media (min-width: 81.25em) {
.furniture-wrapper {
grid-template-columns: [title-start headline-start meta-start] repeat(3, 1fr) [meta-end standfirst-start];
}
}The grid layout uses five equal-width columns for the title, headline, and standfirst sections, followed by eight equal-width columns for the portrait section. The rows are defined with specific starting and ending points for each section.

For the meta and standfirst sections, certain elements have a fixed width or positioning. Labels within the title area have a small top padding.

The main headline uses a semi-bold font, has a maximum width, and a specific font size, which increases on larger screens. Some decorative lines are hidden on medium to large screens and use a custom border color.

Social and comment elements in the meta section share the same border color, and certain components within the meta container are hidden.

The standfirst section has adjusted margins and padding, with its text using a regular font weight, a specific size, and bottom padding.

The main media area is positioned within the grid, takes full width, and has adjusted margins on smaller screens. Captions are positioned absolutely at the bottom with a custom background and text color, and some caption elements are hidden or styled differently. A caption toggle button is positioned at the bottom right.

On very large screens, the main content column has adjusted positioning and height.The main column for interactive content has a maximum width of 620 pixels for h2 headings. On iOS and Android devices, the dark background color is set to #1a1a1a, with a feature color of #c70000 and a dark mode feature color of #ff5943. The new pillar color uses the primary pillar variable, defaulting to the feature color.

In dark mode on iOS and Android, the new pillar color switches to the dark mode pillar variable, defaulting to the dark mode feature color.

For iOS and Android devices, the first letter of the first paragraph following specific elements in article containers is styled with the secondary pillar color, defaulting to black. The article header height is set to zero, and the furniture wrapper has padding of 4 pixels at the top, 10 pixels on the sides, and no padding at the bottom.

Within the furniture wrapper, content labels use a bold font from the Guardian Headline family, with the new pillar color and capitalized text. Headlines are set to 32 pixels, bold, with 12 pixels of padding at the bottom, and a text color of #121212.For iOS and Android devices, the image elements within furniture wrappers across feature, standard, and comment article containers are styled with a relative position, a top margin of 14px, a left offset of -10px, and a width that fills the viewport minus the scrollbar. Their inner elements, images, and links have a transparent background and the same responsive width.

The standfirst sections in these containers have top and bottom padding and a right margin offset. The paragraphs inside use the Guardian’s headline font family, and the links within are styled consistently.For comment articles, links within the standfirst section should use the site’s main color, have an underline with a specific offset and color, and no background image or bottom border. On iOS and Android devices, when hovering over these links in feature, standard, or comment articles, the underline color should change to the main color. Also, on these devices, the metadata area should have no margin, the author and byline text should be in the main color, and the miscellaneous metadata section should have no padding.For iOS and Android devices, the following CSS rules apply across feature, standard, and comment article containers:

– SVG icons within the meta miscellaneous section use the new pillar color for strokes.
– The caption button in showcase elements is displayed as a flex container, centered with 5px padding, dimensions of 28px by 28px, and positioned 14px from the right.
– The article body has 12px padding on the left and right.
– Non-thumbnail, non-immersive image figures within the article body have no margin, a width calculated as the viewport width minus 24px and the scrollbar width, and an automatic height. Their captions have no padding.
– Immersive image figures have a width calculated as the viewport width minus the scrollbar width.
– Quoted blockquotes within the article body’s prose have a `:before` pseudo-element applied.For iOS and Android devices, the styling for quoted text and links within article bodies is consistent. Quoted text uses a specific color variable, while links are underlined with a distinct color that changes on hover.

In dark mode, the background and text colors adjust for better readability. Headlines, labels, and standfirst text adopt a lighter color against a dark background, and links within these sections also adapt to maintain clarity.This appears to be CSS code for styling web articles on Android and iOS devices. The code sets colors for author bylines, icons, image captions, and blockquotes using custom color variables. It also applies a dark background to various article body containers. The styling targets different article types (feature, standard, comment) across both mobile operating systems.This appears to be a CSS selector targeting the first letter of paragraphs in specific containers on iOS and Android devices. The selector applies to various article containers (feature, standard, comment) and looks for paragraphs following certain elements like `.element-atom`, `.sign-in-gate`, or `#sign-in-gate`.For Android and iOS devices, the first letter of paragraphs following specific elements in various article containers is styled with a custom color variable.For comment articles on Android with the Garnett design, the standfirst section has a top padding of 24 pixels and no top margin. All second-level headings in the main text are set to a font size of 24 pixels.

On iOS, the caption button for feature, standard, and comment articles has specific padding. On Android, the same button has slightly different padding.

When the user’s system is set to dark mode, the theme adjusts various colors for elements like follow buttons, standfirst text, and bylines to use lighter shades and specific dark mode accent colors.

If the page header includes a Guardian organization logo, the branding component is forced to display.

On iOS and Android, labels and main headlines within article headers are given a medium font weight. This also applies to headlines and standfirst paragraphs in the main page header.

The page uses a custom light pink background color (#fff4f2) for a special “weekend essay” theme, which is applied to the overall page and specific article sections. A decorative lines element is hidden.

For larger screens, the layout of the page header is defined using a grid with specific row allocations.

The article title area has a fixed height. Within it, the labels container includes a decorative animated book icon in the bottom-right corner, which becomes larger on wide screens. A horizontal divider line is also added at the bottom of this container, which extends to the full viewport width on mobile and to a fixed width on tablet-sized screens and above.For screens with a minimum width of 61.25em, hide the decorative element after labels within the article header or title section in the furniture wrapper.

For screens at least 71.25em wide, set the height of the article header or title section in the furniture wrapper to 80px. Increase this height to 125px for screens at least 81.25em wide.

Also, for screens at least 81.25em wide, adjust the headline, its data attribute counterpart, or the headline class in the furniture wrapper to have a top margin of -2px.

Within the headline sections of the furniture wrapper, remove bottom padding from the immediate child divs. For the portrait main media headline wrapper inside these sections, set its height to 100%, position it relatively, hide overflow, and add 24px of bottom padding.

Ensure headings, links, and byline text within this wrapper have no maximum width, and apply a hover effect with a 2px thick underline offset by 6px.

Set the line height to 115%, font weight to 500, and font size to 36px for headings, links, and byline text in this wrapper. Increase the font size to 50px for screens at least 71.25em wide.

For the standfirst section in the furniture wrapper, position it relatively and add 4px of top padding. Remove this padding for screens at least 61.25em wide, then add 2px for screens at least 71.25em wide.

Display the branding component within the meta section’s container in the furniture wrapper.

Finally, target the main media section within the furniture wrapper..furniture-wrapper [data-gu-name=media] {
position: relative;
}

@media (min-width: 61.25em) {
.furniture-wrapper #main-media,
.furniture-wrapper [data-gu-name=media] {
grid-area: portrait;
}
}

.furniture-wrapper #main-media > div,
.furniture-wrapper [data-gu-name=media] > div {
position: relative;
}

.furniture-wrapper #main-media div + span,
.furniture-wrapper [data-gu-name=media] div + span {
display: block;
}

.furniture-wrapper #main-media figure,
.furniture-wrapper [data-gu-name=media] figure {
height: 100%;
margin-left: 10px;
}

.furniture-wrapper #main-media figure picture img,
.furniture-wrapper #main-media figure figcaption,
.furniture-wrapper [data-gu-name=media] figure picture img,
.furniture-wrapper [data-gu-name=media] figure figcaption {
width: calc(100vw – 40px – var(–scrollbar-width, 0px));
height: auto;
margin-left: 10px;
padding: 10px 0;
}

.furniture-wrapper #main-media figure figcaption,
.furniture-wrapper [data-gu-name=media] figure figcaption {
margin-bottom: 10px;
padding: 10px;
}

.furniture-wrapper #main-media figure:before,
.furniture-wrapper [data-gu-name=media] figure:before {
content: “”;
display: block;
width: calc(100vw – 20px – var(–scrollbar-width, 0px));
background-image: url(https://interactive.guim.co.uk/atoms/2025/04/2025-weekend-essay-test/assets/v/1764331689/frame.png);
background-size: contain;
background-position: center;
background-repeat: no-repeat;
position: absolute;
top: 0;
left: 10px;
height: inherit;
}

@media (min-width: 46.25em) {
.furniture-wrapper #main-media figure,
.furniture-wrapper [data-gu-name=media] figure {
margin-left: 0;
}
.furniture-wrapper #main-media figure picture img,
.furniture-wrapper [data-gu-name=media] figure picture img {
width: 670px;
height: auto;
margin-left: 5px;
padding: 15px 10px;
}
.furniture-wrapper #main-media figure:before,
.furniture-wrapper [data-gu-name=media] figure:before {
width: 700px;
left: -10px;
}
.furniture-wrapper #main-media figure figcaption,
.furniture-wrapper [data-gu-name=media] figure figcaption {
width: 650px;
margin-left: 15px;
margin-bottom: 15px;
padding: 15px 10px;
}
}

@media (min-width: 61.25em) {
.furniture-wrapper #main-media figure:before,
.furniture-wrapper [data-gu-name=media] figure:before {
width: 470px;
}
.furniture-wrapper #main-media figure picture img,
.furniture-wrapper #main-media figure figcaption,
.furniture-wrapper [data-gu-name=media] figure picture img,
.furniture-wrapper [data-gu-name=media] figure figcaption {
width: 450px;
margin-left: 0;
}
.furniture-wrapper #main-media figure picture img,
.furniture-wrapper [data-gu-name=media] figure picture img {
padding: 10px 0;
}
.furniture-wrapper #main-media figure figcaption,
.furniture-wrapper [data-gu-name=media] figure figcaption {
margin-bottom: 10px;
}
}

@media (min-width: 71.25em) {
.furniture-wrapper #main-media figure:before,
.furniture-wrapper [data-gu-name=media] figure:before {
width: 550px;
}
.furniture-wrapper #main-media figure picture img,
.furniture-wrapper [data-gu-name=media] figure picture img {
width: 520px;
margin-left: 5px;
padding: 10px 5px;
}
.furniture-wrapper #main-media figure figcaption,
.furniture-wrapper [data-gu-name=media] figure figcaption {
width: 510px;
margin-left: 10px;
margin-bottom: 10px;
}
}

@media (min-width: 81.25em) {
.furniture-wrapper #main-media figure:before,
.furniture-wrapper [data-gu-name=media] figure:before {
width: 630px;
}
.furniture-wrapper #main-media figure picture img,
.furniture-wrapper [data-gu-name=media] figure picture img {
width: 600px;
padding: 15px 0;
}
.furniture-wrapper #main-media figure figcaption,
.furniture-wrapper [data-gu-name=media] figure figcaption {
width: 600px;
margin-left: 5px;
margin-bottom: 15px;
}
}

.furniture-wrapper #main-media #caption-button,
.furniture-wrapper [data-gu-name=media] #caption-button {
right: 15px;
bottom: 20px;
}

@media (min-width: 46.25em) {
.furniture-wrapper #main-media #caption-button,
.furniture-wrapper [data-gu-name=media] #caption-button {
right: 45px;
bottom: 30px;
}
}

@media (min-width: 61.25em) {
.furniture-wrapper #main-media #caption-button,
.furniture-wrapper [data-gu-name=media] #caption-button {
right: 15px;
bottom: 20px;
}
}

@media (min-width: 71.25em) {
.furniture-wrapper #main-media #caption-button,
.furniture-wrapper [data-gu-name=media] #caption-button {
right: 20px;
}
}

@media (min-width: 81.25em) {
.furniture-wrap
}For the main media caption button and furniture wrapper with media data, the button is positioned 30px from the bottom. When there’s no media, a centered div displays a bold, underlined, 24px text in a specific color.

On larger screens, the interactive main column aligns to the left without a preceding element. Supporting content with blockquotes uses a light background. The first letter of the opening paragraph is styled with a light weight, while drop caps in specific contexts are large, uppercase, and colored.

Headings at level 2 are orange and light, becoming slightly larger on big screens, and bold if they contain strong text. Figures with iframes also have a light background.

In apps on iOS or Android, author follow sections appear with adjusted spacing and smaller text. Media elements fit their content, and dark mode switches backgrounds to a dark gray.[data-app-os=android] .furniture-wrapper .article-header:after,
[data-app-os=android] .furniture-wrapper [data-gu-name=title] .content__labels:after {
background-image: url(https://interactive.guim.co.uk/atoms/2025/04/2025-weekend-essay-test/assets/v/1764331689/book-white.gif)
}

[data-rendering-target=apps] .furniture-wrapper .meta__byline gu-island[name=FollowWrapper] svg path,
[data-rendering-target=apps] .furniture-wrapper [data-component=meta-byline] gu-island[name=FollowWrapper] svg path,
[data-app-os=ios] .furniture-wrapper .meta__byline gu-island[name=FollowWrapper] svg path,
[data-app-os=ios] .furniture-wrapper [data-component=meta-byline] gu-island[name=FollowWrapper] svg path,
[data-app-os=android] .furniture-wrapper .meta__byline gu-island[name=FollowWrapper] svg path,
[data-app-os=android] .furniture-wrapper [data-component=meta-byline] gu-island[name=FollowWrapper] svg path {
fill: var(–byline-anchor, #ffffff) !important
}

[data-rendering-target=apps] .furniture-wrapper #main-media figure:before,
[data-rendering-target=apps] .furniture-wrapper [data-gu-name=media] figure:before,
[data-app-os=ios] .furniture-wrapper #main-media figure:before,
[data-app-os=ios] .furniture-wrapper [data-gu-name=media] figure:before,
[data-app-os=android] .furniture-wrapper #main-media figure:before,
[data-app-os=android] .furniture-wrapper [data-gu-name=media] figure:before {
background-image: url(https://interactive.guim.co.uk/atoms/2025/04/2025-weekend-essay-test/assets/v/1764331689/frame-white.png) !important
}

body.ios,
body.android {
background-color: #fff
}

body.ios #feature-article-container .furniture-wrapper .content__labels,
body.ios #standard-article-container .furniture-wrapper .content__labels,
body.ios #comment-article-container .furniture-wrapper .content__labels,
body.android #feature-article-container .furniture-wrapper .content__labels,
body.android #standard-article-container .furniture-wrapper .content__labels,
body.android #comment-article-container .furniture-wrapper .content__labels,
body.ios #feature-article-container .furniture-wrapper h1.headline,
body.ios #standard-article-container .furniture-wrapper h1.headline,
body.ios #comment-article-container .furniture-wrapper h1.headline,
body.android #feature-article-container .furniture-wrapper h1.headline,
body.android #standard-article-container .furniture-wrapper h1.headline,
body.android #comment-article-container .furniture-wrapper h1.headline {
font-weight: 500
}

@media (prefers-color-scheme: light) {
html:has(body.ios, body.android) {
background-color: var(–weekend-essay-bg, #fff4f2)
}
}

html:has(body.ios, body.android) body.ios,
html:has(body.ios, body.android) body.android {
–opinion-primary: #c74600;
–byline-anchor: var(–opinion-primary, #c74600);
–primary-pillar: var(–opinion-primary, #c74600)
}

@media (prefers-color-scheme: light) {
html:has(body.ios, body.android) body.ios,
html:has(body.ios, body.android) body.android {
background-color: var(–weekend-essay-bg, #fff4f2)
}
}

@media (prefers-color-scheme: dark) {
html:has(body.ios, body.android) body.ios,
html:has(body.ios, body.android) body.android {
–weekend-essay-bg: #1a1a1a;
–opinion-primary: #ff7f0f
}
html:has(body.ios, body.android) .garnett–pillar-opinion:not(.garnett–type-media).ios .article__body,
html:has(body.ios, body.android) .garnett–pillar-opinion:not(.garnett–type-media).ios .tags {
background-color: unset
}
}

body.ios #feature-article-container,
body.ios #standard-article-container,
body.ios #comment-article-container,
body.android #feature-article-container,
body.android #standard-article-container,
body.android #comment-article-container {
background-color: var(–weekend-essay-bg, #fff4f2)
}

@media (min-width: 61.25em) {
body.ios #feature-article-container .furniture-wrapper,
body.ios #standard-article-container .furniture-wrapper,
body.ios #comment-article-container .furniture-wrapper,
body.android #feature-article-container .furniture-wrapper,
body.android #standard-article-container .furniture-wrapper,
body.android #comment-article-container .furniture-wrapper {
grid-column-gap: 20px;
grid-row-gap: 0px;
grid-template-columns: [title-start headline-start meta-start standfirst-s
}
}The grid is set up with five equal-width columns, starting from the title and ending at the portrait. The rows are arranged so the title and portrait begin together, followed by the headline, standfirst, and metadata, with the portrait ending last.

For both iOS and Android, the title and GIF wrapper in feature, standard, and comment articles uses flexbox to arrange items in a row with space between them. Labels within this wrapper have a bold, 17px font with 115% line height. Links in these labels are colored using a custom variable for the pillar color, with no text transformation.

GIF containers and their images are set to 70px by 70px. Specific classes like `book-gif-white` apply to both the container and image elements.For Android devices, hide the white book GIFs in feature, standard, and comment article containers. In dark mode, hide the regular book GIFs on both iOS and Android, and show the white versions instead. On iOS and Android, add a light gray line at the bottom of the title and GIF wrapper in these article containers. For larger screens, adjust the layout of the title and GIF wrapper in iOS feature and standard articles.The title-and-gif-wrapper element is assigned to the grid area named “title” for several article containers on both iOS and Android. For these same containers on iOS and Android, an after pseudo-element is set to 50% of the viewport width.

In dark mode, the background color of these after pseudo-elements changes to #606060.

On larger screens (61.25em and above), the portrait-mainmedia__headline-wrapper is assigned to the grid area “headline” for the same article containers on both iOS and Android.

For the headline, byline, and related links within these article containers on iOS and Android, the font size is set to 36px with a normal style, medium weight (500), and a line-height of 115%.For feature, standard, and comment articles on iOS and Android, the byline text and links are set to a red color (#c70000) or a custom variable. In dark mode, this changes to a darker orange (#c74600). Avatars are hidden in the byline area. Article headlines have no bottom margin or padding. The byline text is displayed in italics.For iOS and Android devices, the author’s byline in feature, standard, and comment articles should be displayed in a normal font style, not italicized.

In these same article types, the main media container should have an automatic height and a 4:5 aspect ratio, with a transparent background. Any figure elements within this container should take up the full height and have no left margin.

Inside these figures, the inner containers should be positioned normally at the top-left, with a transparent background, no padding, and visible overflow.

For images within these elements, the width should be the full viewport width minus 40 pixels, centered with 20-pixel left and right margins, and have a 25-pixel top margin.The CSS code sets specific styles for images and captions within article containers on iOS and Android devices. Images get a 13px top margin, while captions are set to auto height with block display and a gray text color. For screens wider than 46.25em, figures expand to full width and have a left-aligned decorative element.For iOS and Android devices, the image width within article containers is set to the full viewport width minus 60 pixels, with a left margin of 30 pixels and a top margin of 40 pixels.

On larger screens (61.25em and above), the width adjusts to half the viewport width minus 40 pixels and the scrollbar width, with a left margin of 18 pixels and a top margin of 10 pixels.

For even larger screens (71.25em and above), the positioning is fine-tuned.

On the largest screens (81.25em and above), the width becomes half the viewport width minus 90 pixels and the scrollbar width, with a left margin of 12 pixels, a top margin of -10 pixels, and a top padding of 21 pixels.

In dark mode, specific styles are applied for iOS devices.For iOS and Android devices, apply a background image to specific figure elements within article containers. For the first image in these figures, adjust the width and positioning on various screen sizes. On larger screens, modify the image width, margins, and padding accordingly.For the main media figure element that is the first image, set the height to 100% and the maximum width to 620px as important.

On iOS and Android devices, for feature, standard, and comment article containers, add a pseudo-element before the first image in the main media. Set its width to half the viewport width minus 20px and the scrollbar width, align it to the left, and set its height to 100%.

For viewports at least 81.25em wide, adjust the left position of this pseudo-element to -20px.

For viewports at least 46.25em wide, position the caption button in the main media 45px from the bottom.

For viewports at least 61.25em wide, set the main media area to portrait, limit its maximum width to 620px as important, and allow its height to adjust automatically.

For figure elements within the furniture wrapper, set their position to relative and remove the top margin.

For the inner figure container, position it absolutely 15px from the top and 20px from the left. Set its width to the full viewport width minus 40px and allow its height to adjust automatically.Images within figure elements are set to cover their containers fully. On iOS and Android devices, caption buttons in article containers are positioned 24px from the right and 20px from the bottom.

For screens wider than 46.25em, the inner figure area adjusts to 680px wide with automatic height, positioned 10px from the top and left, while caption buttons move to 25px from the bottom.

On screens wider than 61.25em, figure elements themselves take up half the viewport width minus 20px and any scrollbar width.

Standfirst sections in these article containers have no top margin, 8px top padding, and 10px right padding, with their before pseudo-elements hidden. Paragraphs, links, and list items within the standfirst inner container maintain consistent styling.For Android devices, links, list items, and paragraphs within the standfirst section of feature, standard, and comment articles have a font size of 20px, a normal style, a medium weight, 115% line height, and no bottom padding.

On screens wider than 61.25em, the standfirst section for these article types on both iOS and Android is placed in a grid area named ‘standfirst’.

The meta section for these articles on both iOS and Android has no top padding. The published date within the meta section is positioned relatively. A thin gray line is displayed below the published date, extending the full viewport width on smaller screens. On screens wider than 61.25em, the meta section is placed in a grid area named ‘meta’ and displayed as a block, and the line below the published date is reduced to 50% of the viewport width.

On screens wider than 81.25em, the miscellaneous meta information for these articles on both iOS and Android…For iOS and Android devices, adjust the styles for article containers. In dark mode, set the background color of the published date separator to #606060. Hide certain meta and keyline elements, as well as rich-link sidebars and cutout containers in comment headers. Set the article body background to a custom variable with a fallback color, add top margin, and style horizontal rules with specific dimensions and color. Apply a drop cap style to the first letter of the first paragraph or the paragraph following a horizontal rule, using specific font properties and colors. Also, ensure that strong or bold text within h2 headings uses a medium font weight.This CSS code defines styles for dark mode and specific mobile platforms (iOS and Android). It adjusts colors, typography, and layout elements for article, feature, and comment sections. For example, in dark mode, horizontal rules become a gray color, and first letters in paragraphs are styled. It also hides certain elements on Android and defines transitions for interactive content loading.

Galyna Lutsenko, a crisis psychologist, moves busily among a small group of children seated around a table in a basement in Kherson. This city is unique as Ukraine’s only major city almost directly on the frontline with Russian forces, where people live under the daily threat of attack. She dangles a plasticine butterfly on a thread over a playhouse on the table. She shares that her own house in the city was hit by Russian shelling in 2024, injuring her leg and stomach.

This basement serves as a safe space in a dangerous city. While used as a shelter by locals, other rooms in the complex host activities like yoga, a dance rehearsal, and a craft session where a group of older women screen-print T-shirts bearing the city’s name. A woman engag…Five young children sit around a large table in a windowless room, playing with colorful modeling clay. Galyna Lutsenko, a crisis psychologist, uses art as therapy with these children in an underground shelter that serves as a community center in Kherson.

The streets above explain this subterranean activity. In this city on the right bank of the Dnipro River, supermarket and shop windows are boarded up against shrapnel, while other buildings show damage from artillery and glide bombs. Long stretches of the city’s streets are being draped in anti-drone nets, including the main coastal approach—a 20-minute drive away—which is now enclosed by netting on three sides.

With Russian forces just across the river, daily life for the 60,000 remaining residents—including 5,000 children—is lived under cover, down from an original population of 300,000. “The children are always under pressure,” Lutsenko says. “They are always stressed, with some afraid to come out after the shelling.”

She hands a plasticine turtle to one child and asks if he would like to place it in the house. “It is important to give them choices, to make them feel that it is not just about surviving,” she explains, “but living and feeling everything around them.”

A dance class is also held in an underground center in Kherson—a city that is a hard place to live. Overrun by Russian forces at the start of the war in 2022, it was the only Ukrainian regional capital to be occupied. Nine months later, it was liberated as Russian forces retreated across the Dnipro after a swift Ukrainian offensive.

But any hope that the nightmare was over proved mistaken. Dug in on the far side of the river, Russia has launched escalating attacks. The infamous Russian “drone safari” that began in May 2024, which pursued and killed Kherson’s citizens in the streets, explains why authorities have installed 62 miles (100 km) of anti-drone nets.

While the nets have been effective against small exploding drones and drone bombers, the Russians are now dropping mines from drones or scattering them via rockets. The boom of artillery and the sound of drones are daily occurrences. The “red zone”—a 1 km-deep strip along the Dnipro waterfront facing Russian positions—is the city’s most dangerous area.

Authorities have moved key locations underground, both in the city and the wider region. While it is too dangerous for children to attend school regularly in the city, schools outside the built-up area have relocated below ground.

The city’s main perinatal clinic, located just inside the red zone, is housed in an old Soviet-era bomb shelter with blast doors and a drone-netted entrance. Khrystyna Furman, 23, who has been admitted over concerns of a premature birth, is one of about 1,000 women who use the clinic each month.

“Life goes on,” she says. “We live on the outskirts. This is one of the most dangerous areas of the city here. But everything is OK. I’m local, all my family are local. And this is my home.”

She notes that many people avoid using shelters unless warned of a glide bomb threat, but the nets are different. “They have had a real impact on morale. When you drive under the nets, you suddenly feel OK—protected. But the truth is, nets aren’t everywhere.”

Others prefer to limit their exposure to risk as much as possible. Volodymyr Gorbachevsky, director of the…The director of Kherson’s main perinatal clinic, Volodymyr Gorbachevsky, lives even deeper in the “red zone” than his clinic. He explains that his apartment block, once home to 15 families, now houses only three.

“I don’t go to cafes or restaurants. We stay at home, use the internet, and watch TV. I only leave the house when it’s necessary,” he says. He uses the shelter at work because the nearest one to his building is two blocks away.

In his underground office, Kherson’s military governor, Oleksandr Prokudin, says that—like Gorbachevsky—many people are careful to limit their exposure to the risks of being outside.

“Most people try not to go out unless it’s necessary. This morning I had to attend a couple of events. Twice we had to take cover inside a church and a shop because drones were spotted,” he says.

“Just now I heard a child was injured in the city. So far this morning, we’ve had five people injured by drones and artillery.”

He says there is no other major city in Ukraine like Kherson. “It’s one kilometer from the frontline and from the enemy. If we didn’t have the anti-drone protection we have, we would definitely be a ‘grey zone’ by now [under the control of neither side]. Instead, only the river islands are a grey zone.”

“But while we are trying to evacuate those in the red zone, most people don’t want to leave the region.”

The solution, he says, is to provide more cover against attacks. “We are trying to put nets everywhere people move and walk. Right now, we have more than 100 kilometers of nets. We want 200 kilometers within the next two months, and our plan is to have 300 kilometers by the end of this year.”

In addition, Prokudin plans to expand the network of underground facilities across the region, including clinics and schools. “It’s too dangerous to take kids to underground schools in Kherson,” he says.

“Online schooling is just about surviving, so we are building underground schools, but 30 kilometers from the frontline. We are also focusing on medical facilities, with 12 underground medical facilities in the region being equipped.”

In Myroliubivka, a 15-minute drive from the city, Larysa Rybachuk, the village school director, walks through the empty classrooms above ground and descends a flight of stairs into the basement. In one room, a group of older children listens to a biology lesson. In another, a nursery class has toys spread out on the floor.

She says that during the Russian occupation, only 50 out of 300 children remained. Now the school caters to 120 pupils, many of whose families returned on the wave of optimism that followed Kherson’s liberation.

“The first challenge when we started teaching underground was the lack of space,” says Rybachuk. “For the children who had lived under Russian occupation, many had not gone further than their courtyards. There was a challenge of resocializing them.”

Expanding the basement created more space for teaching. “We have alarms five times a day here. You can’t hear anything, and it makes it easier for the children. They don’t have to run out of class to go to the shelter.”

“The parents decided that they would stay. I live in the village too,” Rybachuk adds. “When we don’t see the drones, it feels like normal life.”

Frequently Asked Questions
Of course Here is a list of FAQs about the theme of resilience and daily life in a frontline Ukrainian city framed in a natural conversational tone

General Understanding
Q What does Its not just about survival actually mean in this context
A It means that while staying alive is the primary goal the people there are actively choosing to liveto maintain their humanity community and culture despite the constant threat Its about finding purpose and normalcy not just enduring

Q Where are these frontline cities
A These are cities and towns close to the active combat zones in eastern and southern Ukraine like Kharkiv Kherson Mykolaiv and communities in the Donbas region They are regularly subjected to shelling drone attacks and missile strikes

Q Isnt it too dangerous for anyone to stay Why dont they all leave
A For many its an incredibly difficult choice Some stay because its their lifelong home to care for elderly relatives to protect their property or because they feel a duty to maintain their community Leaving often means losing everything with no guarantee of a better situation elsewhere

Daily Life Resilience
Q What does daily life even look like under constant threat
A Its a life adapted to the reality of war People plan their days around potential shelling use basements as bomb shelters queue for humanitarian aid and have learned to distinguish between different types of explosions Yet they still go to work children attend online or underground schools and people celebrate birthdays and holidays

Q Can you give a specific example of this resilience
A Examples are everywhere volunteers clearing rubble the morning after an attack farmers harvesting fields within sight of the frontline theaters holding performances in subway stations and neighbors sharing power generators during blackouts to brew coffee for each other

Q How do people cope with the immense psychological stress
A Its an enormous challenge Coping mechanisms include sticking to a routine focusing on helping others dark humor strong community bonds for support and accessing mental health services when available Many simply dont have the luxury to stop and process fully until they are in a safer moment

Practical Realities

Related Posts