Mapping the global loss of forests due to wildfires

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 in both normal and italic styles. The font files are provided in WOFF2, WOFF, and TrueType formats, hosted on the Guardian’s servers.@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;
}

div#maincontent:focus {
box-shadow: none !important;
}

#init-1, #end-1, #init-2, #end-2, #init-3, #end-3, #init-4, #end-4, #init-5, #end-5,
h2#interactive-slot-1, h2#interactive-slot-2, h2#interactive-slot-3, h2#interactive-slot-4, h2#interactive-slot-5 {
visibility: hidden;
height: 0;
margin: 0;
padding: 0;
border: none;
}

:root {
–fires-bg-color: #0b0a32;
–headline-bg-color: #0b0a32;
–custom-text-color: #fff;
–article-border: #fac99b;
–primary-accent-color: #fac99b;
–secondary-accent-color: #ff5943;
–tertiary-accent-color: #59433c;
–block-quote-fill: var(–primary-accent-color);
–share-button: var(–primary-accent-color);
–share-button-hover: var(–fires-bg-color);
–interactive-block-background-datawrapper: transparent;
–branding-border: var(–tertiary-accent-color);
–section-background: #ffffff;
–interactive-block-background: transparent;
–caption-text: var(–primary-accent-color);
–sub-meta-label-text: #fff;
–dateline: var(–secondary-accent-color);
–sub-meta-background: –fires-bg-color;
–sub-meta-text: var(–primary-accent-color);
–sub-meta-text-hover: var(–fires-bg-color);
–straight-lines: var(–primary-accent-color);
–article-meta-lines: var(–primary-accent-color);
–article-background: var(–fires-bg-color);
}

li:before {
background-color: var(–secondary-accent-color) !important;
}

body {
background-color: var(–fires-bg-color) !important;
}

.content–interactive {
background-color: transparent !important;
}

body .content–interactive h1,
body .article h1 {
order: 1;
text-align: left;
color: #fff;
min-width: 50%;
margin: 0 auto 13px 10px;
color: var(–secondary-accent-color) !important;
}

.content__standfirst p {
margin: 0 auto 13px 10px;
}

.content__label__link span {
margin: 0 0 0 10px !important;
}The container summary has a left margin of 10 pixels and uses a specific accent color for its text. Elements with the data-print-layout attribute set to “hide” are not displayed.

Paragraphs and main headings within interactive content and articles use custom text colors. The main heading font size is set to 3 rem, adjusting to 2.5 rem on medium-sized screens. Secondary headings are styled with a light font weight, a size of 32 pixels, and a custom text color.

The introductory text in interactive content uses a primary accent color and has a maximum width of 320 pixels. Links within articles and interactive content are colored with a secondary accent. The title label link also uses the primary accent color.

The body defines a comprehensive color scheme using CSS custom properties for text, backgrounds, lines, buttons, highlights, and specific brand colors. The overall page background is set with a custom variable.

Article headers and bodies have a transparent background. The main column for interactive content adjusts its width and removes default margins. The first figure and the first atom element have colored bottom borders.

The main interactive article container spans the full viewport width without horizontal scrolling and uses a specific grid area. On larger screens, the layout uses a multi-column grid. The article body occupies the full grid and hides overflow.

A border element is hidden, and the main content area has no top margin. For very wide screens, the grid defines a 1300px central column with a left margin for non-body elements. This central column and margin adjust at various breakpoints for different screen widths.

Non-body elements in the interactive grid have a higher stacking order and receive side padding on larger screens. On Android and iOS, the article body has no padding, and the header is positioned absolutely with a transparent background. Author byline text and links within the meta section also maintain transparency on these mobile platforms.The byline, author links, and title labels are set to use the secondary accent color. The meta-byline component has a left margin of 10px. Author links have a bottom margin of 13px. The title and headline sections have a top padding of 5vh, with the title also having a bottom padding of 4px. The lines element and meta section borders are hidden on Android and iOS.

On Android and iOS, the published date has a top padding of 4px. Social media buttons in the meta section use the secondary accent color for text and borders, and their icons are filled with the same color. Icons in the content meta container are hidden. All non-body elements in the interactive grid have left and right padding of 10px. The social media section in the meta area has no top border, and the comment section is hidden. The share button changes to the secondary accent color with a white icon on hover.

The first atom element figure spans all columns with a bottom margin of 12px. Immersive element figures are full width, up to 1260px, with no side margins, and span from the second-to-last to the second column.

On small screens (under 30em), all non-immersive elements in the main column have 10px side margins. On medium screens (46.25em and above), the main interactive column has a relative position with a vertical line on the left. Non-atom elements are placed in the body grid column.

For different screen sizes, the layout uses specific grid templates:
– Between 46.25em and 61.24em: a three-column layout.
– Between 61.25em and 71.24em: a four-column layout.
– Between 71.25em and 81.24em: a five-column layout with left and right columns.
– Above 81.25em: a five-column layout with wider columns.

