frederickobrien · Oct 9, 2026 · Oct 9, 2026 · Oct 9, 2026 · Oct 9, 2026
diff --git a/dotcom-rendering/src/components/ArticleHeadline.tsx b/dotcom-rendering/src/components/ArticleHeadline.tsx
@@ -18,7 +18,10 @@ import {
 	until,
 } from '@guardian/source/foundations';
 import { grid } from '../../src/grid';
-import { type LayoutType } from '../layouts/lib/articleArrangements';
+import {
+	isWeekendRead,
+	type LayoutType,
+} from '../layouts/lib/articleArrangements';
 import { interactiveLegacyClasses } from '../layouts/lib/interactiveLegacyStyling';
 import { getAgeWarning } from '../lib/age-warning';
 import {
@@ -140,6 +143,13 @@ const headlineFont = (format: ArticleFormat) => {
 	`;
 };
 
+const weekendReadFont = css`
+	${headlineMedium34}
+	${from.leftCol} {
+		${headlineMedium50}
+	}
+`;
+
 const invertedFontLineHeight = css`
 	line-height: 2.1875rem;
 
@@ -532,6 +542,27 @@ export const ArticleHeadline = ({
 }: Props) => {
 	const isInverted = layoutType === 'immersiveLandscape';
 	const isLegacyImmersive = layoutType == null;
+	if (layoutType === 'immersivePortrait' && isWeekendRead(tags)) {
+		return (
+			<div css={decideBottomPadding({ format, hasAvatar })}>
+				<WithAgeWarning
+					tags={tags}
+					webPublicationDateDeprecated={webPublicationDateDeprecated}
+					format={format}
+				>
+					<h1 css={weekendReadFont}>{headlineString}</h1>
+				</WithAgeWarning>
+				{!!byline && (
+					<HeadlineByline
+						format={format}
+						byline={byline}
+						tags={tags}
+						layoutType={layoutType}
+					/>
+				)}
+			</div>
+		);
+	}
 	switch (format.display) {
 		case ArticleDisplay.Immersive: {
 			switch (format.design) {

diff --git a/dotcom-rendering/src/components/ArticleMeta.apps.tsx b/dotcom-rendering/src/components/ArticleMeta.apps.tsx
@@ -4,7 +4,10 @@ import { from, space, until } from '@guardian/source/foundations';
 import { StraightLines } from '@guardian/source-development-kitchen/react-components';
 import type { ReactNode } from 'react';
 import { grid } from '../grid';
-import type { LayoutType } from '../layouts/lib/articleArrangements';
+import {
+	isWeekendRead,
+	type LayoutType,
+} from '../layouts/lib/articleArrangements';
 import { interactiveLegacyClasses } from '../layouts/lib/interactiveLegacyStyling';
 import {
 	ArticleDesign,
@@ -332,7 +335,12 @@ export const ArticleMetaApps = ({
 					</MetaGridAvatar>
 				)}
 				<MetaGridByline isComment={isComment}>
-					{shouldShowContributor(format, isImmersiveGrid) &&
+					{shouldShowContributor(
+						format,
+						isImmersiveGrid,
+						layoutType === 'immersivePortrait' &&
+							isWeekendRead(tags),
+					) &&
 						!!byline && (
 							<Contributor
 								byline={byline}

diff --git a/dotcom-rendering/src/components/ArticleMeta.web.tsx b/dotcom-rendering/src/components/ArticleMeta.web.tsx
@@ -5,7 +5,10 @@ import { Hide } from '@guardian/source/react-components';
 import { StraightLines } from '@guardian/source-development-kitchen/react-components';
 import type { CSSProperties } from 'react';
 import type { FEArticle } from '../frontend/feArticle';
-import type { LayoutType } from '../layouts/lib/articleArrangements';
+import {
+	isWeekendRead,
+	type LayoutType,
+} from '../layouts/lib/articleArrangements';
 import { interactiveLegacyClasses } from '../layouts/lib/interactiveLegacyStyling';
 import {
 	ArticleDesign,
@@ -330,8 +333,6 @@ export const ArticleMeta = ({
 
 	const isPictureContent = format.design === ArticleDesign.Picture;
 
-	const isImmersive = format.display === ArticleDisplay.Immersive;
-
 	const isAudio = format.design === ArticleDesign.Audio;
 
 	const seriesTag = getSeriesTag(tags);
@@ -418,7 +419,12 @@ export const ArticleMeta = ({
 								/>
 							)}
 
-							{shouldShowContributor(format, isImmersiveGrid) && (
+							{shouldShowContributor(
+								format,
+								isImmersiveGrid,
+								layoutType === 'immersivePortrait' &&
+									isWeekendRead(tags),
+							) && (
 								<Contributor
 									byline={byline}
 									tags={tags}
@@ -593,27 +599,28 @@ export const ArticleMeta = ({
 						hidePreferredSourceOnPrint={hidePreferredSourceOnPrint}
 					/>
 				) : null}
-				{isImmersive && mainMediaElements?.[0] && (
-					<Hide until="leftCol">
-						<div
-							css={css`
-								margin-top: ${space[2]}px;
-							`}
-						>
-							<Caption
-								captionText={decideMainMediaCaption(
-									mainMediaElements[0],
-								)}
-								format={format}
-								shouldLimitWidth={false}
-								isLeftCol={true}
-								isMainMedia={true}
-								layoutType={layoutType}
-								mediaType={mediaType}
-							/>
-						</div>
-					</Hide>
-				)}
+				{layoutType === 'immersiveLandscape' &&
+					mainMediaElements?.[0] && (
+						<Hide until="leftCol">
+							<div
+								css={css`
+									margin-top: ${space[2]}px;
+								`}
+							>
+								<Caption
+									captionText={decideMainMediaCaption(
+										mainMediaElements[0],
+									)}
+									format={format}
+									shouldLimitWidth={false}
+									isLeftCol={true}
+									isMainMedia={true}
+									layoutType={layoutType}
+									mediaType={mediaType}
+								/>
+							</div>
+						</Hide>
+					)}
 			</div>
 		</div>
 	);

diff --git a/dotcom-rendering/src/components/ArticleTitle.tsx b/dotcom-rendering/src/components/ArticleTitle.tsx
@@ -1,7 +1,10 @@
 import { css } from '@emotion/react';
 import { from } from '@guardian/source/foundations';
 import { grid } from '../../src/grid';
-import type { LayoutType } from '../layouts/lib/articleArrangements';
+import {
+	isWeekendRead,
+	type LayoutType,
+} from '../layouts/lib/articleArrangements';
 import {
 	ArticleDesign,
 	ArticleDisplay,
@@ -79,6 +82,12 @@ export const ArticleTitle = ({
 				format.design,
 			) && galleryStyles,
 			sectionStyles,
+			layoutType === 'immersivePortrait' &&
+				isWeekendRead(tags) &&
+				css`
+					position: relative;
+					min-height: 71px;
+				`,
 		]}
 	>
 		<div
@@ -100,5 +109,22 @@ export const ArticleTitle = ({
 				isMatch={isMatch}
 			/>
 		</div>
+		{layoutType === 'immersivePortrait' && isWeekendRead(tags) && (
+			<img
+				src="https://interactive.guim.co.uk/atoms/2025/04/2025-weekend-essay-test/assets/v/1791480673/book.gif"
+				alt="Book"
+				css={css`
+					position: absolute;
+					right: 0;
+					bottom: 0;
+					width: 70px;
+					height: 70px;
+					${from.leftCol} {
+						width: 110px;
+						height: 110px;
+					}
+				`}
+			/>
+		)}
 	</div>
 );
diff --git a/dotcom-rendering/src/components/Figure.tsx b/dotcom-rendering/src/components/Figure.tsx
@@ -1,13 +1,17 @@
 import { css } from '@emotion/react';
 import { breakpoints, from, space, until } from '@guardian/source/foundations';
-import type { LayoutType } from '../layouts/lib/articleArrangements';
+import {
+	isWeekendRead,
+	type LayoutType,
+} from '../layouts/lib/articleArrangements';
 import {
 	ArticleDesign,
 	type ArticleFormat,
 	ArticleSpecial,
 } from '../lib/articleFormat';
 import { LABS_HEADER_HEIGHT } from '../lib/labs-constants';
 import type { FEElement, RoleType } from '../types/content';
+import type { TagType } from '../types/tag';
 import { minHeaderHeightPx } from './Masthead/Titlepiece/constants';
 
 type Props = {
@@ -21,6 +25,7 @@ type Props = {
 	isTimeline?: boolean;
 	isInDeprecatedInteractiveLayout?: boolean;
 	articleArrangement?: LayoutType;
+	tags?: TagType[];
 };
 
 const roleCss = {
@@ -306,6 +311,7 @@ export const Figure = ({
 	isTimeline = false,
 	isInDeprecatedInteractiveLayout = false,
 	articleArrangement,
+	tags,
 }: Props) => {
 	if (isMainMedia && !isTimeline) {
 		// Don't add in-body styles for main media elements
@@ -317,10 +323,33 @@ export const Figure = ({
 			<figure
 				id={id}
 				key={id}
-				css={mainMediaFigureStyles(
-					articleArrangement === 'immersiveLandscape',
-					format.theme === ArticleSpecial.Labs,
-				)}
+				css={[
+					mainMediaFigureStyles(
+						articleArrangement === 'immersiveLandscape',
+						format.theme === ArticleSpecial.Labs,
+					),
+					articleArrangement === 'immersivePortrait' &&
+						tags &&
+						isWeekendRead(tags) &&
+						css`
+							position: relative;
+							padding: 10px;
+							${from.wide} {
+								padding: 15px;
+							}
+							::before {
+								content: '';
+								display: block;
+								background-image: url('https://interactive.guim.co.uk/atoms/2025/04/2025-weekend-essay-test/assets/v/1791480673/frame.png');
+								background-size: contain;
+								background-position: center;
+								background-repeat: no-repeat;
+								position: absolute;
+								inset: 0;
+								pointer-events: none;
+							}
+						`,
+				]}
 			>
 				{children}
 			</figure>

diff --git a/dotcom-rendering/src/components/HeadlineByline.tsx b/dotcom-rendering/src/components/HeadlineByline.tsx
@@ -5,13 +5,19 @@ import {
 	headlineLight34,
 	headlineMedium20,
 	headlineMedium24,
+	headlineMedium34,
+	headlineMedium50,
 	palette,
 	space,
 	textSans20,
 	textSans24,
 	textSans34,
 	until,
 } from '@guardian/source/foundations';
+import {
+	isWeekendRead,
+	type LayoutType,
+} from '../layouts/lib/articleArrangements';
 import {
 	ArticleDesign,
 	ArticleDisplay,
@@ -74,6 +80,27 @@ const opinionStyles = (format: ArticleFormat) => css`
 	}
 `;
 
+const weekendReadStyles = css`
+	${headlineMedium34}
+	line-height: 38px;
+	color: ${schemedPalette('--byline-anchor')};
+	font-style: italic;
+
+	${from.leftCol} {
+		${headlineMedium50}
+		line-height: 54px;
+	}
+
+	a {
+		color: inherit;
+		text-decoration: none;
+		font-style: normal;
+		:hover {
+			text-decoration: underline;
+		}
+	}
+`;
+
 const analysisStyles = css`
 	${headlineLight34};
 	line-height: 38px;
@@ -136,15 +163,36 @@ type Props = {
 	format: ArticleFormat;
 	byline: string;
 	tags: TagType[];
+	layoutType?: LayoutType;
 };
 
-export const HeadlineByline = ({ format, byline, tags }: Props) => {
+export const HeadlineByline = ({ format, byline, tags, layoutType }: Props) => {
 	if (byline === '') {
 		return null;
 	}
 
 	const hasSingleContributor = !!getSoleContributor(tags, byline);
 
+	if (layoutType === 'immersivePortrait' && isWeekendRead(tags)) {
+		return (
+			<div
+				css={[
+					opinionWrapperStyles,
+					hasSingleContributor && authorBylineWithImage,
+				]}
+			>
+				<div css={weekendReadStyles}>
+					<BylineLink
+						byline={byline}
+						tags={tags}
+						format={format}
+						isHeadline={true}
+					/>
+				</div>
+			</div>
+		);
+	}
+
 	switch (format.display) {
 		case ArticleDisplay.Immersive:
 			return (