The water reached my waist, yet I continued walking—this is the reality of climate breakdown.

The water reached my waist, yet I continued walking—this is the reality of climate breakdown.

The element with the class “canvas.svelte-o3oskp” is set to display as a block.

A custom font named “Guardian Headline Full” is defined with various weights and styles:
– Light (300) in normal and italic
– Regular (400) in normal and italic
– Medium (500) in normal and italic
– Semibold (600) in normal and italic

Each font style is available in WOFF2, WOFF, and TrueType formats from the Guardian’s asset servers.The Guardian website uses specific fonts for its headlines and titles. These include Guardian Headline Full in bold, bold italic, black, and black italic styles, as well as Guardian Titlepiece in bold. Each font is available in multiple file formats like woff2, woff, and truetype for compatibility.

For the carousel section, the title appears in white text using the Guardian Text Sans Web font, with a size of 17px and medium weight. It’s positioned absolutely and includes a link styled in bright green with bold weight and no underline.

The carousel itself is a horizontally scrolling container that snaps items into place as you scroll, with smooth scrolling by default unless the user prefers reduced motion. It hides scrollbars and has a 10px gap between items.

Each card in the carousel is 310px wide and 160px tall, featuring a white background and an image on the right that scales to fit. The image container is 120px by 150px with a gray background, and images zoom in slightly on hover unless reduced motion is preferred. Cards include padding and display as flex containers, aligning content at the bottom.In the carousel component, the card’s image container has no transition effect. The content container within each card is set up as a flexible column layout. Headings and paragraphs inside the content container are styled with a dark gray color and no text decoration. Headings use a specific serif font stack, have a 24px font size, 115% line height, normal weight, and a transparent bottom border. Paragraphs use a sans-serif font stack with a 14px font size and 115% line height, with the first paragraph in bold.

When a card is selected, its image scales up by 20%. Disabled cards display a “Coming soon” overlay in bold text over a semi-transparent white background, positioned at the top left.

The controls section is a flexible row with space-between alignment and includes pagination text in white, using a 12px sans-serif font. Control buttons are circular, 40px in diameter, with a gray border and transparent background, containing 24px icons. The first button’s icon is horizontally flipped.

Font faces for Guardian Headline Full are defined with light, light italic, regular, and regular italic variants, sourcing from woff2, woff, and ttf files.The Guardian Headline Full font family includes various styles and weights, each defined with specific source files in WOFF2, WOFF, and TrueType formats. Here are the details:

– Regular Italic: weight 400, italic style
– Medium: weight 500, normal style
– Medium Italic: weight 500, italic style
– Semibold: weight 600, normal style
– Semibold Italic: weight 600, italic style
– Bold: weight 700, normal style
– Bold Italic: weight 700, italic style
– Black: weight 900, normal style
– Black Italic: weight 900, italic style