The title is positioned 20dvh from the top, full width, with no top margin. On screens between 20em and 46.24em, it moves to 10dvh. Title labels have no border.

The headline is also at 20dvh, full width, with a dark background, padding, and a top border. On medium screens, it moves to 10dvh.

The standfirst is positioned at 20dvh, full width, with a dark background and padding. On medium screens, it moves to 10dvh.

The interactive grid defines areas for headline, standfirst, media, lines, meta, and body.

The meta section is full width, positioned at 20dvh with a dark background and a z-index of 5. On medium screens, it moves to 10dvh. The dateline has a left margin of 10px.

The svelte-scroller-outer is displayed as a block with relative positioning.The CSS code defines styles for a scroller component and includes font-face rules for the Guardian Headline Full font family. The scroller has a block display, relative positioning, and full width. Its foreground is set to a higher z-index and clears floats, while the background container is absolutely positioned with no pointer events and optimized for transform changes. The font-face rules load various weights and styles of the Guardian Headline Full font from the Guardian’s servers, specifying light, regular, medium, and semibold variants in both normal and italic styles, with support for WOFF2, WOFF, and TTF formats.The Guardian uses custom fonts for its headlines and title pieces. These fonts are loaded from their servers in multiple formats like WOFF2, WOFF, and TTF to ensure broad browser compatibility. Each font variation, such as bold or italic, is defined with specific weights and styles.

The page includes a loading overlay with a spinning animation that appears during data fetching. The main content area features a full-screen map and a scrolling narrative section. Text boxes within this section have a styled background, border, and typography using the Guardian’s Egyptian Web font for body text. Certain text spans are highlighted with a colored background for emphasis.The CSS defines a border radius of 12 pixels and loads the Guardian Headline Full font family. This includes several font files in different weights and styles (light, regular, medium, semibold, and their italic versions) from the Guardian’s servers. The files are provided in WOFF2, WOFF, and TrueType formats to ensure broad browser compatibility.Every day in 2024, wildfires burned over 360 square kilometres of forest—an area larger than Malta. By the end of the year, more than 134,000 square kilometres had been consumed by flames, a total greater than the size of England. Over the last 24 years, wildfires have destroyed 1.5The world is losing an area of forest the size of Mongolia to fire, a rate experts warn is unsustainable. While wildfires are a natural part of ecosystems, their scale, frequency, and intensity in carbon-rich forests have surged in recent decades.

Research from the World Resources Institute (WRI) shows fires now destroy more than twice as much tree cover as they did twenty years ago. In 2024 alone, 135,000 square kilometres of forest burned, making it the most extreme wildfire year on record.

Interestingly, research from the University of Tasmania indicates that fires in other landscapes have not increased in the same way. The total area burned globally has actually fallen for decades, partly due to expanding farms in Africa slowing the spread of blazes. However, forests have become a new hotspot for fires.

The rise in forest fires is clear. Four of the five worst years on record have occurred since 2020. WRI research highlights that 2024 was the first time major fires raged simultaneously across both tropical, humid forests like the Amazon and boreal forests, such as those in Canada.

Countries like Brazil, Bolivia, Russia, Australia, and Canada have all endured some of their worst fire seasons in recent years. Heatwaves, intensified by fossil fuel pollution, are driving the risk of extreme blazes higher.

For example, Russia has suffered three of its worst fire seasons since 2020, with 2021 being the most severe. About 45,000 square kilometres of forest burned, mainly across Siberia and the far east. The fires extended so far north that they reached permafrost regions within the Arctic Circle. In 2021, satellites recorded the northernmost wildfire ever. As more permafrost thaws—drying soil, warming air, and reducing humidity—scientists expect an “abrupt increase” in wildfires.The provided text appears to be a series of CSS `@font-face` rules for loading the “Guardian Headline Full” font family in various weights and styles (like normal, italic, bold, etc.) from the Guardian’s website. Each rule specifies the font name, source URLs for different file formats (WOFF2, WOFF, TTF), and the corresponding font weight and style.@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;
}

div#maincontent:focus {
box-shadow: none !important;
}

body {
–primary-text-color: #121212;
–secondary-text-color: #707070;
–tertiary-text-color: #707070;
–primary-bg-color: #ffffff;
–secondary-bg-color: #f3f3f3;
–tertiary-bg-color: #f6f6f6;
–primary-line-color: #333333;
–secondary-line-color: #dcdcdc;
–border-divider-color: #dcdcdc;
–axis-color: #bababa;
–primary-button-color: #121212;
–primary-button-text-color: #ffffff;
–primary-button-highlight-color: #333333;
–highlight-color: #ffe500;
–highlighted-text-color: #121212;
–info-color: #00b2ff;
–news-grey-01: #121212;
–news-grey-02: #707070;
–news-grey-03: #a1a1a1;
–news-grey-04: #bababa;
–news-grey-05: #dcdcdc;
–news-grey-06: #f3f3f3;
–news-core-01: #005689;
–news-core-02: #0094da;
–news-core-03: #c70000;
–news-core-04: #23b4a9;
–news-core-05: #494949;
–news-core-06: #cca36e;
}

