@font-face {
font-family: ‘Guardian Headline Full’;
src: url(‘https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-Light.woff2’) format(‘woff2’),
url(‘https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-Light.woff’) format(‘woff’),
url(‘https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-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/full-not-hinted/GHGuardianHeadline-LightItalic.woff2’) format(‘woff2’),
url(‘https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-LightItalic.woff’) format(‘woff’),
url(‘https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-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/full-not-hinted/GHGuardianHeadline-Regular.woff2’) format(‘woff2’),
url(‘https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-Regular.woff’) format(‘woff’),
url(‘https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-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/full-not-hinted/GHGuardianHeadline-RegularItalic.woff2’) format(‘woff2’),
url(‘https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-RegularItalic.woff’) format(‘woff’),
url(‘https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-RegularItalic.ttf’) format(‘truetype’);
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: ‘Guardian Headline Full’;
src: url(‘https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-Medium.woff2’) format(‘woff2’),
url(‘https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-Medium.woff’) format(‘woff’),
url(‘https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-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/full-not-hinted/GHGuardianHeadline-MediumItalic.woff2’) format(‘woff2’),
url(‘https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-MediumItalic.woff’) format(‘woff’),
url(‘https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-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/full-not-hinted/GHGuardianHeadline-Semibold.woff2’) format(‘woff2’),
url(‘https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-Semibold.woff’) format(‘woff’),
url(‘https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-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/full-not-hinted/GHGuardianHeadline-SemiboldItalic.woff2’) format(‘woff2’),
url(‘https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-SemiboldItalic.woff’) format(‘woff’),
url(‘https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-SemiboldItalic.ttf’) format(‘truetype’);
font-weight: 600;
font-style: italic;
}Here is the rewritten text in fluent, natural English:
“`css
@font-face {
font-family: ‘Guardian Headline Full’;
src: url(‘https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-Bold.woff2’) format(‘woff2’),
url(‘https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-Bold.woff’) format(‘woff’),
url(‘https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-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/full-not-hinted/GHGuardianHeadline-BoldItalic.woff2’) format(‘woff2’),
url(‘https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-BoldItalic.woff’) format(‘woff’),
url(‘https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-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/full-not-hinted/GHGuardianHeadline-Black.woff2’) format(‘woff2’),
url(‘https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-Black.woff’) format(‘woff’),
url(‘https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-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/full-not-hinted/GHGuardianHeadline-BlackItalic.woff2’) format(‘woff2’),
url(‘https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-BlackItalic.woff’) format(‘woff’),
url(‘https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-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;
}
@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: -10px;
}
}
“`Here is the rewritten text in fluent, natural English:
“`css
eft:-11px
“`
The main content column for interactive pages has no margin or padding for element atoms. These atoms have 12px of padding at the top and bottom. If a paragraph comes right before an element atom, the atom’s top padding is removed and its top margin is set to 12px. The same applies if an atom comes right after a paragraph.
Inline elements have a maximum width of 620px. On screens wider than 61.25em, figures with the role “inline” also max out at 620px.
For media sections that contain a looping figure, the caption is placed above other elements using a z-index of 6. The loop button is aligned to the bottom right, with a 40px bottom margin and a 3px right margin. The mute and unmute buttons are positioned on the right with 10px of left padding. The caption button has a z-index of 100, and on screens wider than 61.25em, it sits 20px from the bottom.
On screens wider than 46.25em, cinemagraph figures have no maximum height.
In the body section, self-hosted videos are displayed as block elements with a maximum width of 620px and 12px of margin on top and bottom. The video and its looping figure are full width, auto height, and centered with no margin. If the video is immersive, it has no max width and 12px of margin on top and bottom. On screens wider than 71.25em, immersive videos are 1140px wide with a left margin of -180px, and the caption has a 20px left margin. On screens wider than 81.25em, they are 1300px wide with a left margin of -260px.
The root variables define colors for dateline (gray), header border (light gray), caption text (medium gray), caption background (dark with transparency), feature (red), and a new pillar color that defaults to the primary pillar or feature. Subheading, pullquote text, and pullquote icon use the secondary pillar color, while blockquote text uses the article text color. Blockquote fill also uses the secondary pillar color.
In dark mode (unless a light color scheme is set), subheading, pullquote text, and pullquote icon use the dark mode pillar color, and blockquote fill does the same.
Element atoms in the main interactive column or anywhere else have no padding. In the article body, if an element atom is the first item and is followed by a paragraph, or if a horizontal rule (that isn’t the last one) is followed by a paragraph, the paragraph has no top margin. The same applies in comment sections and the body data section.Here’s the rewritten version in fluent, natural English:
For the first paragraph after a horizontal rule (excluding the last one) or after the first element in a feature body, add 14 pixels of top padding.
For the first letter of the first paragraph after certain elements (like the first element, sign-in gate, or horizontal rule) in article bodies, interactive content, comment sections, and feature bodies, use the following styling:
– Font: Guardian Headline, Guardian Egyptian Web, Guardian Headline Full, Georgia, or serif
– Font weight: 700 (bold)
– Font size: 111 pixels
– Line height: 92 pixels
– Float: left
– Text transform: uppercase
– Box sizing: border-box
– Right margin: 8 pixels
– Vertical alignment: text-top
– Color: uses the drop-cap variable or the new pillar color
For paragraphs that come right after a horizontal rule in article bodies, interactive content, comment sections, and feature bodies, remove the top padding.
For pull quotes in article bodies, interactive content, comment sections, and feature bodies, set the maximum width to 620 pixels.
For captions on showcase elements in main content, feature articles, standard articles, and comment articles:
– Position: static (not absolute)
– Width: 100%
– Max width: 620 pixels
On screens wider than 71.25em (1140 pixels), these captions should use absolute positioning with a max width of 140 pixels.
On screens wider than 81.25em (1300 pixels), increase the max width to 220 pixels.
For immersive elements, set the width to the full viewport width minus the scrollbar width.
On screens narrower than 71.24em (1140 pixels), immersive elements have a max width of 978 pixels, and their captions should have 10 pixels of padding on the left and right.
This applies to screens between 30em (480 pixels) and 71.24em (1140 pixels) as well.Here is the rewritten version in fluent, natural English:
– For immersive elements with captions, add 20px of padding on the sides.
– On screens between 46.25em and 61.24em wide, immersive elements should have a maximum width of 738px.
– On screens narrower than 46.24em, immersive elements should have a left margin of -10px (with !important) and no right margin, and be positioned at left: 0.
– On screens between 30em and 46.24em, immersive elements should have a left margin of -20px (with !important), and their captions should still have 20px of side padding.
– On screens wider than 71.25em, showcase images inside the body section should have a left margin of -160px (with !important).
– On screens wider than 81.25em, those same showcase images should have a left margin of -240px (with !important).
For the furniture wrapper:
– On screens wider than 61.25em, use a CSS grid with a 20px gap between columns and no row gap. The grid should have 10 columns: the first 5 for title, headline, meta, and standfirst, and the last 5 for a portrait.
– The grid rows should be: title and portrait start together at 0.25fr, then headline at 1fr, then standfirst at 0.75fr, and finally meta at auto, with the portrait ending at the same point.
– Inside the furniture wrapper, the first child of the headline section should have a 1px top border using the header border color.
– The meta section should be positioned relatively, with 2px of top padding and no right margin.
– The standfirst section should have a bottom margin of 4px.
– List items in the standfirst should use a font size of 20px.
– Links in the standfirst should not have a bottom border or background image. Instead, they should be underlined with a 6px offset, using the header border color and a thickness of 1px.
– On hover, those links should change their underline color to the new pillar color.
– The first paragraph in the standfirst should have a 1px top border using the header border color and no bottom padding.
– On screens wider than 71.25em, that first paragraph should not have a top border.
– Figures inside the furniture wrapper should have no margin on top or right, and a left margin of -10px.
– Inline figures inside the furniture wrapper should have a maximum width of 630px.
On screens wider than 71.25em:
– The furniture wrapper grid should change to 14 columns: the first 2 for title, headline, and meta start; then meta ends and standfirst starts across 5 columns; then title, headline, and standfirst end; and the last 7 columns for the portrait.
– The grid rows should be: title and portrait start at 80px, then headline at auto, then standfirst and meta start together at auto, and finally standfirst and meta end with the portrait.
– Before the meta section, add a 540px-wide, 1px-high line using the header border color, positioned at the top.
– Paragraphs in the standfirst should not have any special top border styling.Here’s the rewritten version in fluent, natural English:
The standfirst paragraph has no top border. Before the standfirst section, a vertical line appears—1 pixel wide, the same color as the header border—running the full height and positioned at the very left edge.
On screens wider than 81.25em, the layout uses a grid with specific column and row placements for the title, headline, meta, standfirst, and portrait sections. The meta section has a 620px-wide line before it, and the standfirst line is shifted slightly to the left.
In the article header, the labels inside the title section have a small top padding of 2px.
The headline uses a bold font (weight 600), a max width of 620px, and a font size of 32px. On screens wider than 71.25em, the max width narrows to 540px and the font size increases to 50px.
On screens wider than 46.25em, the keyline (decorative line) has no right margin. On screens wider than 61.25em, the keyline is hidden entirely. The keyline uses a stroke color matching the header border.
The meta section also has no right margin on screens wider than 46.25em. The social and comment elements within meta use the same border color as the header border. Some content inside the meta container is hidden.
The standfirst section is positioned with a small left offset and padding, and a relative position. On wider screens, it gets a bit of top padding. The standfirst text is regular weight, 20px font size, with some bottom padding.
The main media (image or video) sits in the portrait area of the grid. It has no top margin and a small bottom margin. On screens wider than 61.25em, the bottom margin disappears. On smaller screens (below 46.25em), the media stretches to full viewport width with a negative left margin.
The caption sits at the bottom of the media, with padding and background and text colors that adapt. It has a minimum height and no maximum width. The caption’s decorative elements use the header border color. The first decorative element is hidden, and the second is shown with a max width of 90%. On screens wider than 30em, the caption padding increases. If the caption is hidden, it becomes transparent.#caption-button {
display: block;
position: absolute;
bottom: 10px;
right: 8px;
z-index: 30;
background-color: var(–captionBackground);
border: none;
border-radius: 50%;
padding: 6px 5px 5px;
}
.furniture-wrapper #caption-button svg {
transform: scale(0.85);
}
@media (min-width: 30em) {
.furniture-wrapper #caption-button {
right: 10px;
}
}
@media (min-width: 71.25em) {
.content__main-column–interactive:before {
top: -12px !important;
height: calc(100% + 24px) !important;
}
}
.content__main-column–interactive h2 {
max-width: 620px;
}
:root {
–new-pillar-colour: var(–darkmode-pillar, var(–darkModeFeature)) !important;
–headerBorderColor: #606060;
–darkModeFeature: #ff5943;
}
nav + section,
nav + aside,
aside + section {
display: none;
}
.furniture-wrapper {
background-color: var(–darkBackground);
margin: 0 -10px;
padding: 0 10px 4px;
}
@media (min-width: 30em) {
.furniture-wrapper {
margin: 0 -20px;
padding: 0 20px 8px;
}
}
@media (min-width: 61.25em) {
.furniture-wrapper {
padding: 0 20px;
}
}
@media (min-width: 81.25em) {
.furniture-wrapper:before {
content: “”;
width: calc((100vw – 1298px) / 2);
height: 100%;
position: absolute;
left: calc((100vw – 1298px) / -2);
background-color: var(–darkBackground);
border-right: 1px solid var(–headerBorderColor);
}
.furniture-wrapper:after {
content: “”;
width: calc((100vw – 1298px) / 2);
height: 100%;
position: absolute;
right: calc((100vw – 1298px) / -2);
background-color: var(–darkBackground);
}
}
.furniture-wrapper .article-header,
.furniture-wrapper [data-gu-name=”title”] a,
.furniture-wrapper [data-gu-name=”title”] span {
color: var(–new-pillar-colour, –darkModeFeature);
}
@media (min-width: 61.25em) {
.furniture-wrapper #headline > div:first-child,
.furniture-wrapper [data-gu-name=”headline”] > div:first-child,
.furniture-wrapper .headline > div:first-child {
border-top: 1px solid var(–headerBorderColor);
}
}
.furniture-wrapper #headline h1,
.furniture-wrapper [data-gu-name=”headline”] h1,
.furniture-wrapper .headline h1 {
font-weight: 700;
color: #dcdcdc;
}
.furniture-wrapper #headline figure,
.furniture-wrapper [data-gu-name=”headline”] figure,
.furniture-wrapper .headline figure {
margin-top: 0;
margin-bottom: 2px;
}
@media (min-width: 71.25em) {
.furniture-wrapper #meta:before,
.furniture-wrapper [data-gu-name=”meta”]:before {
background-color: var(–headerBorderColor);
}
}
.furniture-wrapper #meta details,
.furniture-wrapper #meta summary,
.furniture-wrapper #meta summary span,
.furniture-wrapper [data-gu-name=”meta”] details,
.furniture-wrapper [data-gu-name=”meta”] summary,
.furniture-wrapper [data-gu-name=”meta”] summary span {
color: #dcdcdc;
}
.furniture-wrapper #meta .meta__social a,
.furniture-wrapper #meta .meta__social button,
.furniture-wrapper [data-gu-name=”meta”] .meta__social a,
.furniture-wrapper [data-gu-name=”meta”] .meta__social button {
border-color: var(–headerBorderColor);
color: var(–new-pillar-colour, –darkModeFeature);
}
.furniture-wrapper #meta .meta__social a svg,
.furniture-wrapper #meta .meta__social button svg,
.furniture-wrapper [data-gu-name=”meta”] .meta__social a svg,
.furniture-wrapper [data-gu-name=”meta”] .meta__social button svg {
fill: var(–new-pillar-colour, –darkModeFeature);
}
.furniture-wrapper #meta .meta__social a:hover,
.furniture-wrapper #meta .meta__social button:hover,
.furniture-wrapper [data-gu-name=”meta”] .meta__social a:hover,
.furniture-wrapper [data-gu-name=”meta”] .meta__social button:hover {
color: var(–darkBackground);
background-color: var(–new-pillar-colour, –darkModeFeature);
}
.furniture-wrapper #meta .meta__social a:hover svg,
.furniture-wrapper #meta .meta__social button:hover svg,
.furniture-wrapper [data-gu-name=”meta”] .meta__social a:hover svg,
.furniture-wrapper [data-gu-name=”meta”] .meta__social button:hover svg {
fill: var(–darkBackground);
}
.furniture-wrapper #meta div,
.furniture-wrapper [data-gu-name=”meta”] div {
color: #dcdcdc;
}
.furniture-wrapper #meta a,
.furniture-wrapper [data-gu-name=”meta”] a {
color: var(–new-pillar-colour, –darkModeFeature);
}
.furniture-wrapper #meta a:hover,
.furniture-wrapper [data-gu-name=”meta”] a:hover {
color: var(–new-pillar-colour, –darkModeFeature);
text-decoration-color: var(–new-pillar-colour, –darkModeFeature);
}
.furniture-wrapper .standfirst a,
.furniture-wrapper .standfirst li a,
.furniture-wrapper #standfirstHere’s the rewritten version in fluent, natural English:
The `.furniture-wrapper` styles remove the bottom border from links in the standfirst section and set their color using a custom pillar variable. These links have no background image, but they are underlined with a 6px offset, a 1px thick line, and a color based on the header border variable (defaulting to `#dcdcdc`). When you hover over these links, the bottom border stays off, and the underline color changes to match the pillar color.
The paragraph text inside the standfirst is colored `#dcdcdc`. On screens wider than 61.25em, the first paragraph gets a top border using the header border color. But on screens wider than 71.25em, that top border is removed. List items in the standfirst also use the `#dcdcdc` color. On screens wider than 71.25em, a pseudo-element before the standfirst gets a background color from the header border variable.
For screens wider than 46.25em, the `.furniture-wrapper` itself adds two pseudo-elements: one on the left and one on the right. These fill the space outside the main content area (which is 738px wide) with a dark background and a 1px border. As the screen gets wider, the width of these side panels increases to match the growing content area (978px at 61.25em, 1138px at 71.25em, and 1298px at 81.25em).
The keyline and lines SVGs inside `.furniture-wrapper` use the header border color for their stroke. Social and comment elements in the meta section also use this border color.
For article headings (`h2`), the font weight is set to 200, but if the heading contains a `` tag, the weight becomes 700. Any unordered list inside a `div[data-print-layout=”hide”]` has no background image.
Finally, a custom font called “Guardian Headline Full” is loaded from the Guardian’s assets.@font-face {
font-family: ‘Guardian Headline Full’;
src: url(‘https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-Light.woff2’) format(‘woff2’),
url(‘https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-Light.woff’) format(‘woff’),
url(‘https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-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/full-not-hinted/GHGuardianHeadline-LightItalic.woff2’) format(‘woff2’),
url(‘https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-LightItalic.woff’) format(‘woff’),
url(‘https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-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/full-not-hinted/GHGuardianHeadline-Regular.woff2’) format(‘woff2’),
url(‘https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-Regular.woff’) format(‘woff’),
url(‘https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-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/full-not-hinted/GHGuardianHeadline-RegularItalic.woff2’) format(‘woff2’),
url(‘https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-RegularItalic.woff’) format(‘woff’),
url(‘https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-RegularItalic.ttf’) format(‘truetype’);
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: ‘Guardian Headline Full’;
src: url(‘https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-Medium.woff2’) format(‘woff2’),
url(‘https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-Medium.woff’) format(‘woff’),
url(‘https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-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/full-not-hinted/GHGuardianHeadline-MediumItalic.woff2’) format(‘woff2’),
url(‘https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-MediumItalic.woff’) format(‘woff’),
url(‘https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-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/full-not-hinted/GHGuardianHeadline-Semibold.woff2’) format(‘woff2’),
url(‘https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-Semibold.woff’) format(‘woff’),
url(‘https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-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/full-not-hinted/GHGuardianHeadline-SemiboldItalic.woff2’) format(‘woff2’),
url(‘https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-SemiboldItalic.woff’) format(‘woff’),
url(‘https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-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/full-not-hinted/GHGuardianHeadline-Bold.woff2’) format(‘woff2’),
url(‘https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-Bold.woff’) format(‘woff’),
url(‘https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-Bold.ttf’) format(‘truetype’);
font-weight: 700;
font-style: normal;
}Here is the rewritten text in fluent, natural English:
“`
.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-Bold.woff) format(“woff”),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-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/full-not-hinted/GHGuardianHeadline-BoldItalic.woff2) format(“woff2”),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-BoldItalic.woff) format(“woff”),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-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/full-not-hinted/GHGuardianHeadline-Black.woff2) format(“woff2”),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-Black.woff) format(“woff”),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-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/full-not-hinted/GHGuardianHeadline-BlackItalic.woff2) format(“woff2”),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-BlackItalic.woff) format(“woff”),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-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;
}
:root:has(.ios, .android) {
–darkBackground: #1a1a1a;
–feature: #c70000;
–darkmodeFeature: #ff5943;
–new-pillar-colour: var(–primary-pillar, var(–feature));
}
@media (prefers-color-scheme: dark) {
:root:has(.ios, .android) {
–new-pillar-colour: var(–darkmode-pillar, var(–darkmodeFeature));
}
}
body.ios #feature-article-container .element-atom:first-of-type + p:first-of-type:first-letter,
body.ios #feature-article-container .element-atom:first-of-type + .sign-in-gate + p:first-of-type:first-letter,
body.ios #feature-article-container .element-atom:first-of-type + #sign-in-gate + p:first-of-type:first-letter,
body.ios #standard-article-container .element-atom:first-of-type + p:first-of-type:first-letter,
body.ios #standard-article-container .element-atom:first-of-type + .sign-in-gate + p:first-of-type:first-letter,
body.ios #standard-article-container .element-atom:first-of-type + #sign-in-gate + p:first-of-type:first-letter,
body.ios #comment-article-container .element-atom:first-of-type + p:first-of-type:first-letter,
body.ios #comment-article-container .element-atom:first-of-type + .sign-in-gate + p:first-of-type:first-letter,
body.ios #comment-article-container .element-atom:first-of-type + #sign-in-gate + p:first-of-type:first-letter,
body.android #feature-article-container .element-atom:first-of-type + p:first-of-type:first-letter,
body.android #feature-article-container .element-atom:first-of-type + .sign-in-gate + p:first-of-type:first-letter,
body.android #feature-article-container .element-atom:first-of-type + #sign-in-gate + p:first-of-type:first-letter,
body.android #standard-article-container .element-atom:first-of-type + p:first-of-type:first-letter,
body.android #standard-article-container .element-atom:first-of-type + .sign-in-gate + p:first-of-type:first-letter,
body.android #standard-article-container .element-atom:first-of-type + #sign-in-gate + p:first-of-type:first-letter,
body.android #comment-article-container .element-atom:first-of-type + p:first-of-type:first-letter,
body.android #comment-article-container .element-atom:first-of-type + .sign-in-gate + p:first-of-type:first-letter,
body.android #comment-article-container .element-atom:first-of-type + #sign-in-gate + p:first-of-type:first-letter {
/ styles here /
}
“`Here’s the rewritten version in fluent, natural English:
For comment articles on both iOS and Android, the first letter of the first paragraph after the sign-in gate should use the secondary pillar color (or black if not set). On both platforms, the article header should have no height. The furniture wrapper (the section with labels and the headline) should have 4px of padding on top and 10px on the sides. The content labels inside it should be bold, use the Guardian Headline font family, and be capitalized with the new pillar color. The main headline (h1) should be 32px, bold, with 12px of padding below, and colored #121212. Any image inside the furniture wrapper should be positioned relative, with a 14px top margin and a 10px left negative margin, and its width should fill the viewport minus the scrollbar width. The image itself, along with its link and inner container, should also fill that width and adjust height automatically.Here is the rewritten text in fluent, natural English:
For the article container, the furniture wrapper’s image link has a transparent background and spans the full width of the viewport, minus the scrollbar width. Its height is set to auto.
On iOS and Android devices, the standfirst section inside the furniture wrapper for feature, standard, and comment articles has 4 pixels of padding on top and 24 pixels on the bottom, with a right margin of -10 pixels.
In the standfirst’s inner content on these devices, paragraphs use the font family: Guardian Headline, Guardian Egyptian Web, Guardian Headline Full, Georgia, or serif.
Links within the standfirst’s inner content (including list items) are styled with the pillar color, no background image, and an underline. The underline is offset by 6 pixels and uses the header border color (usually #dcdcdc). There is no bottom border.
When you hover over these links, the underline color changes to the pillar color.
On iOS and Android, the meta section in the furniture wrapper for feature, standard, and comment articles has no margin.
Within the meta section, the byline, the byline author, and any author links inside the byline are styled accordingly.a .meta__byline span,
body.ios #standard-article-container .furniture-wrapper .meta .byline,
body.ios #standard-article-container .furniture-wrapper .meta .byline__author,
body.ios #standard-article-container .furniture-wrapper .meta span.byline__author a,
body.ios #standard-article-container .furniture-wrapper .meta .meta__byline span,
body.ios #comment-article-container .furniture-wrapper .meta .byline,
body.ios #comment-article-container .furniture-wrapper .meta .byline__author,
body.ios #comment-article-container .furniture-wrapper .meta span.byline__author a,
body.ios #comment-article-container .furniture-wrapper .meta .meta__byline span,
body.android #feature-article-container .furniture-wrapper .meta .byline,
body.android #feature-article-container .furniture-wrapper .meta .byline__author,
body.android #feature-article-container .furniture-wrapper .meta span.byline__author a,
body.android #feature-article-container .furniture-wrapper .meta .meta__byline span,
body.android #standard-article-container .furniture-wrapper .meta .byline,
body.android #standard-article-container .furniture-wrapper .meta .byline__author,
body.android #standard-article-container .furniture-wrapper .meta span.byline__author a,
body.android #standard-article-container .furniture-wrapper .meta .meta__byline span,
body.android #comment-article-container .furniture-wrapper .meta .byline,
body.android #comment-article-container .furniture-wrapper .meta .byline__author,
body.android #comment-article-container .furniture-wrapper .meta span.byline__author a,
body.android #comment-article-container .furniture-wrapper .meta .meta__byline span {
color: var(–new-pillar-colour);
}
body.ios #feature-article-container .furniture-wrapper .meta__misc,
body.ios #standard-article-container .furniture-wrapper .meta__misc,
body.ios #comment-article-container .furniture-wrapper .meta__misc,
body.android #feature-article-container .furniture-wrapper .meta__misc,
body.android #standard-article-container .furniture-wrapper .meta__misc,
body.android #comment-article-container .furniture-wrapper .meta__misc {
padding: 0;
}
body.ios #feature-article-container .furniture-wrapper .meta__misc svg,
body.ios #standard-article-container .furniture-wrapper .meta__misc svg,
body.ios #comment-article-container .furniture-wrapper .meta__misc svg,
body.android #feature-article-container .furniture-wrapper .meta__misc svg,
body.android #standard-article-container .furniture-wrapper .meta__misc svg,
body.android #comment-article-container .furniture-wrapper .meta__misc svg {
stroke: var(–new-pillar-colour);
}
body.ios #feature-article-container .furniture-wrapper .element–showcase #caption-button,
body.ios #standard-article-container .furniture-wrapper .element–showcase #caption-button,
body.ios #comment-article-container .furniture-wrapper .element–showcase #caption-button,
body.android #feature-article-container .furniture-wrapper .element–showcase #caption-button,
body.android #standard-article-container .furniture-wrapper .element–showcase #caption-button,
body.android #comment-article-container .furniture-wrapper .element–showcase #caption-button {
display: flex;
padding: 5px;
justify-content: center;
align-items: center;
width: 28px;
height: 28px;
right: 14px;
}
body.ios #feature-article-container .article__body,
body.ios #standard-article-container .article__body,
body.ios #comment-article-container .article__body,
body.android #feature-article-container .article__body,
body.android #standard-article-container .article__body,
body.android #comment-article-container .article__body {
padding: 0 12px;
}
body.ios #feature-article-container .article__body figure.element-image:not(.element–thumbnail):not(.element–immersive),
body.ios #standard-article-container .article__body figure.element-image:not(.element–thumbnail):not(.element–immersive),
body.ios #comment-article-container .article__body figure.element-image:not(.element–thumbnail):not(.element–immersive),
body.android #feature-article-container .article__body figure.element-image:not(.element–thumbnail):not(.element–immersive),
body.android #standard-article-container .article__body figure.element-image:not(.element–thumbnail):not(.element–immersive),
body.android #comment-article-container .article__body figure.element-image:not(.element–thumbnail):not(.element–immersive)For images that are not thumbnails or immersive, the `.element-image` class has no margin and its width is set to the full viewport width minus 24 pixels and the scrollbar width. Its height is automatic.
On iOS and Android devices, the captions for these images inside article containers have no padding.
For immersive images, the width is set to the full viewport width minus the scrollbar width.
In the prose sections of articles on both iOS and Android, quoted blockquotes have a `:before` element that uses the new pillar colour.
Links in the prose sections are styled with the primary pillar colour, no background image, an underline, a 6-pixel offset for the underline, and the underline colour matches the header border. When you hover over these links, the underline colour changes to the new pillar colour.
In dark mode (when the user’s system prefers a dark colour scheme), the furniture wrapper background becomes `#1a1a1a`, and the content labels inside it use the new pillar colour.For iOS and Android, in the feature, standard, and comment article containers, the headline inside `.furniture-wrapper h1` has no background color and uses `–headerBorder` as its text color. The standfirst paragraph text also uses `–headerBorder`. Links in the standfirst, as well as the byline author and its links in the meta section, are styled with `–new-pillar-colour`. Icons in `meta__misc svg` use `–new-pillar-colour` for their stroke. Captions for showcase images (`figure.element-image.element–showcase figcaption`) are colored with `–dateline`. Quoted blockquotes in the article body (`blockquote.quoted`) are also styled with `–new-pillar-colour`.Here’s the rewritten text in fluent, natural English:
On iOS devices, for feature articles, standard articles, and comment articles, the background color of the main content area should use the dark background variable. This applies to the article body, interactive content sections, feature body, and comment body containers.
Similarly, on Android devices, the same background color rule applies to all these content areas across feature, standard, and comment article types.
For iOS devices, when a paragraph immediately follows an element atom (or an element atom followed by a sign-in gate), the first letter of that paragraph should have a special style applied. This rule applies across all article types and content sections, including the article body, interactive content, feature body, and comment body containers.Here is the rewritten text in fluent, natural English:
On iOS devices, when a paragraph immediately follows an element-atom inside the standard article container, the first letter of that paragraph should be styled in a specific way. This applies to paragraphs that come right after an element-atom, whether or not there is a sign-in gate between them. The same rule applies in the comment body section and in the interactive content area.
On Android devices, the same styling applies to the first letter of a paragraph that follows an element-atom. This is true for the feature article container, the standard article container, and the comment body section. It also applies whether or not a sign-in gate is present between the element-atom and the paragraph.On Android, the following CSS rules apply:
For `body.android #standard-article-container [data-gu-name=body] .element-atom+p:first-letter`,
`body.android #standard-article-container [data-gu-name=body] .element-atom+.sign-in-gate+p:first-letter`,
`body.android #standard-article-container [data-gu-name=body] .element-atom+#sign-in-gate+p:first-letter`,
`body.android #standard-article-container #comment-body .element-atom+p:first-letter`,
`body.android #standard-article-container #comment-body .element-atom+.sign-in-gate+p:first-letter`,
`body.android #standard-article-container #comment-body .element-atom+#sign-in-gate+p:first-letter`,
`body.android #comment-article-container #article-body>div .element-atom+p:first-letter`,
`body.android #comment-article-container #article-body>div .element-atom+.sign-in-gate+p:first-letter`,
`body.android #comment-article-container #article-body>div .element-atom+#sign-in-gate+p:first-letter`,
`body.android #comment-article-container .content–interactive>div .element-atom+p:first-letter`,
`body.android #comment-article-container .content–interactive>div .element-atom+.sign-in-gate+p:first-letter`,
`body.android #comment-article-container .content–interactive>div .element-atom+#sign-in-gate+p:first-letter`,
`body.android #comment-article-container #feature-body .element-atom+p:first-letter`,
`body.android #comment-article-container #feature-body .element-atom+.sign-in-gate+p:first-letter`,
`body.android #comment-article-container #feature-body .element-atom+#sign-in-gate+p:first-letter`,
`body.android #comment-article-container [data-gu-name=body] .element-atom+p:first-letter`,
`body.android #comment-article-container [data-gu-name=body] .element-atom+.sign-in-gate+p:first-letter`,
`body.android #comment-article-container [data-gu-name=body] .element-atom+#sign-in-gate+p:first-letter`,
`body.android #comment-article-container #comment-body .element-atom+p:first-letter`,
`body.android #comment-article-container #comment-body .element-atom+.sign-in-gate+p:first-letter`,
`body.android #comment-article-container #comment-body .element-atom+#sign-in-gate+p:first-letter`
{
color: var(–new-pillar-colour, #ffffff);
}
For `body.ios.garnett–type-comment #comment-article-container .furniture-wrapper .standfirst`
and `body.android.garnett–type-comment #comment-article-container .furniture-wrapper .standfirst`
{
padding-top: 24px;
margin-top: 0;
}
The `.prose h2` has a font size of 24px.
For iOS, `body.ios #feature-article-container #caption-button`,
`body.ios #standard-article-container #caption-button`,
and `body.ios #comment-article-container #caption-button`
{
padding: 6px 5px 0;
}
For Android, `body.android #feature-article-container #caption-button`,
`body.android #standard-article-container #caption-button`,
and `body.android #comment-article-container #caption-button`
{
padding: 4px 4px 0;
}
In dark mode (when the user’s system prefers a dark color scheme and the `data-color-scheme` attribute is not set to `light`), the following variables are applied:
`–follow-text: #dcdcdc;`
`–follow-icon-fill: var(–darkmode-pillar);`
`–standfirst-text: #dcdcdc;`
`–standfirst-link-text: var(–darkmode-pillar);`
`–standfirst-link-border: var(–darkmode-pillar);`
`–byline: var(–darkmode-pillar);`
The `:root` sets `–darkBackground: #1a1a1a`.
For iOS and Android, the article header in `#feature-article-container`, `#standard-article-container`, and `#comment-article-container` has `opacity: 0 !important`.
For iOS and Android, the `.furniture-wrapper` in `#feature-article-container`, `#standard-article-container`, and `#comment-article-container` has `margin: 0`.
For iOS and Android, the `.content__labels` inside `.furniture-wrapper` in `#feature-article-container`, `#standard-article-container`, and `#comment-article-container` has no additional styling specified here.The labels inside the furniture wrapper of the article container use the new pillar color (or dark mode feature) as their text color.
On iOS and Android, in feature, standard, and comment article containers, the headline inside the furniture wrapper is set to a light gray (#dcdcdc).
Also on both platforms, any links in the article header or title area within the furniture wrapper use the new pillar color (or dark mode feature).
For the meta section (or data-gu-name=”meta”) inside the furniture wrapper, the top border is created with a repeating linear gradient using the header border color.
The byline text in the meta section is also light gray (#dcdcdc).
And any links within the meta section follow the same color styling.On Android devices, within the article containers for feature, standard, and comment articles, links in the meta section use a color defined by the pillar color variable (or a dark mode feature color as a fallback). On iOS devices, SVG icons in the meta miscellaneous section of these article containers use a stroke color set to the same pillar color variable. Also on both iOS and Android, labels in the alerts section of the meta are forced to a light gray color (#dcdcdc). Additionally, on both platforms, any span elements with a data-icon attribute inside the meta section use the pillar color variable for their text color, and the same applies to the pseudo-element `:before` of those spans.Here’s the rewritten version in fluent, natural English:
For elements with `[data-gu-name=”meta”]` and `span[data-icon]:before`, as well as similar selectors in feature, standard, and comment article containers on Android, the text color is set to `var(–new-pillar-colour, –darkModeFeature)`.
On screens wider than 71.25em, for both iOS and Android, the `#meta` and `.meta.keyline-4` elements inside the furniture wrapper of feature, standard, and comment article containers are displayed as block elements with a 1px solid top border. The border color uses `var(–new-pillar-colour, var(–headerBorderColor))`. Also, the `.meta__misc` class inside these elements has its margin reset and a left margin of 20px.
For both iOS and Android, paragraphs and unordered lists inside `.article__body` in feature, standard, and comment article containers have a maximum width of 620px.
Blockquotes with the class `.quoted` inside `.prose` within `.article__body` use `var(–secondary-pillar)` for their `:before` pseudo-element color, on both iOS and Android.
Links inside `.prose` within `.article__body` also follow the same styling rules across all platforms.”I’m in that moment of sheer terror,” says Christopher Nolan, sitting in a suite at the Corinthia hotel in London, wearing a slightly rumpled suit next to a pot of tea. Outside, crowds push and shove, hoping to catch a glimpse of one of the stars inside – Matt Damon, Tom Holland, Lupita Nyong’o. It’s the day before the world premiere of Nolan’s latest film, an adaptation of Homer’s epic poem The Odyssey, and the last day of waiting before audiences decide whether the biggest gamble of Nolan’s career has paid off. The film, which reportedly cost $250 million (£185 million), doesn’t just need an audience to show up. It needs the entire moviegoing world to do so.
“It never gets any easier, because I make films for audiences and the audience tells me what it likes,” he says. “They finish the film. I don’t have anything to hide behind. I can’t just say, ‘Oh, people don’t get it.’ Those aren’t the films I make. What does the audience make of it? Do they turn up? Do they like it if they do turn up?
“By the way, I don’t think I’d be doing my job right if I wasn’t terrified every time I put a film out, because yYou’re trying to challenge yourself, you’re trying to take risks.
He doesn’t seem scared at all. In fact, he looks as relaxed and happy as I’ve seen him in 20 years. I’ve interviewed Nolan many times, and he’s famously cautious—though always friendly—as an interviewee. He’s mastered the art of talking about his films while revealing almost nothing about himself. He once described himself to me as “the most accessible reclusive director in America.” Interviewing him can sometimes feel like trying to get information out of John le Carré’s master spy, George Smiley.
But for whatever reason—maybe the seven Oscars for Oppenheimer, or the happy exhaustion of finally finishing The Odyssey, which was shot over six months in as many countries—something seems to have softened in Nolan. Maybe it’s the new dog, a chocolate lab named Charlie, who “can hear the fridge open from a mile away.” Nolan and his wife, Emma Thomas, got him after their last child left home.
“They’re all out in the world now,” he says. “We got a dog, and then I decided to make The Odyssey because it’s the ultimate dog movie. I never had a dog as a kid, and we never got one when the kids were younger because we traveled too much. They’re a bit annoyed that we got one as soon as they left, even though they love the dog. And when it comes to The Odyssey, I’m not being flippant, but it really is a key part of that story.” When Odysseus finally returns home to Ithaca after 20 years, his old hunting dog Argos recognizes him instantly. In Nolan’s trailer, you can see a glimpse of Argos as a puppy. “A little taste of young Argos was fun to include, and I was glad they did that,” he says.
View image in fullscreen: Cillian Murphy and Christopher Nolan on the set of Oppenheimer. Photograph: Melinda Sue Gordon/AP
Conceived in the wake of Oppenheimer’s success, greenlit by Universal’s Donna Langley, and set in stone the moment Nolan received the directing Oscar with a hug from Steven Spielberg—“I sort of collapsed in his arms like a runner crossing the finish line,” Nolan says—the film is, in every sense, a child of Oppenheimer. “I thought: OK, I now have a chance to make a film I wouldn’t be able to make otherwise,” Nolan says.
Thomas, his wife and producing partner, whom I spoke with later, puts it more bluntly. “I don’t think there’s any world where we could have gone to a studio and said, ‘We want to adapt a 2,700-year-old poem,’ and have that automatically be a huge movie,” she says. “We were asking for a big budget to do it. That wouldn’t have happened without Oppenheimer.”
Being on the campaign trail for nine months meant Nolan couldn’t start writing until April 2024, but the delay only sharpened the long-distance thinking about structure he began as soon as he picked up a poem he hadn’t read since primary school. “I’ve spent many years in hotel rooms like this, talking about the non-linear structures of my films as if they were so radical, and then you go back to the oldest foundational literary text, and it has an absolutely radical structure. It’s stories within stories, flashbacks within flashbacks. That was immediately exciting.”
View image in fullscreen: Matt Damon as Odysseus and Zendaya as Athena. Photograph: Melinda Sue Gordon/Universal Pictures
This wasn’t his first attempt at Homer. In the early 2000s, after Memento’s success, Nolan was briefly attached to David Benioff’s script for Troy, based on The Iliad, which was eventually directed by Wolfgang Petersen. So, “I had spent a lot of time figuring out how to present that to an audience who all know that the belly of that horse is stuffed with Greeks,” he says. “How do you make that believable?” The image that came to him—the seed of his later screenplay for The Odyssey—The image was of a beached monument sinking into the sand. “A true Hail Mary, as we say in America—just an act of absolute desperation that shouldn’t work. That was the first image I had. I carried it with me for 20 years. I always wanted to make it.”
View image in fullscreen
Christopher Nolan and Emma Thomas attend The Odyssey premiere in Paris. Photograph: Pierre Mouton/Getty Images for Universal Pictures
Almost everyone describes it as the hardest shoot of their career—like making seven ambitious movies in one, says Thomas. The cast and crew crossed deserts, mountains, seas, and Arctic landscapes, often reaching locations only by helicopter or long hikes. Cinematographer Hoyte Van Hoytema’s team had to haul 300-pound (136 kg) IMAX cameras—the weight of a small refrigerator—across terrain where just getting people to the set was often a challenge. “At the end of each day, the department heads would have dinner, and then we’d collapse into a screening room to watch dailies,” says Thomas. “Every time you got through one challenge, you’d think, ‘Oh my God, we did it.’ And then you’d think, ‘Oh no, next week we’ve got a whole other thing to deal with.’ It was just the relentless nature of the challenges.”
Nolan and difficulty are old friends, of course. His preference for real locations over soundstages, for “in-camera” effects over computer-generated ones, and for IMAX—the immersive format that can only be shot in three-minute bursts and requires a small blimp to silence the camera—made the rough seas that battered the Dunkirk shoot seem like just a bit of bad weather.
Is difficulty the point? “It’s really not,” says Nolan. “The more we talk about it, the more it feels like it was some kind of Herzogian ordeal, but that’s really not my thing. In truth, it’s just about The Odyssey. You need things you haven’t seen before. I get bored on sound stages and sets, not because I don’t want it to be difficult. It’s because nature and the real world give you a scale, a set of options, and a serendipity you can’t achieve in the studio. But yeah, it was physically daunting, and there were times when I felt like maybe I’d bitten off more than I could chew.”
If he ever doubted himself, it wasn’t on set. It was the night before. “I sleep well because I get exhausted,” he says, but come Sunday, he’d get a chance to read the script again and look at the schedule for the week ahead. “I’d go, ‘Oh shit, how the hell am I going to get through that week?’ and that keeps me up often all night, Sunday night, just unable to sleep. So I’d come to set frazzled the next day, but I was prepared. I had a way out.”
View image in fullscreen
Cast and crew had to hike 45 minutes uphill to Castello di Santa Caterina on the island of Favignana. Photograph: Hemis/Alamy
One location in particular weighed on his mind: the ruined clifftop Castello di Santa Caterina on the Sicilian island of Favignana, which he and production designer Ruth De Jong had chosen for Odysseus’s Ithaca home. Reaching it required a 45-minute hike up a stony, zigzagging path every day. “That loomed very large over me, knowing we were going to be in that situation, but we got such great spirit from the cast and crew. You’ve got Tom Holland bounding up this path like a gazelle, making me feel very old and tired, but as an example to everyone, he was right in there.”
On the very last day, after filming finished on the lot at Universal in Los Angeles around one o’clock in the morning, Thomas cracked open a few bottles of champagne, as she and Nolan usually do. “On this one, I think it was the first time we’d done that and it really felt like nobody wanted to leave,” says Thomas. “It was like we were totally trauma-bonded. You want to carry on, jump out of the plane again.”
Ahead of its release, The Odyssey hasThe usual culture-war noise flared up after parts of the manosphere focused on the casting of Nyong’o as Helen and Elliot Page as Sinon. Homer’s epic poem, traditionally seen as a story about men’s bravery—”Tell me, muse, of a man,” it begins—has recently become a kind of rallying point for cultural conservatives trying to push back against the “woke” movement. “Homer’s Odyssey is in, gender studies is out,” one activist wrote recently. So there’s a certain irony in the fact that, in my opinion, Nolan has written his strongest group of female characters yet. In his film, Helen, Penelope, Circe, Athena, and Calypso aren’t just prizes, temptations, or divine forces—they’re fully realized figures brought to life through powerful performances.
“In the text, they’re icons,” says Nolan. “The problem is there’s not much to them beyond these ideals, whatever form they take. What I love about what the women in this movie have done is they give you a sense of the person behind the icon. Watching Lupita as Helen, you suddenly get a feel for what it would actually be like to be the spark that starts this huge war and siege—what that would mean, what it would do to someone. And then Anne [Hathaway] as Penelope—very strong, very nuanced.”
He says that depth comes from conversations with the actors, not from the script itself. “I’ve been on enough sets to know that awful moment when, as the writer-director, you’re asked a question you can’t answer. And you have to have an answer. There might be a planned ambiguity—the way Anne played Penelope, I almost didn’t want to know what she was thinking—but yeah, you have to stay sharp.”
If history is any guide, now is about the time Nolan starts feeling the first pulls toward his next project. “The first signs are probably about a week after he has nothing to do—he starts getting really restless,” says Thomas. “That’s when he’ll really focus on: ‘OK, I need to do something.'” After all, restlessness is what brought him to Ithaca in the first place. But The Odyssey doesn’t seem likely to let him go anytime soon, with premieres rolling out worldwide—from Mumbai to London—followed by what’s sure to be a non-stop awards campaign for the film, in every category, until next spring.
The Odyssey review – Nolan goes god-tier with breathtaking epic of men, monsters, and moral metamorphosis
Read more
“I’m so desperate for a period where I have nothing to do,” he says. “It feels like it’s been so long since I had time like that. It’s true—I get bored very quickly, and that’s one of the reasons I like to get back to work. I get restless.” He pauses. “Right now, all I can see is trying to get through this, release the film, and then take a little break.” The Odyssey is now showing in UK, US, and Australian cinemas.
Frequently Asked Questions
Here is a list of FAQs based on the article title and theme covering Christopher Nolans Oscars win his approach to The Odyssey and his personal life
BeginnerLevel Questions
Q Did Christopher Nolan win big at the Oscars
A Yes his film Oppenheimer won seven Oscars including Best Picture and Best Director for Nolan It was a huge night for him
Q What is The Odyssey project Nolan is working on
A He is making a new movie based on Homers ancient Greek epic poem The Odyssey Its expected to be a big ambitious film
Q Why did Nolan say he felt he took on more than he could handle
A He was talking about the intense pressure of making Oppenheimer winning Oscars and balancing his personal lifeincluding getting a new puppy It was a lot all at once
Q Did Nolan really get a puppy
A Yes he mentioned getting a puppy during this busy period which added to the chaos and responsibility he was feeling
Advanced InDepth Questions
Q How does Nolans comment about taking on more than he could handle relate to his filmmaking style
A Nolan is known for making complex highstakes films He often pushes himself to the limit creatively so this feeling of being overwhelmed is a natural part of his process
Q What does Nolans win at the Oscars mean for his career and future projects like The Odyssey
A Winning Best Director gives him even more creative freedom and budget for The Odyssey It also raises expectations which may add to the pressure he described
Q Is The Odyssey going to be a traditional retelling or a Nolanstyle twist
A Based on Nolans history expect a largescale visually stunning epic with a nonlinear or timebending element He likely wont make a simple straightforward adaptation
Q How does getting a puppy fit into Nolans public image as a serious meticulous director