All font files are hosted at the specified URLs from the Guardian’s assets domain.@font-face {
font-family: Guardian Headline Full;
src: 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://interactive.guim.co.uk/fonts/garnett/GTGuardianTitlepiece-Bold.woff2) format(“woff2”),
url(https://interactive.guim.co.uk/fonts/garnett/GTGuardianTitlepiece-Bold.woff) format(“woff”),
url(https://interactive.guim.co.uk/fonts/garnett/GTGuardianTitlepiece-Bold.ttf) format(“truetype”);
font-weight: 700;
font-style: normal;
}

.globe-overlay-wrapper {
overflow: auto;
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
left: 0;
z-index: 30;
background: #121212e6;
backdrop-filter: blur(2px);
display: flex;
justify-content: center;
}

.globe-overlay-wrapper .body-width-wrapper {
display: flex;
flex-direction: column;
justify-content: flex-start;
width: 100%;
padding: 22px 16px;
}

@media (min-width: 46.25em) {
.globe-overlay-wrapper .body-width-wrapper {
max-width: 740px;
}
}

@media (min-width: 61.25em) {
.globe-overlay-wrapper .body-width-wrapper {
max-width: 980px;
}
}

@media (min-width: 71.25em) {
.globe-overlay-wrapper .body-width-wrapper {
max-width: 1140px;
}
}

button {
padding: 1px 8px 3px;
border-radius: 30px;
border: 1px solid #fff;
background: var(–Neutral-neutral-neutral-7, #121212);
color: var(–Neutral-neutral-neutral-100, #fff);
font-family: Guardian Text Sans Web, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 130%;
align-self: flex-start;
position: relative;
z-index: 60;
}

button:hover {
cursor: pointer;
}

.canvas-container {
width: 100vw;
height: 100vw;
max-width: min(600px, 100vh – 340px);
max-height: min(600px, 100vh – 340px);
align-self: center;
position: fixed;
top: 40px;
z-index: 40;
}

@media (min-width: 23.4375em) {
.canvas-container {
top: calc(50% – 120px);
left: 50%;
transform: translate(-50%, -50%);
}
}

.carousel-container {
height: calc(100vh – 116px);
height: calc(100dvh – 116px);
position: relative;
z-index: 50;
}

body.android .globe-overlay-wrapper .body-width-wrapper > button {
top: 58px;
}

body.ios .carousel-container {
height: calc(100vh – 180px) !important;
height: calc(100dvh – 180px) !important;
}

body.ios .canvas-container {
top: calc(50% – 170px) !important;
}

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

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

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

@font-face {
font-family: Guardian Headline Full;
src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-RegularItalic.woff2) format(“woff2”),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-RegularItalic.woff) format(“woff”),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-RegularItalic.ttf) format(“truetype”);
font-weight: 400;
font-style: italic;
}This CSS code defines several font styles for the “Guardian Headline Full” font family. It includes different weights and styles (normal and italic) ranging from regular (400) to black (900). Each style is specified with multiple file formats (WOFF2, WOFF, and TrueType) for cross-browser compatibility, all sourced from the Guardian’s asset server.This text defines custom fonts and styles for a web page. It specifies two fonts: Guardian Headline in black italic with a weight of 900, and Guardian Titlepiece in bold with a weight of 700, both loaded from specific URLs in various formats.

It also includes CSS rules for buttons, such as a circular button that scales up slightly when hovered over and has a focus ring. There’s an “explore” call-to-action button with specific padding, border, and text styles.

Additionally, the code sets up a progress bar that changes width and has different background colors, along with responsive design adjustments for various screen sizes. A globe button wrapper is styled to be sticky and only visible under certain conditions, with different layouts for Android and iOS devices.

Finally, it defines a title arrow element as a circular icon with a green border and centered content.This CSS code defines styles for a web page, including:

– Centering elements with the class “title-arrow”
– Setting images within “title-arrow” to full width and height
– Applying color inversion filters for dark mode on iOS and Android devices
– Configuring scroll behavior using Lenis smooth scrolling library
– Loading multiple font weights and styles for the “Guardian Headline Full” typeface from the Guardian’s servers

The code handles responsive design, accessibility features, and typography for a news website layout.The Guardian website uses specific fonts for its headlines and titles, loading them from their servers in various formats like WOFF2, WOFF, and TrueType. These fonts include different styles and weights, such as semibold, bold, and black, in both regular and italic versions.

For interactive content, the layout adjusts based on screen size. On wider screens, the main column shifts left with increasing margins, while elements like atoms, showcases, and immersive content have set maximum widths that change with the viewport. On smaller screens, immersive elements expand to full width, and adjustments are made for scrollbars to ensure proper alignment.This text appears to be CSS code for styling a web page layout. It defines styles for different screen sizes, colors, spacing, and interactive elements. The code sets maximum widths for content areas, creates borders, defines color variables for various elements like links and backgrounds, and handles how the page appears when scripts are enabled or disabled. It also includes specific styling for headers, paragraphs, and lists within the main content column, adjusting margins and padding for different devices.The header wrapper’s paragraph links have a green underline that shifts 4px from the text. On hover, the underline turns dark.

The headline section features a subtle green striped background and ensures the title has no top padding. The title links are styled in a specific font, sized at 38px with a light gray color and smooth transitions. Hovering over them removes underlines, changes the color to dark, and increases the contrast of an arrow icon. If motion reduction is preferred, transitions are disabled. Non-link spans in the title are hidden.

The standfirst (subheading) area has extra bottom padding and uses the same font and size as the title for its paragraphs.

Animations control the fade-in of the title and standfirst when they come into view, with the title fading in first. These animations are skipped if reduced motion is enabled or scripting is unavailable.

The first inline element is constrained to a 4:5 aspect ratio with its image cropped to the top. The headline section has bottom padding and styles the main heading with specific typography.

Figures have captions positioned at the bottom with a semi-transparent dark background and light text, hiding any spans within.

Lines are not displayed, and the meta section has a thin top border.This text appears to be CSS code for styling a web page, likely for an article layout. It defines various visual properties such as margins, fonts, colors, and responsive behaviors for different screen sizes. The code includes specific rules for elements like the article body, images, captions, and social media links, adjusting their appearance based on device width and user preferences for reduced motion.The CSS defines a grid layout for interactive content with specific column sizes and named areas. It adjusts the layout for larger screens and when reduced motion is preferred. Media elements are set to ignore pointer events.

For reporting team sections, it styles a bordered box with green borders, specific fonts, and spacing that changes on larger screens. Text elements have defined sizes, weights, and colors, with italics for emphasized text. List items are displayed without bullets or indentation.

When scripting is disabled, certain elements like progress bars and borders are hidden, and list formatting reverts to default. Images within links or buttons are contained without overflow.

On iOS and Android devices, the background is white, and header elements are arranged in a grid with assigned areas for headlines, metadata, and article bodies, while removing certain decorative lines.This CSS code defines the layout and styling for articles on iOS and Android devices. It organizes the page into a grid with specific areas like the progress bar, globe icon, header, media, title, headline, summary, metadata, lines, body content, and tags.

For users who prefer reduced motion, the layout adjusts by removing the progress bar from the grid structure. The header section is styled with specific fonts, colors, and spacing, and it adapts to dark mode by changing text colors for better readability. Headlines and summaries use the Guardian font family with defined sizes and colors, which also switch in dark mode.

Images within the article are set to display as blocks and span the full width of their container. The layout includes padding and margins for elements like the globe button and header wrapper to ensure proper alignment and spacing across different screen sizes and user preferences.For Android articles, the header image container spans the full viewport width minus 80 pixels and has a bottom margin of 12 pixels. The image itself maintains a 4:5 aspect ratio, fills the container width, and positions at the top when cropped. Captions appear at the bottom with a semi-transparent dark background and gray text.

Paragraphs containing emphasized text use 17px Guardian Text Sans font with standard line spacing and visible links. Lists have a top margin of 14 pixels.

In dark mode, text colors shift to lighter grays while links maintain green underlines. Article metadata shows a top border and uses Guardian Headline font for bylines, with author names underlined in green. Tags are positioned in a designated grid area.

Body text links feature colored underlines throughout, with news articles using black text for bylines and links by default.For featured articles on iOS and Android devices, wide images that aren’t half-width have a 60px margin on the top, bottom, and left, with a width adjusted to 100% minus 60px. Their captions start without padding, show the main caption text directly, and hide any additional span elements.

The climate breakdown reporting team section has an 8px vertical margin and uses a 110% line height for its wrapper and list items.

In dark mode, news-related interactive elements have a transparent background. Text in the reporting team and certain links in news articles appear in a light gray color (#dcdcdc), while the feature article container background is dark (#1a1a1a). Emphasized text and links in interactive article headers also adopt the light gray color in dark mode. Additionally, specific CSS variables are set for byline anchors, follow icons, and sub-meta text to a lime green (#33ff14).

A globe button is positioned in the globe grid area, 50px tall with a fit-content width, sticky to the top with a left offset, and initially invisible with a fade-in transition. It becomes visible and interactive when marked as such. On wider screens, it adjusts its left margin accordingly, and motion preferences can disable the transition.

A border element in the border2 grid area displays a left border only on medium screens and up.

A progress bar spans the grid area for progress-bar, 4px tall, and its width accounts for the viewport width plus 20px minus the scrollbar width.This appears to be CSS code for styling a progress bar and font definitions, not regular English text that can be rewritten. The code defines:

– A sticky progress bar wrapper with responsive widths for different screen sizes
– Styling for iOS and Android devices
– A circular title arrow element with a green border
– Progress bar styling with a green background
– Multiple @font-face declarations for “Guardian Headline Full” font in different weights and styles (light, regular, medium) with various file formats

Since this is technical CSS code rather than prose, it cannot be rewritten into fluent English while preserving its meaning and function.@font-face {
font-family: “Guardian Headline Full”;
src: url(“https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Medium.woff2”) format(“woff2”),
url(“https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Medium.woff”) format(“woff”),
url(“https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Medium.ttf”) format(“truetype”);
font-weight: 500;
font-style: normal;
}

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

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

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

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

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

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

@font-face {
font-family: “Guardian Headline Full”;
src: url(“https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-BlackItalic.woff2”) format(“woff2”),
url(“https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-BlackItalic.woff”) format(“woff”),
url(“https://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://interactive.guim.co.uk/fonts/garnett/GTGuardianTitlepiece-Bold.woff2”) format(“woff2”),
url(“https://interactive.guim.co.uk/fonts/garnett/GTGuardianTitlepiece-Bold.woff”) format(“woff”),
url(“https://interactive.guim.co.uk/fonts/garnett/GTGuardianTitlepiece-Bold.ttf”) format(“truetype”);
font-weight: 700;
font-style: normal;
}

button.svelte-1qot0d0 {
width: 54px;
height: 54px;
display: flex;
justify-content: center;
align-items: center;
position: relative;
background-color: transparent;
}button {
border-radius: 50%;
border: none;
padding: 0;
transition: transform 0.3s ease;
}

button:hover {
cursor: pointer;
transform: scale(1.08);
}

button:after {
content: “”;
display: block;
position: absolute;
top: 0;
left: 2px;
width: 50px;
height: 50px;
border-radius: 50%;
z-index: -1;
border: 1px solid #dcdcdc;
}

button:focus {
box-shadow: none;
}

button:focus:after {
box-shadow: 0 0 0 3px #0077b6;
}

.explore-cta {
padding: 3px 12px 5px 12px;
border-radius: 30px;
color: #121212;
border: 1px solid #121212;
background-color: #fff;
font-family: “Guardian Text Sans Web”, “Helvetica Neue”, Helvetica, Arial, “Lucida Grande”, sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 130%;
position: absolute;
left: 12px;
top: 11.5px;
white-space: nowrap;
}

button canvas {
position: relative;
top: -4px;
}

.android .globe-button-wrapper button:after,
.ios .globe-button-wrapper button:after {
top: 0px;
left: 2px;
width: 48px;
height: 48px;
}

canvas {
display: block;
}

Please enable JavaScript to fully experience this interactive article.

Location: Mumbai, India

Disaster: Maharashtra floods, 2005

Ruchira Gupta is an English-to-Hindi interpreter, former lawyer, and mother of two daughters. In 2005, while working at a small law firm in Mumbai, heavy rainfall flooded Maharashtra, killing 926 people. Between 1950 and 2015, extreme rain events in India tripled.

That day was rainy and very windy. I was at the office when a colleague warned me that trains would stop soon due to flooded tracks. He urged me to leave, knowing I had to pick up my daughters from childcare by 6 p.m.

I quickly gathered my bag and umbrella and called my husband, unsure of the situation. My colleague advised against sitting in the women’s-only train coach, suggesting the general coach instead for safety in numbers.

The station was a 10-minute walk from my office. Rain soaked me, and my umbrella was useless against the wind. By the time I reached Churchgate station, my legs, feet, and shoes were drenched.

The station was noisy and crowded with people rushing home. Announcements warned of disrupted train services. I boarded the last departing train, which was packed and moved slowly because of water on the tracks. The roof leaked, forcing passengers to sit with open umbrellas inside. After a few stops, the train halted at Bandra, unable to proceed due to flooding.

Many people remained at the station. I got off, crossed the bridge over the platform to reach the road, and faced even stronger rain and wind. I couldn’t open my eyes, lacked a raincoat, and clung to my bag for warmth, already soaked. Home was still four or five stations away.Then I needed to take a bus or taxi from the train station. Since my husband’s office was nearby in Bandra Kurla Complex, I called him from a public phone. He told me his office was closing early because people were worried about the floods. The buses were about to leave to take everyone home, so he asked me to come to his office so we could go together.

I started walking, hoping to find a taxi or an autorickshaw to take me there, but there were none. I kept walking—I don’t remember how far—until I reached a large intersection leading toward Bandra Kurla Complex. The rain was pouring down, making it hard to walk, and the roads were flooded with ankle-deep water. I stopped a truck and asked the driver if he could take me to the complex. He agreed to drop me off at a nearby gas station.

From there, I began walking across the wide road toward my husband’s office. The water was now knee-deep, but I kept going. Slowly, the water rose to my waist, yet I continued as if unaware, not even thinking about the danger of loose electric wires or open drains.

When I reached the area opposite my husband’s office, I saw cars floating in the water. At first, it seemed amusing, but then fear set in. I made it to his office, where buses were waiting to take people home. Some buses that had left earlier were returning because the roads were too flooded to go any further.

It was already 5 or 6 pm. My daughters were at home alone with the caregiver. A friend of mine lived in another complex not far away, and I knew she would take care of them if I could get them to her. But to reach her place, you had to walk up a small slope. When I told the helper to take the children there, she said it was impossible because water was rushing down the slope too fast—they would have drowned.

I called the wife of my husband’s colleague, who lived in the same complex as us. I don’t like asking for favors, but I had no choice. I asked the helper to take the children to her place. My oldest daughter was six, and the younger one was just three. I spoke to them on the phone and started crying. My oldest said, “Don’t worry, Mama. We’ll be fine. I’ll take care of her.” Then my youngest said, “No, Mama, I want you. When will you come home?” It was heartbreaking. Still, I was relieved they wouldn’t be alone and would be with someone we knew. I prayed they would stay safe—I firmly believe in the power of prayer.

After making sure my daughters were taken care of, I felt a bit better. I was shivering because I was soaked and the office air conditioning was on. The staff broke into the canteen cupboards and managed to cook whatever they could find. Since food was limited, they rationed it so everyone got a little—just a spoonful of rice and dal—as we didn’t know how long we’d be stuck there.

We tried to make ourselves comfortable in a big hallway with some couches. My husband and I sat on one, while others settled on couches or went back to their cubicles. The next day, the roads were still flooded, and no transportation was running. Some people tried to go home but had to turn back. Muddy water was everywhere, and we spent the whole day in the office.

Then my niece called. She was living with us in Mumbai while interning at a law firm. I had no idea if she was safe at her office or stranded somewhere in the floods, trying to get home.She told me she had slept at the office the first night and then walked home, which took her two to three hours. I asked her, “Please take my daughters home and look after them. Give them something to eat.”

By the third day, the rain had stopped, but the roads were still flooded. We had no food, and I needed my inhaler because I have asthma and hadn’t brought it with me. I was struggling to breathe. There was a hospital just across the street, but my husband couldn’t walk through the water due to a foot injury. He said, “It’s not raining now. Try to go to the hospital and get some medicine from the pharmacy.”

The authorities hadn’t cleared the roads yet, and everything was covered in muddy slush. I made my way to the hospital, where I found many staff, doctors, and nurses inside. I went to the pharmacy, bought the medicine, and then noticed the canteen.@font-face {
font-family: Guardian Headline Full;
src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Semibold.woff2) format(“woff2”),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Semibold.woff) format(“woff”),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Semibold.ttf) format(“truetype”);
font-weight: 600;
font-style: normal;
}

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

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

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

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

@font-face {
font-family: Guardian Headline Full;
src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-BlackItalic.woff2) format(“woff2”),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-BlackItalic.woff) format(“woff”),
url(https://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://interactive.guim.co.uk/fonts/garnett/GTGuardianTitlepiece-Bold.woff2) format(“woff2”),
url(https://interactive.guim.co.uk/fonts/garnett/GTGuardianTitlepiece-Bold.woff) format(“woff”),
url(https://interactive.guim.co.uk/fonts/garnett/GTGuardianTitlepiece-Bold.ttf) format(“truetype”);
font-weight: 700;
font-style: normal;
}

About the series: This piece on climate breakdown was created in partnership with the Climate Disaster Project at the University of Victoria, Canada. Read more. Production team.

I was hungry and knew there was no food left in the office. I asked if I could get some food too, explaining, “I’ve come from the office. I’m hungry and need to take my medicine, so could I please have some food?” It’s hard to describe the emotions I felt. I started crying, overwhelmed by the humiliation and helplessness of having to beg for food. They were understanding and gave me some. When I returned to the office, I told my husband, “I got food from there. I’m glad that’s one less person the office has to provide for.”

That evening, we decided to take a chance and try to go back home. The people…Those with cars formed carpools. My husband and I decided to travel separately in two different cars—that way, if one car got stuck or something went wrong, at least one of us would still make it home safely. We had no idea what to expect on the roads. It was terrifying. Would we run into more flooding? Buses were stranded, the streets were dark, and the drivers carried a heavy responsibility. Everywhere was covered in filth and debris.

I think I reached home first. I felt so relieved to be back safely for my daughters. There was no electricity and no running water. Since Mumbai usually had a steady power supply, we didn’t even have candles at home. Without power, the water couldn’t be pumped up, so we had to carry it all the way from the ground floor to our apartment on the third or fourth floor.

Electricity came back a day or two after I got home. Then the newspapers started arriving, filled with heartbreaking and frightening stories. People had drowned in their cars. Others left home to pick up their children from school and fell into open manholes. Live electric wires had snapped and fallen into the water, electrocuting people.

For the next year, I avoided going to work whenever it rained heavily. I was too scared to leave my daughters alone at home again. The experience left me traumatized. I only recently realized how deeply it affected me—I’m afraid to go out in heavy rain. Now, I make sure my husband lets me know when he reaches the office safely and when he’s about to leave. Even small things make me anxious now.

Back then, no one talked about climate change. But looking back, I’m certain that’s what caused this. It’s been creeping up on us slowly, and now it’s impossible to ignore. Climate change is happening all around us, and each of us plays a part in it. Our only hope lies with the youth and children—they’re raising awareness and pushing governments to take real action.

Not much has changed since the floods. Life just returned to normal, and that makes me sad. I grieve for all the lives that were lost. It’s disheartening that no one was willing to take responsibility. I felt completely abandoned, left to face our fate alone. People must step up and take responsibility.

Frequently Asked Questions
Of course Here is a list of FAQs about the statement The water reached my waist yet I continued walkingthis is the reality of climate breakdown

BeginnerLevel Questions

1 What does the water reached my waist actually mean
Its a powerful image describing a reallife flooding event It means that due to extreme weather floodwaters have risen so high that people are forced to wade through them just to go about their daily lives

2 What is climate breakdown
Its another term for the climate crisis or climate change It emphasizes that our climate system is being pushed to a breaking point causing more frequent and severe weather disasters

3 Is this based on a real event
Yes This describes the experience of people during severe floods like those in Pakistan Bangladesh or after hurricanes Its not a hypothetical scenario its happening now in various parts of the world

4 Why should I care if its happening far away
Climate breakdown is a global issue The extreme weather causing floods elsewhere can also lead to food shortages economic instability and displacement of people worldwide affecting everyone

5 Isnt this just a natural disaster What does climate have to do with it
While floods are natural climate breakdown supercharges them A warmer atmosphere holds more moisture leading to heavier rainfall and rising sea levels make coastal flooding worse and more frequent

Intermediate Advanced Questions

6 How exactly does climate change make flooding worse
Primarily in two ways 1 Warmer air holds more water vapor leading to more intense rainfall during storms 2 Melting ice and thermal expansion cause sea levels to rise which pushes floodwaters further inland

7 Whats the difference between climate change and climate breakdown
Climate change is the broader scientific term Climate breakdown is a more urgent and descriptive term that highlights the severity speed and disruptive consequences we are now experiencing

8 Are we already past the point of no return
No but the window for preventing the most catastrophic outcomes is closing rapidly Every fraction of a degree of warming we avoid will save lives ecosystems and reduce the severity of events like these floods

9 What are some less obvious impacts of such severe flooding
Beyond the immediate danger flooding contamin