@media (prefers-color-scheme: dark) {
:root:not([data-color-scheme=light]) body {
–primary-text-color: #dcdcdc;
–secondary-text-color: #c8c8c8;
–tertiary-text-color: #999999;
–primary-bg-color: #1a1a1a;
–secondary-bg-color: #383838;
–tertiary-bg-color: #121212;
–primary-line-color: #dcdcdc;
–secondary-line-color: #707070;
–border-divider-color: #606060;
–axis-color: var(–news-grey-04);
–primary-button-color: #383838;
–primary-button-text-color: #dcdcdc;
–primary-button-highlight-color: #707070;
–highlight-color: #cda500;
–highlighted-text-color: #121212;
–info-color: #0077b6;
–news-grey-01: #dcdcdc;
–news-grey-02: #c8c8c8;
–news-grey-03: #a1a1a1;
–news-grey-04: #707070;
–news-grey-05: #494949;
–news-grey-06: #383838;
–news-core-01: #0077b6;
–news-core-02: #00b2ff;
–news-core-03: #e33824;
–news-core-04: #23b4a9;
–news-core-05: #494949;
–news-core-06: #cca36e;
}
}

@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;
}This CSS code defines custom fonts and styles for a web page. It first sets up the “Guardian Titlepiece” font in bold, providing multiple file formats for compatibility. Then, it applies styles to various elements, such as setting a white fill for a locator container, adding a red outline to a bounding box, and styling a globe background with a dark blue fill and a semi-transparent white border. Finally, it defines several weights and styles for the “Guardian Headline Full” font family, including light, regular, medium, and semibold, each in both normal and italic versions, with multiple file formats for each.This CSS code defines several custom fonts for use on a website. It includes multiple weights and styles of the “Guardian Headline Full” font, such as light, semibold, bold, and black, each in normal and italic versions. These fonts are loaded from specific URLs in formats like WOFF2, WOFF, and TrueType. Additionally, it defines the “Guardian Titlepiece” font in bold weight. The code also sets some styling rules for elements with specific classes, specifying font families, sizes, and colors.@font-face {
font-family: Guardian Headline Full;
src: 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;
}

.maplibregl-ctrl {
display: none;
}

.map-wrapper.svelte-hbqfww {
display: flex;
align-items: flex-start;
position: relative;
width: 100%;
height: 100%;
}

.locator-wrapper.svelte-hbqfww {
position: absolute;
z-index: 10;
display: flex;
width: 100%;
flex-wrap: wrap;
justify-content: space-between;
padding: 6px;
}

@media (min-width: 46.25em) {
.locator-wrapper.svelte-hbqfww {
width: auto;
top: 0;
flex-direction: row;
gap: 8px;
}
}

.scale-container.svelte-hbqfww {
background: #0b0a32;
border-radius: 8px;
padding: 10px 14px;
box-shadow: 0 2px 6px #00000040;
font-family: Guardian Text Sans Web, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;
font-size: 16px;
color: #fff;
line-height: 16px;
display: flex;
flex-direction: column;
gap: 12px;
max-width: 50%;
height: auto;
}

@media (min-width: 46.25em) {
.scale-container.svelte-hbqfww {
max-width: 200px;
}
}

.key-item.svelte-hbqfww {
display: flex;
align-items: center;
gap: 6px;
margin-bottom: 6px;
width: 100%;
font-weight: 800;
}

.color-box.svelte-hbqfww {
min-width: 18px;
height: 18px;
border-radius: 3px;
}

.color-box.burned.svelte-hbqfww {
background: #ffc100;
}

.color-box.rest.svelte-hbqfww {
background: #b40000;
}

.label.svelte-hbqfww {
font-family: Guardian Text Sans Web, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;
font-size: 12px;
color: #fff;
}

@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;
}The Guardian Headline Full font family includes several styles, each available in multiple formats. The regular style has a font-weight of 400 and normal font-style, with files in woff2, woff, and ttf formats. The italic version also has a weight of 400 but with an italic style. The medium style has a weight of 500 and normal style, while its italic variant is also weight 500 with italic style. The semibold style is weight 600 with normal style, and its italic version is weight 600 with italic style. The bold style is weight 700 with normal style, and its italic version is weight 700 with italic style. The black style is available with weight and style details, provided in woff2, woff, and ttf formats.@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;
}

.annotation.svelte-136dqs3 .annotation-wrapper.svelte-136dqs3 svg.svelte-136dqs3 {
width: 60px;
height: 65px;
overflow: visible;
fill: none;
stroke: #fff;
}

.annotation.svelte-136dqs3 .annotation-wrapper.svelte-136dqs3 svg.svelte-136dqs3 path.svelte-136dqs3 {
stroke-width: .1px;
}

.annotation.svelte-136dqs3 .text-container.svelte-136dqs3 {
align-self: flex-start;
position: relative;
background-color: #0b0a32;
border: 1px solid white;
border-radius: 5px;
padding: 4px 8px 8px;
width: 100%;
}

.annotation.svelte-136dqs3 .text-container.svelte-136dqs3 p.svelte-136dqs3 {
font-size: 13px;
line-height: 16px;
}

.annotation.top.svelte-136dqs3 svg.svelte-136dqs3 {
position: absolute;
width: 20px;
height: 50px;
left: -10px;
}

.annotation.bottom.svelte-136dqs3 svg.svelte-136dqs3 {
position: absolute;
width: 20px;
height: 55px;
left: -10px;
transform: rotate(180deg);
}

.annotation.bottom.svelte-136dqs3 .text-container.svelte-136dqs3 {
transform: translateY(33px) translate(-50%);
}

.annotation.svelte-136dqs3 p.svelte-136dqs3 {
font-family: Guardian Text Sans Web, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;
font-size: 14px;
max-width: 200px;
height: auto;
text-align: initial;
font-weight: 500;
color: #fff;
}

.annotation.svelte-136dqs3 .step.svelte-136dqs3 {
font-family: Guardian Text Sans Web, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;
font-size: 14px;
width: 100%;
color: #9ea9c0;
border-top: 2px solid #9ea9c0;
border-style: dotted;
text-align: end;
}

.bottom-right.svelte-136dqs3 .annotation-wrapper.svelte-136dqs3 svg.svelte-136dqs3 {
position: absolute;
transform: scaleY(-1);
left: -12px;
}

.bottom-right.svelte-136dqs3 .annotation-wrapper.svelte-136dqs3 .text-container.svelte-136dqs3 {
transform: translateY(calc(-50% + 65px)) translate(25px);
}

.bottom-left.svelte-136dqs3 .annotation-wrapper.svelte-136dqs3 svg.svelte-136dqs3 {
position: absolute;
transform: rotate(180deg);
left: -48px;
}

.bottom-left.svelte-136dqs3 .annotation-wrapper.svelte-136dqs3 .text-container.svelte-136dqs3 {
transform: translateY(calc(-50% + 50px)) translate(calc(-100% – 25px));
}

.top-right.svelte-136dqs3 .annotation-wrapper.svelte-136dqs3 svg.svelte-136dqs3 {
position: absolute;
top: -65px;
left: -12px;
}

.top-right.svelte-136dqs3 .annotation-wrapper.svelte-136dqs3 .text-container.svelte-136dqs3 {
position: relative;
transform: translateY(calc(-50% – 65px)) translate(25px);
}

.top-left.svelte-136dqs3 .annotation-wrapper.svelte-136dqs3 svg.svelte-136dqs3 {
position: absolute;
top: -65px;
left: -47px;
transform: scaleX(-1);
}

.top-left.svelte-136dqs3 .annotation-wrapper.svelte-136dqs3 .text-container.svelte-136dqs3 {
position: relative;
transform: translateY(calc(-50% – 65px)) translate(calc(-100% – 23px));
}

@font-face {
font-family: Guardian Headline Full;
src: url(https://assets.gThe font “Guardian Headline Full” is available in several styles, each with different weights and styles. The Light version (weight 300) comes in normal and italic styles, the Regular version (weight 400) also includes normal and italic, the Medium version (weight 500) has both normal and italic, and the Semibold version (weight 600) is offered in normal and italic as well. Each style is provided in WOFF2, WOFF, and TrueType formats from the same source directory.In 2023, Canada experienced another record-breaking fire season, with 78,000 km² of forest burned. The resulting smoke claimed the life of nine-year-old Carter Vigh, who had asthma and was playing at a summer camp in British Columbia, along with 82,000 others. Toxic pollutants from the fires spread so widely that Europe accounted for a quarter of the deaths. Firefighting resources were stretched thin across several provinces, and mass evacuations were necessary.

The fires reached previously untouched areas in the boreal north, and weather stations recorded temperatures up to 10°C above average.@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;
}

div#maincontent:focus {
box-shadow: none !important;
}

.locator-container.svelte-17yrru6 {
overflow: visible;
fill: #fff;
}

.boundingBox.svelte-17yrru6 {
stroke: #ff5943;
stroke-width: 2px;
fill: none;
}

.globe-background.svelte-17yrru6 {
fill: #0b0a32;
stroke: #fff;
stroke-width: 4px;
stroke-opacity: 0.7;
}

.svg-locator.svelte-17yrru6 {
overflow: visible;
}

@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-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;
}

.scale-container {
position: relative;
}

text {
font-family: Guardian Text Sans Web, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;
font-size: 12px;
color: #fff;
}

.maplibregl-ctrl {
display: none;
}

.map-wrapper.svelte-hbqfww {
display: flex;
align-items: flex-start;
position: relative;
width: 100%;
height: 100%;
}

.locator-wrapper.svelte-hbqfww {
position: absolute;
z-index: 10;
display: flex;
width: 100%;
flex-wrap: wrap;
justify-content: space-between;
padding: 6px;
}

@media (min-width: 46.25em) {
.locator-wrapper.svelte-hbqfww {
width: auto;
top: 0;
flex-direction: row;
gap: 8px;
}
}

@media (min-width: 46.25em) {
.scale-container.svelte-hbqfww {
max-width: 200px;
}
}

.key-item.svelte-hbqfww {
display: flex;
align-items: t;
gap: 6px;
margin-bottom: 6px;
width: 100%;
font-weight: 800;
}

.color-box.svelte-hbqfww {
min-width: 18px;
height: 18px;
border-radius: 3px;
}

.color-box.burned.svelte-hbqfww {
background: #ffc100;
}

.color-box.rest.svelte-hbqfww {
background: #b40000;
}

.label.svelte-hbqfww {
font-family: Guardian Text Sans Web, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;
font-size: 12px;
color: #fff;
}

@font-face {
font-family: Guardian Headline Full;
src: url(https://assets.guim.co.uk/static/@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;
}

.annotation.svelte-136dqs3 .annotation-wrapper.svelte-136dqs3 svg.svelte-136dqs3 {
width: 60px;
height: 65px;
overflow: visible;
fill: none;
stroke: #fff;
}

.annotation.svelte-136dqs3 .annotation-wrapper.svelte-136dqs3 svg.svelte-136dqs3 path.svelte-136dqs3 {
stroke-width: .1px;
}

.annotation.svelte-136dqs3 .text-container.svelte-136dqs3 p.svelte-136dqs3 {
font-size: 13px;
line-height: 16px;
}

.annotation.top.svelte-136dqs3 svg.svelte-136dqs3 {
position: absolute;
width: 20px;
height: 50px;
left: -10px;
}

.annotation.bottom.svelte-136dqs3 svg.svelte-136dqs3 {
position: absolute;
width: 20px;
height: 55px;
left: -10px;
transform: rotate(180deg);
}

.annotation.bottom.svelte-136dqs3 .text-container.svelte-136dqs3 {
transform: translateY(33px) translate(-50%);
}

.bottom-right.svelte-136dqs3 .annotation-wrapper.svelte-136dqs3 svg.svelte-136dqs3 {
position: absolute;
transform: scaleY(-1);
left: -12px;
}

.bottom-right.svelte-136dqs3 .annotation-wrapper.svelte-136dqs3 .text-container.svelte-136dqs3 {
transform: translaFor the bottom-left annotation, the SVG is positioned absolutely and rotated 180 degrees, with a left offset of -48px. The text container is transformed by moving it up by 50% minus 50px and left by its full width plus 25px.

For the top-right annotation, the SVG is positioned absolutely, placed 65px above and 12px to the left. The text container is relatively positioned and transformed by moving it down by 50% plus 65px and right by 25px.

For the top-left annotation, the SVG is positioned absolutely, placed 65px above and 47px to the left, and flipped horizontally. The text container is relatively positioned and transformed by moving it down by 50% plus 65px and left by its full width plus 23px.

Additionally, custom fonts are loaded from the Guardian’s assets. The font family “Guardian Headline Full” includes light, regular, and medium weights, each with normal and italic styles, provided in WOFF2, WOFF, and TTF formats.The following CSS defines several font faces for the Guardian Headline and Guardian Titlepiece font families, specifying their source files, weights, and styles. It also includes styling for a specific element with the class `.gv-canada-atom.svelte-yokgmp`, setting its position, dimensions, and aspect ratio, with a media query adjusting these properties for specific screen sizes.

Separately, in 2024, wildfires were especially extreme across large areas of South America, heavily impacting the Amazon once again. In Brazil alone, 23,000 square kilometers of forest burned, most of it in the Amazon, marking the country’s second-worst year on record. The Brazilian states of Pará, Rondônia, and Mato Grosso experienced some of the fiercest blazes.The fires spread into Indigenous territories and protected areas. Extreme heat and drought, driven by climate change and the El Niño effect, created more dangerous fire conditions. This was further worsened by illegal deforestation, land grabbing, and agricultural clearing.@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;
}

div#maincontent:focus {
box-shadow: none !important;
}

@media (prefers-color-scheme: dark) {
:root:not([data-color-scheme=”light”]) body {
–primary-text-color: #dcdcdc;
–secondary-text-color: #c8c8c8;
–tertiary-text-color: #999999;
–primary-bg-color: #1a1a1a;
–secondary-bg-color: #383838;
–tertiary-bg-color: #121212;
–primary-line-color: #dcdcdc;
–secondary-line-color: #707070;
–border-divider-color: #606060;
–axis-color: var(–news-grey-04);
–primary-button-color: #383838;
–primary-button-text-color: #dcdcdc;
–primary-button-highlight-color: #707070;
–highlight-color: #cda500;
–highlighted-text-color: #121212;
}
}The text appears to be a mix of CSS color variables and font-face rules for a website, likely for The Guardian. Here is a rewritten version in fluent, natural English:

The color scheme includes several shades of grey and core colors. The greys range from light to dark, with hex codes like #dcdcdc, #c8c8c8, #a1a1a1, #707070, #494949, and #383838. The core colors are #0077b6 (a blue), #00b2ff (a lighter blue), #e33824 (a red), #23b4a9 (a teal), #494949 (a dark grey), and #cca36e (a beige).

The font used is “Guardian Headline Full,” which includes multiple styles and weights. Each style is available in several file formats (woff2, woff, and ttf) and is hosted online. The styles range from light to semibold, each with regular and italic versions.The text defines several custom fonts for the Guardian website. It specifies the font family, source files in different formats, and their weights and styles. For example, the “Guardian Headline Full” font includes variations from light to black, both normal and italic. There’s also a “Guardian Titlepiece” font in bold. Additionally, some CSS styles are provided for a locator component, setting properties like colors, strokes, and fills.@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;
}

.scale-container.svelte-1vg4fbh {
position: relative;
}

text.svelte-1vg4fbh {
font-family: Guardian Text Sans Web, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;
font-size: 12px;
color: #fff;
}

@media (min-width: 46.25em) {
.locator-wrapper.svelte-hbqfww {
width: auto;
top: 0;
flex-direction: row;
gap: 8px;
}
}

.scale-container.svelte-hbqfww {
background: #0b0a32;
border-radius: 8px;
padding: 10px 14px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
font-family: Guardian Text Sans Web, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;
font-size: 16px;
color: #fff;
line-height: 16px;
display: flex;
flex-direction: column;
gap: 12px;
max-width: 50%;
height: auto;
}

@media (min-width: 46.25em) {
.scale-container.svelte-hbqfww {
max-width: 200px;
}
}

.key-item.svelte-hbqfww {
display: flex;
align-items: center;
gap: 6px;
margin-bottom: 6px;
width: 100%;
font-weight: 800;
}

.color-box.svelte-hbqfww {
min-width: 18px;
height: 18px;
border-radius: 3px;
}

.color-box.burned.svelte-hbqfww {
background: #ffc100;
}

.color-box.rest.svelte-hbqfww {
background: #b40000;
}

.label.svelte-hbqfww {
font-family: Guardian Text Sans Web, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;
font-size: 12px;
color: #fff;
}

Additionally, there is some styling for annotations, which includes a white-stroked SVG icon and a text container with a dark blue background, white border, and small font size.The annotation’s top section has an SVG element positioned absolutely, 20 pixels wide and 50 pixels tall, placed 10 pixels to the left. The bottom section’s SVG is also positioned absolutely, 20 by 55 pixels, shifted left by 10 pixels, and rotated 180 degrees. The bottom section’s text container is moved down 33 pixels and centered horizontally.

Within the annotation, paragraphs use the Guardian Text Sans Web font, sized at 14 pixels, with a maximum width of 200 pixels. The text is white, left-aligned, and has a medium weight. A step indicator uses the same font and size, colored #9ea9c0, featuring a dotted top border of 2 pixels in that color, and is aligned to the right.

For the bottom-right position, the annotation wrapper’s SVG is flipped vertically and shifted 12 pixels left. Its text container is moved down by 65 pixels and right by 25 pixels. In the bottom-left position, the SVG is rotated 180 degrees and shifted 48 pixels left, while the text container is moved down 50 pixels and left beyond its full width plus 25 pixels.

In the top-right position, the SVG is placed 65 pixels above and 12 pixels left, with the text container positioned 65 pixels above and 25 pixels to the right. For the top-left, the SVG is 65 pixels above, 47 pixels left, and flipped horizontally, while the text container is 65 pixels above and shifted left beyond its full width plus 23 pixels.

The font “Guardian Headline Full” is defined in several weights and styles: light, light italic, regular, and regular italic. Each variant is sourced from WOFF2, WOFF, and TTF files hosted on the Guardian’s assets server.The text defines a custom font family called “Guardian Headline Full” with multiple font files for different weights and styles. Each entry specifies the font’s weight and style, and provides web font file URLs in WOFF2, WOFF, and TTF formats.Australia’s 2019-2020 fire season was so severe it became known as the “Black Summer.” Millions of hectares burned across the country. While the eastern states saw the worst property damage, Western Australia’s forests were hit hardest.

Several factors contributed to the extreme impact: ongoing drought, high winds, heatwaves, and changes in land use. More than 3,000 homes were destroyed, over 30 people died, and an estimated three billion animals perished as vital ecosystems like Stirling Range National Park went up in flames.@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;
}

div#maincontent:focus {
box-shadow: none !important;
}

body {
–primary-text-color: #121212;
–secondary-text-color: #707070;
–tertiary-text-color: #707070;
–primary-bg-color: #ffffff;
–secondary-bg-color: #f3f3f3;
–tertiary-bg-cThe provided text appears to be a mix of CSS color variables and font-face declarations, likely for a website’s design system. Here is a rewritten version in fluent, natural English that describes its purpose and content:

This code defines a set of visual design rules for a website. It first establishes a color palette using CSS variables for various elements like text, backgrounds, lines, and buttons. These colors are specified for a default light theme.

It then includes a media query to adjust these colors for users who prefer a dark theme on their device, creating a separate dark color scheme.

Following the color definitions, the code imports a custom font family named “Guardian Headline Full” from the Guardian’s servers. It specifies several font files in different formats (WOFF2, WOFF, TTF) to ensure broad browser compatibility and defines multiple styles within that family: Light, Light Italic, Regular, Regular Italic, and Medium weights.The font family “Guardian Headline Full” includes several styles: medium italic with a weight of 500, semibold and semibold italic at 600, bold and bold italic at 700, and black and black italic at 900. Each style is available in WOFF2, WOFF, and TrueType formats from the Guardian’s asset server.

Additionally, the “Guardian Titlepiece” font is available in bold (weight 700) in the same formats.

For styling, elements with the class “locator-container” have visible overflow and white fill. Those with “boundingBox” have a red stroke, a 2px stroke width, and no fill. Elements with “globe-background” are filled with a dark blue color and have a stroke applied.The provided text appears to be a mix of CSS code and font-face declarations, not standard English prose. To rewrite it in fluent, natural English while keeping the meaning intact, I would describe what the code does:

This CSS code defines a class for an SVG locator element, making it visible with a white stroke at 70% opacity and 4 pixels wide. It also imports the “Guardian Headline Full” font family in multiple weights and styles (light, regular, medium, semibold, each with normal and italic variants) from the Guardian’s servers, specifying the font files in WOFF2, WOFF, and TrueType formats.The text contains CSS code defining custom fonts for a website, likely The Guardian. It specifies different font weights and styles (like bold, italic) and provides web addresses for the font files in various formats (woff2, woff, ttf).@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-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 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;
}

.annotation.svelte-136dqs3 .annotation-wrapper.svelte-136dqs3 svg.svelte-136dqs3 {
width: 60px;
height: 65px;
overflow: visible;
fill: none;
stroke: #fff;
}

.annotation.svelte-136dqs3 .annotation-wrapper.svelte-136dqs3 svg.svelte-136dqs3 path.svelte-136dqs3 {
stroke-width: 0.1px;
}

.annotation.svelte-136dqs3 .text-container.svelte-136dqs3 p.svelte-136dqs3 {
font-size: 13px;
line-height: 16px;
}

.annotation.top.svelte-136dqs3 svg.svelte-136dqs3 {
position: absolute;
width: 20px;
height: 50px;
left: -10px;
}

.annotation.bottom.svelte-136dqs3 svg.svelte-136dqs3 {
position: absolute;
width: 20px;
height: 55px;
left: -10px;
transform: rotate(180deg);
}

.annotation.bottom.svelte-136dqs3 .text-container.svelte-136dqs3 {
transform: translateY(33px) translate(-50%);
}

.annotation.svelte-136dqs3 p.svelte-136dqs3 {
font-family: ‘Guardian Text Sans Web’, ‘Helvetica Neue’, Helvetica, Arial, ‘Lucida Grande’, sans-serif;
font-size: 14px;
max-width: 200px;
height: auto;
text-align: initial;
font-weight: 500;
color: #fff;
}

.annotation.svelte-136dqs3 .step.svelte-136dqs3 {
font-family: ‘Guardian Text Sans Web’, ‘Helvetica Neue’, Helvetica, Arial, ‘Lucida Grande’, sans-serif;
font-size: 14px;
width: 100%;
color: #9ea9c0;
border-top: 2px solid #9ea9c0;
border-style: dotted;
text-align: end;
}

.bottom-right.svelte-136dqs3 .annotation-wrapper.svelte-136dqs3 svg.svelte-136dqs3 {
position: absolute;
transform: scaleY(-1);
left: -12px;
}

.bottom-right.svelte-136dqs3 .annotation-wrapper.svelte-136dqs3 .text-container.svelte-136dqs3 {
transform: translateY(calc(-50% + 65px)) translate(25px);
}

.bottom-left.svelte-136dqs3 .annotation-wrapper.svelte-136dqs3 svg.svelte-136dqs3 {
position: absolute;
transform: rotate(180deg);
left: -48px;
}

.bottom-left.svelte-136dqs3 .annotation-wrapper.svelte-136dqs3 .text-container.svelte-136dqs3 {
transform: translateY(calc(-50% + 50px)) translate(calc(-100% – 25px));
}

.top-right.svelte-136dqs3 .annotation-wrapper.svelte-136dqs3 svg.svelte-136dqs3 {
position: absolute;
top: -65px;
left: -12px;
}

.top-right.svelte-136dqs3 .annotation-wrapper.svelte-136dqs3 .text-container.svelte-136dqs3 {
position: relative;
transform: translateY(calc(-50% – 65px)) translate(25px);
}

.top-left.svelte-136dqs3 .annotation-wrapper.svelte-136dqs3 svg.svelte-136dqs3 {
position: absolute;
top: -65px;
left: -47px;
transform: scaleX(-1);
}

.top-left.svelte-136dqs3 .annotation-wrapper.svelte-136dqs3 .text-container.svelte-136dqs3 {
position: relative;
transform: translateY(calc(-50% – 65px)) translate(calc(-100% – 23px));
}@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;
}

.gv-australia-atom.svelte-18ymfpr {
position: relative;
width: 100%;
aspect-ratio: 16/10;
height: 100vh;
max-height: 860px;
}

@media (min-width: 20em) and (max-width: 46.24em) {
.gv-australia-atom.svelte-18ymfpr {
aspect-ratio: 5/9;
max-height: 600px;
}
}

How climate change is driving this change

Experts warn that climate change is making wildfires bigger, longer, and more destructive. Hotter, drier conditions are extending fire seasons and fueling more extreme blazes. The years 2023 and 2024 saw the most forest area burned by wildfires on record. They were also the two hottest years ever recorded.

A chart shows how both temperatures and burned forest area have increased since 2000.

Northern latitudes are heating faster than the global average, leading to a surge in boreal forest fires.

James MacCarthy, wildfire research manager with the Global Forest Watch initiative at the World Resources Institute (WRI), said: “Because of where they grow and how climate patterns are changing, boreal and temperate conifer forests are warming and drying faster than most other forests. Fire is a natural part of these ecosystems, but the traits that once helped them survive infrequent burns—like thick bark and seeds that are released in response to fire—are now being overwhelmed as fires grow larger, more frequent, and more severe. Fires are increasingly burning in places that were historically too wet to ignite and rarely caught fire, like peat-rich forests.”

A vicious cycle

What makes burning forests even more concerning is that, normally, they act as carbon sinks. By absorbing CO₂ and storing it in trees, plants, and soil, forests help regulate the climate by reducing greenhouse gases and slowing the pace of global warming. But when they burn down, the carbon they have stored is released into the atmosphere. In 2023 and 2024, forests absorbed only a quarter of the CO₂ they typically do in a year.

MacCarthy warned: “When these forests and peatlands burn, they release carbon that has been locked away in trees and soil for hundreds of years, accelerating climate change and setting the stage for more fire. Smoke from these fires can travel thousands of miles, polluting the air for millions of people, while nearby communities face evacuations, health risks, and mounting costs.”

Calum Cunningham, a research fellow at the University of Tasmania fire centre, said: “Massive forest fire seasons threaten to reshape the atmosphere by releasing…”Huge amounts of CO2 could create a feedback loop: more warming leads to worse fire weather, which leads to more fires. That’s the ultimate fear.

Curbing the damage

Reducing human-caused carbon emissions and addressing climate change is the most important step in tackling fires. But experts say local action is also essential. Halting deforestation, restoring degraded land, and managing fire risk in vulnerable regions can all help curb the damage.

Bolivia’s 2024 fires were its worst on record. More than 10,000 km² of forest burned—double the previous high. Experts warn that worsening drought and the rapid spread of agriculture are fueling a surge in fire activity across the country.@font-face {
font-family: Guardian Headline Full;
src: 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;
}

div#maincontent:focus {
box-shadow: none !important;
}

@media (prefers-color-scheme: dark) {
:root:not([data-color-scheme=light]) body {
–primary-text-color: #dcdcdc;
}
}The text appears to be a CSS code block defining custom color variables and font-face rules for a website, likely for The Guardian. It sets a dark color scheme with shades of grey, blue, red, teal, and gold, and specifies the “Guardian Headline Full” font family in various weights and styles (light, regular, medium, semibold) with their respective web font file sources.@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;
}

.locator-container.svelte-17yrru6 {
overflow: visible;
fill: #fff;
}

.boundingBox.svelte-17yrru6 {
stroke: #ff5943;
stroke-width: 2px;
fill: none;
}

.globe-background.svelte-17yrru6 {
fill: #0b0a32;
stroke: #fff;
stroke-width: 4px;
stroke-opacity: .7;
}

.svg-locator.svelte-17yrru6 {
overflow: visible;
}

@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;
}The text defines several custom fonts for the Guardian website using CSS `@font-face` rules. It specifies the font family, source URLs for different file formats (like WOFF2, WOFF, and TTF), and their corresponding font weights and styles (such as bold, italic, light, regular, and black). Additionally, it includes a CSS class for styling text elements with a specific font family, size, and color.@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 Titlepiece;
src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-titlepiece/noalts-not-hinted/GTGuardianTitlepiece-Bold.woff2) format(“woff2”);@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;
}