diff --git a/dotcom-rendering/scripts/jsonSchema/schema.mjs b/dotcom-rendering/scripts/jsonSchema/schema.mjs
index beec02248b4..5394cda43c4 100644
--- a/dotcom-rendering/scripts/jsonSchema/schema.mjs
+++ b/dotcom-rendering/scripts/jsonSchema/schema.mjs
@@ -19,6 +19,7 @@ const program = TJS.getProgramFromFiles(
 		path.resolve(`${root}/src/frontend/feFootballMatchListPage.ts`),
 		path.resolve(`${root}/src/frontend/feFootballTablesPage.ts`),
 		path.resolve(`${root}/src/frontend/feFootballMatchInfoPage.ts`),
+		path.resolve(`${root}/src/frontend/feShell.ts`),
 	],
 	{
 		skipLibCheck: true,
@@ -77,6 +78,10 @@ const schemas = [
 		typeName: 'FEFootballMatchInfoPage',
 		file: `${root}/src/frontend/schemas/feFootballMatchInfoPage.json`,
 	},
+	{
+		typeName: 'FEShell',
+		file: `${root}/src/frontend/schemas/feShell.json`,
+	},
 ];
 
 /**
diff --git a/dotcom-rendering/src/components/ShellPage.tsx b/dotcom-rendering/src/components/ShellPage.tsx
new file mode 100644
index 00000000000..a1cb12ceb3a
--- /dev/null
+++ b/dotcom-rendering/src/components/ShellPage.tsx
@@ -0,0 +1,226 @@
+import { Global } from '@emotion/react';
+import { palette } from '@guardian/source/foundations';
+import { StrictMode } from 'react';
+import { AdSlot } from '../components/AdSlot.web';
+import type { FEShell } from '../frontend/feShell';
+import { BannerWrapper, Stuck } from '../layouts/lib/stickiness';
+import { buildAdTargeting } from '../lib/ad-targeting';
+import { ArticleDesign, ArticleDisplay, Pillar } from '../lib/articleFormat';
+import { canRenderAds } from '../lib/canRenderAds';
+import { rootStyles } from '../lib/rootStyles';
+import type { NavType } from '../model/extract-nav';
+import { AlreadyVisited } from './AlreadyVisited.island';
+import { useConfig } from './ConfigContext';
+import { DarkModeMessage } from './DarkModeMessage';
+// import html from './fashion.html';
+import { FocusStyles } from './FocusStyles.island';
+import { Footer } from './Footer';
+import { HeaderAdSlot } from './HeaderAdSlot';
+import { Island } from './Island';
+import { Masthead } from './Masthead/Masthead';
+import { Metrics } from './Metrics.island';
+import { Section } from './Section';
+import { SetABTests } from './SetABTests.island';
+import { SetAdTargeting } from './SetAdTargeting.island';
+import { SkipTo } from './SkipTo';
+import { StickyBottomBanner } from './StickyBottomBanner.island';
+import { SubNav } from './SubNav.island';
+
+type Props = {
+	feShell: FEShell;
+	nav: NavType;
+	renderingTarget: 'Web' | 'Apps';
+};
+
+export const ShellPage = (props: Props) => {
+	const { feShell, nav, renderingTarget } = props;
+
+	const isWeb = renderingTarget === 'Web';
+	const isApps = renderingTarget === 'Apps';
+
+	const renderAds = canRenderAds(feShell);
+	const config = feShell.config;
+
+	const adTargeting = buildAdTargeting({
+		isAdFreeUser: feShell.isAdFreeUser,
+		isSensitive: config.isSensitive,
+		edition: config.edition,
+		section: config.section,
+		sharedAdTargeting: config.sharedAdTargeting,
+		adUnit: config.adUnit,
+	});
+
+	/* We use this as our "base" or default format */
+	const format = {
+		display: ArticleDisplay.Standard,
+		design: ArticleDesign.Standard,
+		theme: Pillar.News,
+	};
+
+	const { darkModeAvailable } = useConfig();
+
+	return (
+		<StrictMode>
+			<Global styles={rootStyles(format, darkModeAvailable)} />
+			{isWeb && (
+				<>
+					<SkipTo id="maincontent" label="Skip to main content" />
+					<SkipTo id="navigation" label="Skip to navigation" />
+				</>
+			)}
+			<Island priority="feature" defer={{ until: 'idle' }}>
+				<FocusStyles />
+			</Island>
+			{isWeb && (
+				<>
+					<Island priority="feature" defer={{ until: 'idle' }}>
+						<AlreadyVisited />
+					</Island>
+					<Island priority="critical">
+						<Metrics
+							commercialMetricsEnabled={
+								!!config.switches.commercialMetrics
+							}
+						/>
+					</Island>
+					<Island priority="critical">
+						<SetABTests
+							serverSideABTests={config.serverSideABTests}
+						/>
+					</Island>
+					<Island priority="critical">
+						<SetAdTargeting adTargeting={adTargeting} />
+					</Island>
+					{darkModeAvailable && (
+						<DarkModeMessage>
+							Dark mode is a work-in-progress.
+							<br />
+							You can{' '}
+							<a
+								style={{ color: 'inherit' }}
+								href="/ab-tests/opt-out/webx-dark-mode-web"
+							>
+								opt out anytime
+							</a>{' '}
+							if anything is unreadable or odd.
+						</DarkModeMessage>
+					)}
+				</>
+			)}
+			{/* layout */}
+			{isWeb && (
+				<div data-print-layout="hide" id="bannerandheader">
+					{renderAds && (
+						<Stuck>
+							<Section
+								fullWidth={true}
+								showTopBorder={false}
+								showSideBorders={false}
+								padSides={false}
+								shouldCenter={false}
+							>
+								<HeaderAdSlot />
+							</Section>
+						</Stuck>
+					)}
+
+					<Masthead
+						nav={nav}
+						editionId={feShell.editionId}
+						idUrl={config.idUrl}
+						mmaUrl={config.mmaUrl}
+						discussionApiUrl={config.discussionApiUrl}
+						idApiUrl={config.idApiUrl}
+						contributionsServiceUrl={
+							feShell.contributionsServiceUrl
+						}
+						showSubNav={true}
+						showSlimNav={false}
+						hasPageSkin={config.hasPageSkin}
+						pageId={config.pageId}
+						sectionId={config.section}
+						contentType={config.contentType}
+					/>
+				</div>
+			)}
+			{isWeb && renderAds && config.hasSurveyAd && (
+				<AdSlot position="survey" />
+			)}
+
+			{/* @ts-expect-error Fastly ESI namespaced tag is not part of React JSX types */}
+			<esi:include src="/esi/time" />
+			{/* <div dangerouslySetInnerHTML={{ __html: html }} /> */}
+			<div>Hello DCAR Sites shell!</div>
+
+			{isWeb && (
+				<>
+					{props.nav.subNavSections && (
+						<Section
+							fullWidth={true}
+							showTopBorder={true}
+							padSides={false}
+							element="aside"
+						>
+							<Island
+								priority="enhancement"
+								defer={{ until: 'visible' }}
+							>
+								<SubNav
+									subNavSections={props.nav.subNavSections}
+									currentNavLink={props.nav.currentNavLink}
+									position="footer"
+								/>
+							</Island>
+						</Section>
+					)}
+
+					<Section
+						fullWidth={true}
+						padSides={false}
+						backgroundColour={palette.brand[400]}
+						borderColour={palette.brand[600]}
+						showSideBorders={false}
+						showTopBorder={false}
+						element="footer"
+					>
+						<Footer
+							pageFooter={feShell.pageFooter}
+							selectedPillar={props.nav.selectedPillar}
+							pillars={props.nav.pillars}
+							urls={props.nav.readerRevenueLinks.footer}
+							editionId={feShell.editionId}
+						/>
+					</Section>
+					<BannerWrapper data-print-layout="hide">
+						<Island priority="feature" defer={{ until: 'idle' }}>
+							<StickyBottomBanner
+								contentType={config.contentType}
+								contributionsServiceUrl={
+									feShell.contributionsServiceUrl
+								}
+								idApiUrl={config.idApiUrl}
+								isMinuteArticle={false}
+								isPaidContent={!!config.isPaidContent}
+								// TODO: article and fronts are using different config types 😱
+								isPreview={config.isPreview ?? false}
+								isSensitive={config.isSensitive}
+								pageId={config.pageId}
+								sectionId={config.section}
+								shouldHideReaderRevenue={false}
+								remoteBannerSwitch={
+									!!config.switches.remoteBanner
+								}
+								tags={[]}
+							/>
+						</Island>
+					</BannerWrapper>
+				</>
+			)}
+			{isApps && (
+				<>
+					<div>Coming soon. Thanks for dropping by.</div>
+				</>
+			)}
+		</StrictMode>
+	);
+};
diff --git a/dotcom-rendering/src/components/fashion.html b/dotcom-rendering/src/components/fashion.html
new file mode 100644
index 00000000000..c9287367f19
--- /dev/null
+++ b/dotcom-rendering/src/components/fashion.html
@@ -0,0 +1,1574 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<title>THE EDIT — Guardian Fashion</title>
+		<link rel="preconnect" href="https://fonts.googleapis.com" />
+		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+		<link
+			href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,900;1,9..144,300;1,9..144,400;1,9..144,500&family=Archivo:wght@300;400;500;600&display=swap"
+			rel="stylesheet"
+		/>
+		<style>
+			:root {
+				--blue: #052962;
+				--ink: #0d0d0d;
+				--ivory: #f7f4ef;
+				--paper: #fcfaf6;
+				--accent: #c8472f;
+				/* refined vermilion */
+				--gold: #b8924a;
+				--mist: #cfc9be;
+				--line: rgba(13, 13, 13, 0.14);
+			}
+
+			* {
+				margin: 0;
+				padding: 0;
+				box-sizing: border-box;
+			}
+
+			html {
+				scroll-behavior: smooth;
+			}
+
+			body {
+				background: var(--paper);
+				color: var(--ink);
+				font-family: 'Archivo', sans-serif;
+				font-weight: 400;
+				overflow-x: hidden;
+				-webkit-font-smoothing: antialiased;
+			}
+
+			::selection {
+				background: var(--accent);
+				color: #fff;
+			}
+
+			.serif {
+				font-family: 'Fraunces', serif;
+			}
+
+			img {
+				display: block;
+			}
+
+			.ph {
+				opacity: 0;
+				transform: scale(1.04);
+				transition:
+					opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1),
+					transform 1.4s cubic-bezier(0.16, 1, 0.3, 1);
+			}
+
+			.ph.loaded {
+				opacity: 1;
+				transform: scale(1);
+			}
+
+			/* progress */
+			.progress {
+				position: fixed;
+				top: 0;
+				left: 0;
+				height: 3px;
+				background: var(--accent);
+				width: 0;
+				z-index: 300;
+				transition: width 0.1s linear;
+			}
+
+			/* ===== INTRO — full-viewport overlapping collage ===== */
+			.intro {
+				height: 100vh;
+				min-height: 660px;
+				position: relative;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				overflow: hidden;
+				background: var(--ink);
+			}
+
+			.intro-photos {
+				position: absolute;
+				inset: 0;
+			}
+
+			.ip {
+				position: absolute;
+				overflow: hidden;
+				will-change: transform;
+				box-shadow: 0 40px 80px rgba(0, 0, 0, 0.35);
+				opacity: 0;
+				animation: ipIn 1.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+			}
+
+			.ip img {
+				width: 100%;
+				height: 100%;
+				object-fit: cover;
+			}
+
+			@keyframes ipIn {
+				from {
+					opacity: 0;
+					transform: translateY(40px) scale(0.98);
+				}
+
+				to {
+					opacity: 1;
+				}
+			}
+
+			/* large overlapping panels that tile the viewport edge-to-edge */
+			.ip1 {
+				width: 30vw;
+				height: 64vh;
+				left: -2vw;
+				top: -4vh;
+				z-index: 1;
+				animation-delay: 0.05s;
+			}
+
+			.ip2 {
+				width: 26vw;
+				height: 52vh;
+				left: 24vw;
+				top: 10vh;
+				z-index: 2;
+				animation-delay: 0.18s;
+			}
+
+			.ip3 {
+				width: 30vw;
+				height: 60vh;
+				right: -3vw;
+				top: -6vh;
+				z-index: 1;
+				animation-delay: 0.12s;
+			}
+
+			.ip4 {
+				width: 28vw;
+				height: 58vh;
+				left: -3vw;
+				bottom: -6vh;
+				z-index: 2;
+				animation-delay: 0.26s;
+			}
+
+			.ip5 {
+				width: 25vw;
+				height: 50vh;
+				left: 38vw;
+				bottom: -8vh;
+				z-index: 1;
+				animation-delay: 0.34s;
+			}
+
+			.ip6 {
+				width: 30vw;
+				height: 62vh;
+				right: -2vw;
+				bottom: -5vh;
+				z-index: 2;
+				animation-delay: 0.22s;
+			}
+
+			/* central legibility scrim */
+			.intro-scrim {
+				position: absolute;
+				inset: 0;
+				z-index: 4;
+				background: radial-gradient(
+					ellipse 46% 52% at 50% 50%,
+					rgba(13, 13, 13, 0.62) 0%,
+					rgba(13, 13, 13, 0.3) 55%,
+					rgba(13, 13, 13, 0) 100%
+				);
+			}
+
+			.intro-center {
+				position: relative;
+				z-index: 5;
+				text-align: center;
+			}
+
+			.intro .kicker {
+				font-size: 12px;
+				letter-spacing: 0.42em;
+				text-transform: uppercase;
+				font-weight: 500;
+				color: var(--accent);
+				margin-bottom: 26px;
+				opacity: 0;
+				animation: fade 1.2s 0.5s forwards;
+			}
+
+			.intro h1 {
+				font-family: 'Fraunces', serif;
+				font-weight: 300;
+				font-size: clamp(72px, 15vw, 224px);
+				line-height: 0.84;
+				letter-spacing: -0.02em;
+				color: var(--ivory);
+				text-shadow: 0 2px 40px rgba(0, 0, 0, 0.5);
+			}
+
+			.intro h1 .ed {
+				font-style: italic;
+				font-weight: 400;
+				display: block;
+				color: #fff;
+			}
+
+			.intro .meta {
+				margin-top: 30px;
+				font-family: 'Fraunces', serif;
+				font-style: italic;
+				font-weight: 400;
+				font-size: clamp(15px, 2vw, 22px);
+				color: #d8d4cc;
+				opacity: 0;
+				animation: fade 1.2s 1s forwards;
+				text-shadow: 0 1px 20px rgba(0, 0, 0, 0.5);
+			}
+
+			.scrollhint {
+				position: absolute;
+				bottom: 32px;
+				left: 50%;
+				transform: translateX(-50%);
+				z-index: 6;
+				font-size: 10px;
+				letter-spacing: 0.34em;
+				text-transform: uppercase;
+				font-weight: 500;
+				color: var(--ivory);
+				display: flex;
+				flex-direction: column;
+				align-items: center;
+				gap: 12px;
+				opacity: 0;
+				animation: fade 1.2s 1.4s forwards;
+			}
+
+			.scrollhint .ln {
+				width: 1px;
+				height: 46px;
+				background: rgba(247, 244, 239, 0.4);
+				position: relative;
+				overflow: hidden;
+			}
+
+			.scrollhint .ln::after {
+				content: '';
+				position: absolute;
+				top: -46px;
+				left: 0;
+				width: 1px;
+				height: 46px;
+				background: var(--accent);
+				animation: drop 1.8s infinite;
+			}
+
+			@keyframes drop {
+				to {
+					top: 46px;
+				}
+			}
+
+			@keyframes fade {
+				to {
+					opacity: 1;
+				}
+			}
+
+			@media (max-width: 820px) {
+				.ip1 {
+					width: 52vw;
+					height: 40vh;
+					left: -4vw;
+					top: -2vh;
+				}
+
+				.ip2 {
+					width: 46vw;
+					height: 34vh;
+					right: -4vw;
+					top: 6vh;
+					left: auto;
+				}
+
+				.ip3 {
+					width: 50vw;
+					height: 38vh;
+					left: -3vw;
+					top: 34vh;
+				}
+
+				.ip4 {
+					width: 48vw;
+					height: 36vh;
+					right: -4vw;
+					top: 42vh;
+					left: auto;
+					bottom: auto;
+				}
+
+				.ip5 {
+					width: 50vw;
+					height: 36vh;
+					left: 2vw;
+					bottom: -4vh;
+				}
+
+				.ip6 {
+					width: 46vw;
+					height: 34vh;
+					right: -4vw;
+					bottom: -2vh;
+				}
+			}
+
+			/* ===== thin marquee ===== */
+			.strip {
+				border-top: 1px solid var(--line);
+				border-bottom: 1px solid var(--line);
+				overflow: hidden;
+				white-space: nowrap;
+				padding: 18px 0;
+				background: var(--paper);
+			}
+
+			.strip-track {
+				display: inline-flex;
+				gap: 40px;
+				animation: mq 38s linear infinite;
+			}
+
+			.strip-track span {
+				font-family: 'Fraunces', serif;
+				font-weight: 300;
+				font-style: italic;
+				font-size: clamp(18px, 2.4vw, 30px);
+				color: var(--ink);
+				display: inline-flex;
+				gap: 40px;
+				align-items: center;
+			}
+
+			.strip-track span::after {
+				content: '—';
+				color: var(--accent);
+				font-style: normal;
+			}
+
+			@keyframes mq {
+				to {
+					transform: translateX(-50%);
+				}
+			}
+
+			/* ===== horizontal rail ===== */
+			.rail-outer {
+				position: relative;
+			}
+
+			.rail-sticky {
+				position: sticky;
+				top: 0;
+				height: 100vh;
+				display: flex;
+				align-items: center;
+				overflow: hidden;
+			}
+
+			.rail-track {
+				display: flex;
+				align-items: center;
+				gap: 4vw;
+				padding: 0 8vw;
+				will-change: transform;
+			}
+
+			.rail-head {
+				flex: 0 0 auto;
+				width: 40vw;
+				min-width: 300px;
+			}
+
+			.rail-head .eyebrow {
+				font-size: 11px;
+				letter-spacing: 0.3em;
+				text-transform: uppercase;
+				font-weight: 500;
+				color: var(--accent);
+				margin-bottom: 24px;
+			}
+
+			.rail-head h2 {
+				font-family: 'Fraunces', serif;
+				font-weight: 300;
+				font-size: clamp(40px, 5.5vw, 92px);
+				line-height: 0.96;
+				letter-spacing: -0.02em;
+			}
+
+			.rail-head h2 em {
+				font-style: italic;
+				color: var(--blue);
+			}
+
+			.rail-head p {
+				margin-top: 26px;
+				font-size: 15px;
+				line-height: 1.6;
+				max-width: 360px;
+				color: #555;
+				font-weight: 300;
+			}
+
+			.look {
+				flex: 0 0 auto;
+				width: 30vw;
+				min-width: 280px;
+			}
+
+			.look-img {
+				width: 100%;
+				aspect-ratio: 3/4;
+				overflow: hidden;
+				border-radius: 2px;
+				position: relative;
+				background: var(--mist);
+			}
+
+			.look-img img {
+				width: 100%;
+				height: 100%;
+				object-fit: cover;
+				transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
+			}
+
+			.look:hover .look-img img {
+				transform: scale(1.05);
+			}
+
+			.look-no {
+				position: absolute;
+				top: 16px;
+				left: 16px;
+				font-family: 'Fraunces', serif;
+				font-style: italic;
+				font-size: 15px;
+				color: #fff;
+				text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
+			}
+
+			.look-meta {
+				display: flex;
+				justify-content: space-between;
+				align-items: baseline;
+				margin-top: 18px;
+				border-top: 1px solid var(--line);
+				padding-top: 14px;
+			}
+
+			.look-meta h3 {
+				font-family: 'Fraunces', serif;
+				font-weight: 400;
+				font-size: 19px;
+			}
+
+			.look-meta .price {
+				font-size: 14px;
+				color: var(--accent);
+				font-weight: 500;
+				letter-spacing: 0.02em;
+			}
+
+			.look-meta2 {
+				font-size: 12.5px;
+				color: #888;
+				margin-top: 6px;
+				font-weight: 300;
+			}
+
+			/* ===== editorial split ===== */
+			.split {
+				display: grid;
+				grid-template-columns: 1fr 1fr;
+				min-height: 100vh;
+			}
+
+			.split-img {
+				overflow: hidden;
+				position: relative;
+			}
+
+			.split-img img {
+				width: 100%;
+				height: 100%;
+				object-fit: cover;
+			}
+
+			.split-txt {
+				display: flex;
+				flex-direction: column;
+				justify-content: center;
+				padding: 8vw 6vw;
+				background: var(--ink);
+				color: var(--ivory);
+			}
+
+			.split-txt .eyebrow {
+				font-size: 11px;
+				letter-spacing: 0.3em;
+				text-transform: uppercase;
+				color: var(--accent);
+				font-weight: 500;
+				margin-bottom: 28px;
+			}
+
+			.split-txt h2 {
+				font-family: 'Fraunces', serif;
+				font-weight: 300;
+				font-size: clamp(32px, 4vw, 64px);
+				line-height: 1.04;
+				letter-spacing: -0.01em;
+			}
+
+			.split-txt h2 em {
+				font-style: italic;
+				color: var(--gold);
+			}
+
+			.split-txt p {
+				margin-top: 26px;
+				font-size: 16px;
+				line-height: 1.7;
+				color: #bdbab3;
+				font-weight: 300;
+				max-width: 460px;
+			}
+
+			.split-txt .sig {
+				margin-top: 34px;
+				font-family: 'Fraunces', serif;
+				font-style: italic;
+				font-size: 16px;
+				color: var(--ivory);
+			}
+
+			/* ===== parallax quote ===== */
+			.quote {
+				min-height: 120vh;
+				position: relative;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				overflow: hidden;
+				background: var(--blue);
+				color: var(--ivory);
+				text-align: center;
+			}
+
+			.quote .qimg {
+				position: absolute;
+				overflow: hidden;
+				border-radius: 2px;
+				opacity: 0.85;
+				will-change: transform;
+				box-shadow: 0 30px 70px rgba(0, 0, 0, 0.4);
+			}
+
+			.quote .qimg img {
+				width: 100%;
+				height: 100%;
+				object-fit: cover;
+			}
+
+			.q1 {
+				width: 18vw;
+				min-width: 140px;
+				height: 24vw;
+				min-height: 190px;
+				left: 8%;
+				top: 18%;
+			}
+
+			.q2 {
+				width: 15vw;
+				min-width: 120px;
+				height: 20vw;
+				min-height: 160px;
+				right: 9%;
+				bottom: 16%;
+			}
+
+			.quote .qtext {
+				position: relative;
+				z-index: 3;
+				max-width: 980px;
+				padding: 0 28px;
+			}
+
+			.quote .qtext p {
+				font-family: 'Fraunces', serif;
+				font-weight: 300;
+				font-size: clamp(28px, 4.4vw, 68px);
+				line-height: 1.12;
+				letter-spacing: -0.015em;
+			}
+
+			.quote .qtext em {
+				font-style: italic;
+				color: var(--gold);
+			}
+
+			/* ===== gallery ===== */
+			.gallery {
+				padding: 16vh 6vw;
+			}
+
+			.gallery .gh {
+				display: flex;
+				align-items: flex-end;
+				justify-content: space-between;
+				margin-bottom: 64px;
+				gap: 24px;
+				flex-wrap: wrap;
+			}
+
+			.gallery .gh h2 {
+				font-family: 'Fraunces', serif;
+				font-weight: 300;
+				font-size: clamp(40px, 6vw, 108px);
+				line-height: 0.9;
+				letter-spacing: -0.02em;
+			}
+
+			.gallery .gh h2 em {
+				font-style: italic;
+				color: var(--accent);
+			}
+
+			.gallery .gh p {
+				font-size: 14px;
+				color: #777;
+				max-width: 280px;
+				font-weight: 300;
+				line-height: 1.6;
+			}
+
+			.grid {
+				display: grid;
+				grid-template-columns: repeat(12, 1fr);
+				gap: 16px;
+				grid-auto-rows: 14vw;
+			}
+
+			.tile {
+				overflow: hidden;
+				border-radius: 2px;
+				position: relative;
+				opacity: 0;
+				transform: translateY(60px);
+				transition:
+					opacity 1s cubic-bezier(0.16, 1, 0.3, 1),
+					transform 1s cubic-bezier(0.16, 1, 0.3, 1);
+				background: var(--mist);
+			}
+
+			.tile.in {
+				opacity: 1;
+				transform: none;
+			}
+
+			.tile img {
+				width: 100%;
+				height: 100%;
+				object-fit: cover;
+				transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
+			}
+
+			.tile:hover img {
+				transform: scale(1.06);
+			}
+
+			.tile .cap {
+				position: absolute;
+				left: 0;
+				bottom: 0;
+				right: 0;
+				padding: 18px;
+				background: linear-gradient(transparent, rgba(0, 0, 0, 0.6));
+				color: #fff;
+				font-family: 'Fraunces', serif;
+				font-style: italic;
+				font-size: 16px;
+				opacity: 0;
+				transition: opacity 0.4s;
+			}
+
+			.tile:hover .cap {
+				opacity: 1;
+			}
+
+			.t-a {
+				grid-column: span 5;
+				grid-row: span 2;
+			}
+
+			.t-b {
+				grid-column: span 4;
+				grid-row: span 2;
+			}
+
+			.t-c {
+				grid-column: span 3;
+				grid-row: span 2;
+			}
+
+			.t-d {
+				grid-column: span 4;
+				grid-row: span 2;
+			}
+
+			.t-e {
+				grid-column: span 5;
+				grid-row: span 2;
+			}
+
+			.t-f {
+				grid-column: span 3;
+				grid-row: span 2;
+			}
+
+			/* ===== outro ===== */
+			.outro {
+				min-height: 100vh;
+				display: flex;
+				flex-direction: column;
+				align-items: center;
+				justify-content: center;
+				text-align: center;
+				padding: 10vh 24px;
+				position: relative;
+				overflow: hidden;
+				background: var(--ink);
+				color: var(--ivory);
+			}
+
+			.outro .obg {
+				position: absolute;
+				inset: 0;
+				opacity: 0.22;
+			}
+
+			.outro .obg img {
+				width: 100%;
+				height: 100%;
+				object-fit: cover;
+			}
+
+			.outro .ovl {
+				position: absolute;
+				inset: 0;
+				background: radial-gradient(
+					ellipse at center,
+					rgba(13, 13, 13, 0.55),
+					rgba(13, 13, 13, 0.9)
+				);
+			}
+
+			.outro .inner {
+				position: relative;
+				z-index: 3;
+				max-width: 720px;
+			}
+
+			.outro .eyebrow {
+				font-size: 11px;
+				letter-spacing: 0.34em;
+				text-transform: uppercase;
+				color: var(--accent);
+				font-weight: 500;
+				margin-bottom: 26px;
+			}
+
+			.outro h2 {
+				font-family: 'Fraunces', serif;
+				font-weight: 300;
+				font-size: clamp(44px, 8vw, 128px);
+				line-height: 0.9;
+				letter-spacing: -0.02em;
+			}
+
+			.outro h2 em {
+				font-style: italic;
+				color: var(--gold);
+			}
+
+			.outro p {
+				font-family: 'Fraunces', serif;
+				font-style: italic;
+				font-weight: 300;
+				font-size: clamp(16px, 2.2vw, 24px);
+				margin-top: 24px;
+				color: #cbc8c1;
+			}
+
+			.outro .form {
+				margin-top: 42px;
+				display: flex;
+				border-bottom: 1px solid rgba(247, 244, 239, 0.4);
+				max-width: 440px;
+				width: 100%;
+				margin-left: auto;
+				margin-right: auto;
+			}
+
+			.outro .form input {
+				flex: 1;
+				background: transparent;
+				border: 0;
+				padding: 16px 4px;
+				color: var(--ivory);
+				font-family: 'Archivo';
+				font-size: 15px;
+				outline: none;
+			}
+
+			.outro .form input::placeholder {
+				color: #888;
+			}
+
+			.outro .form button {
+				background: transparent;
+				color: var(--ivory);
+				border: 0;
+				padding: 0 8px;
+				font-family: 'Fraunces', serif;
+				font-style: italic;
+				font-size: 16px;
+				cursor: pointer;
+				transition: color 0.3s;
+			}
+
+			.outro .form button:hover {
+				color: var(--gold);
+			}
+
+			.outro .ok {
+				font-family: 'Fraunces', serif;
+				font-style: italic;
+				font-size: 22px;
+				margin-top: 40px;
+				color: var(--gold);
+			}
+
+			.outro .credit {
+				position: absolute;
+				bottom: 22px;
+				z-index: 3;
+				font-size: 10px;
+				letter-spacing: 0.26em;
+				text-transform: uppercase;
+				color: #888;
+				font-weight: 500;
+			}
+
+			@media (max-width: 820px) {
+				.rail-head {
+					width: 78vw;
+				}
+
+				.look {
+					width: 68vw;
+				}
+
+				.split {
+					grid-template-columns: 1fr;
+				}
+
+				.split-img {
+					height: 60vh;
+				}
+
+				.grid {
+					grid-template-columns: repeat(2, 1fr);
+					grid-auto-rows: 42vw;
+				}
+
+				.t-a,
+				.t-b,
+				.t-c,
+				.t-d,
+				.t-e,
+				.t-f {
+					grid-column: span 1;
+					grid-row: span 1;
+				}
+			}
+
+			@media (prefers-reduced-motion: reduce) {
+				* {
+					animation-duration: 0.001s !important;
+				}
+
+				.ph,
+				.tile {
+					opacity: 1 !important;
+					transform: none !important;
+				}
+
+				.intro .kicker,
+				.intro .meta,
+				.scrollhint {
+					opacity: 1 !important;
+				}
+
+				.rail-sticky {
+					position: relative;
+					height: auto;
+					display: block;
+					padding: 10vh 0;
+				}
+
+				.rail-track {
+					flex-wrap: wrap;
+					transform: none !important;
+					gap: 30px;
+				}
+
+				.quote {
+					min-height: auto;
+					padding: 16vh 0;
+				}
+			}
+		</style>
+	</head>
+
+	<body>
+		<div id="root"></div>
+
+		<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js"></script>
+		<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"></script>
+		<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/7.23.6/babel.min.js"></script>
+
+		<script type="text/babel" data-presets="react">
+			const { useEffect, useRef, useState } = React;
+
+			const PHOTOS = {
+				hero: 'https://images.unsplash.com/photo-1601597565151-70c4020dc0e1?auto=format&fit=crop&w=1200&h=1500&q=80',
+				m_yellow:
+					'https://images.unsplash.com/photo-1562151270-c7d22ceb586a?auto=format&fit=crop&w=900&h=1200&q=80',
+				m_red: 'https://images.unsplash.com/photo-1580478491436-fd6a937acc9e?auto=format&fit=crop&w=900&h=1200&q=80',
+				m_reddress:
+					'https://images.unsplash.com/photo-1662532577856-e8ee8b138a8b?auto=format&fit=crop&w=900&h=1200&q=80',
+				m_coat: 'https://images.unsplash.com/photo-1645561305502-63a9ba09ab09?auto=format&fit=crop&w=900&h=1200&q=80',
+				m_scarf:
+					'https://images.unsplash.com/photo-1613915617430-8ab0fd7c6baf?auto=format&fit=crop&w=900&h=1200&q=80',
+				m_sun: 'https://images.unsplash.com/photo-1538329972958-465d6d2144ed?auto=format&fit=crop&w=900&h=1200&q=80',
+				m_gray: 'https://images.unsplash.com/photo-1574015974293-817f0ebebb74?auto=format&fit=crop&w=900&h=1200&q=80',
+				m_dress2:
+					'https://images.unsplash.com/photo-1664076458686-3449062080ac?auto=format&fit=crop&w=900&h=1200&q=80',
+				m_jacket:
+					'https://images.unsplash.com/photo-1512068549487-5e79d74c7fc3?auto=format&fit=crop&w=900&h=1200&q=80',
+				m_sand: 'https://images.unsplash.com/photo-1595882669314-919b3d51f2c7?auto=format&fit=crop&w=900&h=1200&q=80',
+				m_glasses:
+					'https://images.unsplash.com/photo-1603479614479-3e1c1c71dddb?auto=format&fit=crop&w=900&h=1200&q=80',
+				m_flower:
+					'https://images.unsplash.com/photo-1571513800374-df1bbe650e56?auto=format&fit=crop&w=900&h=1200&q=80',
+				m_face: 'https://images.unsplash.com/photo-1541130292430-a832637ddc0d?auto=format&fit=crop&w=900&h=1200&q=80',
+				m_suit: 'https://images.unsplash.com/photo-1603189343302-e603f7add05a?auto=format&fit=crop&w=900&h=1200&q=80',
+				m_coat2:
+					'https://images.unsplash.com/photo-1528120369764-0423708119ae?auto=format&fit=crop&w=900&h=1200&q=80',
+				man_bw: 'https://images.unsplash.com/photo-1475403614135-5f1aa0eb5015?auto=format&fit=crop&w=900&h=1200&q=80',
+				man_suit:
+					'https://images.unsplash.com/photo-1480429370139-e0132c086e2a?auto=format&fit=crop&w=900&h=1200&q=80',
+				man_blazer:
+					'https://images.unsplash.com/photo-1453396450673-3fe83d2db2c4?auto=format&fit=crop&w=900&h=1200&q=80',
+				man_window:
+					'https://images.unsplash.com/photo-1625698457101-fec2f565a8f0?auto=format&fit=crop&w=900&h=1200&q=80',
+			};
+
+			/* graceful image with fade-in + fallback */
+			function Img({ src, alt, className = '' }) {
+				const [err, setErr] = useState(false);
+				return (
+					<img
+						className={'ph ' + className}
+						src={src}
+						alt={alt || ''}
+						onLoad={(e) => e.target.classList.add('loaded')}
+						onError={(e) => {
+							if (!err) {
+								e.target.style.background =
+									'linear-gradient(135deg,#CFC9BE,#a9a294)';
+								e.target.classList.add('loaded');
+								setErr(true);
+							}
+						}}
+					/>
+				);
+			}
+
+			/* Resolve the element that actually scrolls. Standalone: document/window.
+		   Embedded in a React app: often a nested overflow:auto wrapper. We probe
+		   upward from #root and return {target, getY, getMax, getH}. Cached. */
+			let _scrollSrc = null;
+			function scrollSource() {
+				if (_scrollSrc) return _scrollSrc;
+				const root = document.getElementById('root');
+				let el = root ? root.parentElement : null;
+				let found = null;
+				while (
+					el &&
+					el !== document.body &&
+					el !== document.documentElement
+				) {
+					const s = getComputedStyle(el);
+					if (
+						(s.overflowY === 'auto' ||
+							s.overflowY === 'scroll' ||
+							s.overflowY === 'overlay') &&
+						el.scrollHeight > el.clientHeight
+					) {
+						found = el;
+						break;
+					}
+					el = el.parentElement;
+				}
+				_scrollSrc = found
+					? {
+							target: found,
+							getY: () => found.scrollTop,
+							getMax: () =>
+								found.scrollHeight - found.clientHeight,
+							getH: () => found.clientHeight,
+						}
+					: {
+							target: window,
+							getY: () =>
+								window.scrollY ||
+								document.documentElement.scrollTop ||
+								0,
+							getMax: () =>
+								document.documentElement.scrollHeight -
+								window.innerHeight,
+							getH: () => window.innerHeight,
+						};
+				return _scrollSrc;
+			}
+
+			function useScroll() {
+				const [y, setY] = useState(0);
+				useEffect(() => {
+					const src = scrollSource();
+					let raf = 0;
+					const on = () => {
+						if (raf) return;
+						raf = requestAnimationFrame(() => {
+							setY(src.getY());
+							raf = 0;
+						});
+					};
+					src.target.addEventListener('scroll', on, {
+						passive: true,
+					});
+					on();
+					return () => src.target.removeEventListener('scroll', on);
+				}, []);
+				return y;
+			}
+			function Progress() {
+				const [w, setW] = useState(0);
+				useEffect(() => {
+					const src = scrollSource();
+					const on = () => {
+						const h = src.getMax();
+						setW(h > 0 ? (src.getY() / h) * 100 : 0);
+					};
+					src.target.addEventListener('scroll', on, {
+						passive: true,
+					});
+					on();
+					return () => src.target.removeEventListener('scroll', on);
+				}, []);
+				return <div className="progress" style={{ width: w + '%' }} />;
+			}
+			function useReveal() {
+				const ref = useRef(null);
+				useEffect(() => {
+					const el = ref.current;
+					if (!el) return;
+					const io = new IntersectionObserver(
+						(es) =>
+							es.forEach((e) => {
+								if (e.isIntersecting) {
+									e.target.classList.add('in');
+									io.unobserve(e.target);
+								}
+							}),
+						{ threshold: 0.15 },
+					);
+					io.observe(el);
+					return () => io.disconnect();
+				}, []);
+				return ref;
+			}
+
+			/* INTRO */
+			function Intro() {
+				const y = useScroll();
+				return (
+					<section className="intro">
+						<div className="intro-photos">
+							<div
+								className="ip ip1"
+								style={{
+									transform: `translateY(${-y * 0.06}px)`,
+								}}
+							>
+								<Img
+									src={PHOTOS.m_red}
+									alt="Model in red blazer"
+								/>
+							</div>
+							<div
+								className="ip ip2"
+								style={{
+									transform: `translateY(${-y * 0.14}px)`,
+								}}
+							>
+								<Img
+									src={PHOTOS.man_bw}
+									alt="Male model, monochrome portrait"
+								/>
+							</div>
+							<div
+								className="ip ip3"
+								style={{
+									transform: `translateY(${-y * 0.09}px)`,
+								}}
+							>
+								<Img
+									src={PHOTOS.m_yellow}
+									alt="Model in yellow"
+								/>
+							</div>
+							<div
+								className="ip ip4"
+								style={{
+									transform: `translateY(${-y * 0.16}px)`,
+								}}
+							>
+								<Img
+									src={PHOTOS.man_suit}
+									alt="Male model in pinstripe suit"
+								/>
+							</div>
+							<div
+								className="ip ip5"
+								style={{
+									transform: `translateY(${-y * 0.11}px)`,
+								}}
+							>
+								<Img
+									src={PHOTOS.m_scarf}
+									alt="Model with scarf"
+								/>
+							</div>
+							<div
+								className="ip ip6"
+								style={{
+									transform: `translateY(${-y * 0.18}px)`,
+								}}
+							>
+								<Img
+									src={PHOTOS.m_sun}
+									alt="Model with sunglasses"
+								/>
+							</div>
+						</div>
+						<div className="intro-scrim"></div>
+						<div
+							className="intro-center"
+							style={{
+								transform: `translateY(${y * 0.18}px)`,
+								opacity: Math.max(1 - y / 600, 0),
+							}}
+						>
+							<div className="kicker">Guardian Fashion</div>
+							<h1>
+								The<span className="ed">Edit</span>
+							</h1>
+							<div className="meta">
+								Spring/Summer 2026 — the considered issue
+							</div>
+						</div>
+						<div className="scrollhint">
+							Scroll<div className="ln"></div>
+						</div>
+					</section>
+				);
+			}
+
+			function Strip() {
+				const t =
+					'The considered wardrobe — Oxblood as neutral — The drop shoulder returns — Heritage wool — Buy once, keep forever ';
+				return (
+					<div className="strip">
+						<div className="strip-track">
+							<span>{t}</span>
+							<span>{t}</span>
+						</div>
+					</div>
+				);
+			}
+
+			/* RAIL */
+			const LOOKS = [
+				{
+					img: 'm_coat',
+					no: 'Look 01',
+					name: 'The Camel Coat',
+					price: '£420',
+					note: 'Wool-cashmere, dropped shoulder',
+				},
+				{
+					img: 'm_reddress',
+					no: 'Look 02',
+					name: 'Oxblood Slip',
+					price: '£185',
+					note: 'Bias-cut silk',
+				},
+				{
+					img: 'm_jacket',
+					no: 'Look 03',
+					name: 'Leather, Softened',
+					price: '£540',
+					note: 'Vegetable-tanned',
+				},
+				{
+					img: 'man_blazer',
+					no: 'Look 04',
+					name: 'The Grey Blazer',
+					price: '£380',
+					note: 'Menswear, unstructured',
+				},
+				{
+					img: 'm_dress2',
+					no: 'Look 05',
+					name: 'The Column',
+					price: '£260',
+					note: 'Floor-length, marigold',
+				},
+				{
+					img: 'man_suit',
+					no: 'Look 06',
+					name: 'Pinstripe, Relaxed',
+					price: '£495',
+					note: 'Wool, soft shoulder',
+				},
+				{
+					img: 'm_glasses',
+					no: 'Look 07',
+					name: 'Cobalt Tailoring',
+					price: '£310',
+					note: 'Relaxed two-piece',
+				},
+			];
+			function Rail() {
+				const outer = useRef(null);
+				const [tx, setTx] = useState(0);
+				useEffect(() => {
+					const el = outer.current;
+					if (!el) return;
+					const src = scrollSource();
+					const on = () => {
+						const rect = el.getBoundingClientRect(); // viewport-relative
+						const viewH = src.getH();
+						const total = el.offsetHeight - viewH;
+						if (total <= 0) {
+							setTx(0);
+							return;
+						}
+						// top edge of the scroll viewport in the same coordinate space as rect.top
+						const viewTop =
+							src.target === window
+								? 0
+								: src.target.getBoundingClientRect().top;
+						const prog = Math.min(
+							Math.max((viewTop - rect.top) / total, 0),
+							1,
+						);
+						const track = el.querySelector('.rail-track');
+						const viewW =
+							src.target === window
+								? window.innerWidth
+								: src.target.clientWidth;
+						const dist = Math.max(track.scrollWidth - viewW, 0);
+						setTx(-prog * dist);
+					};
+					src.target.addEventListener('scroll', on, {
+						passive: true,
+					});
+					window.addEventListener('resize', on);
+					on();
+					return () => {
+						src.target.removeEventListener('scroll', on);
+						window.removeEventListener('resize', on);
+					};
+				}, []);
+				return (
+					<div
+						className="rail-outer"
+						ref={outer}
+						style={{ height: '340vh' }}
+					>
+						<div className="rail-sticky">
+							<div
+								className="rail-track"
+								style={{ transform: `translateX(${tx}px)` }}
+							>
+								<div className="rail-head">
+									<div className="eyebrow">
+										The Spring Edit
+									</div>
+									<h2>
+										Five looks,
+										<br />
+										<em>worth saving for</em>
+									</h2>
+									<p>
+										No churn, no filler — only the pieces
+										our editors would actually invest in.
+										Scroll to move through the rail.
+									</p>
+								</div>
+								{LOOKS.map((l, i) => (
+									<div className="look" key={i}>
+										<div className="look-img">
+											<span className="look-no">
+												{l.no}
+											</span>
+											<Img
+												src={PHOTOS[l.img]}
+												alt={l.name}
+											/>
+										</div>
+										<div className="look-meta">
+											<h3>{l.name}</h3>
+											<span className="price">
+												{l.price}
+											</span>
+										</div>
+										<div className="look-meta2">
+											{l.note}
+										</div>
+									</div>
+								))}
+							</div>
+						</div>
+					</div>
+				);
+			}
+
+			/* SPLIT editorial */
+			function Split() {
+				return (
+					<section className="split">
+						<div className="split-img">
+							<Img src={PHOTOS.m_gray} alt="Editorial portrait" />
+						</div>
+						<div className="split-txt">
+							<div className="eyebrow">The Cover Story</div>
+							<h2>
+								The most radical thing a designer can do now is{' '}
+								<em>restraint</em>.
+							</h2>
+							<p>
+								After seasons of noise, the quiet garment is the
+								bold one. We spent three months inside the
+								studios where the next decade of dressing is
+								being decided — and found designers competing,
+								almost paradoxically, to disappear into the
+								wardrobe of someone genuinely interesting.
+							</p>
+							<div className="sig">
+								— Imogen Hartley, Fashion Editor
+							</div>
+						</div>
+					</section>
+				);
+			}
+
+			/* PARALLAX QUOTE */
+			function Quote() {
+				const ref = useRef(null);
+				const [l, setL] = useState(0);
+				useEffect(() => {
+					const src = scrollSource();
+					const on = () => {
+						const el = ref.current;
+						if (!el) return;
+						const r = el.getBoundingClientRect();
+						setL(src.getH() - r.top);
+					};
+					src.target.addEventListener('scroll', on, {
+						passive: true,
+					});
+					on();
+					return () => src.target.removeEventListener('scroll', on);
+				}, []);
+				return (
+					<section className="quote" ref={ref}>
+						<div
+							className="qimg q1"
+							style={{ transform: `translateY(${l * 0.1}px)` }}
+						>
+							<Img src={PHOTOS.m_sand} alt="" />
+						</div>
+						<div
+							className="qimg q2"
+							style={{ transform: `translateY(${-l * 0.08}px)` }}
+						>
+							<Img src={PHOTOS.m_flower} alt="" />
+						</div>
+						<div className="qtext">
+							<p>
+								Fashion isn't frivolous. It's how a culture
+								tells you, in <em>cloth</em>, exactly what it
+								believes.
+							</p>
+						</div>
+					</section>
+				);
+			}
+
+			/* GALLERY */
+			const TILES = [
+				{ img: 'm_coat', cap: 'The coat, reconsidered', cls: 't-a' },
+				{ img: 'm_reddress', cap: 'Oxblood', cls: 't-b' },
+				{ img: 'm_sun', cap: 'Eyewear / 01', cls: 't-c' },
+				{ img: 'm_yellow', cap: 'Marigold', cls: 't-d' },
+				{ img: 'm_face', cap: 'The quiet portrait', cls: 't-e' },
+				{ img: 'man_window', cap: 'Menswear, in light', cls: 't-f' },
+			];
+			function Tile({ t }) {
+				const ref = useReveal();
+				return (
+					<div ref={ref} className={'tile ' + t.cls}>
+						<Img src={PHOTOS[t.img]} alt={t.cap} />
+						<div className="cap">{t.cap}</div>
+					</div>
+				);
+			}
+			function Gallery() {
+				return (
+					<section className="gallery">
+						<div className="gh">
+							<h2>
+								The whole <em>edit</em>
+							</h2>
+							<p>
+								Eighteen pieces, one point of view. Photographed
+								for The Guardian, Spring 2026.
+							</p>
+						</div>
+						<div className="grid">
+							{TILES.map((t, i) => (
+								<Tile key={i} t={t} />
+							))}
+						</div>
+					</section>
+				);
+			}
+
+			/* OUTRO */
+			function Outro() {
+				const [email, setEmail] = useState('');
+				const [sent, setSent] = useState(false);
+				return (
+					<section className="outro">
+						<div className="obg">
+							<Img src={PHOTOS.hero} alt="" />
+						</div>
+						<div className="ovl"></div>
+						<div className="inner">
+							<div className="eyebrow">
+								Free weekly newsletter
+							</div>
+							<h2>
+								Get the <em>Edit</em>
+							</h2>
+							<p>
+								The week in fashion, decoded — every Thursday.
+								No spam, no selling your data.
+							</p>
+							{!sent ? (
+								<div className="form">
+									<input
+										type="email"
+										placeholder="your@email.com"
+										value={email}
+										onChange={(e) =>
+											setEmail(e.target.value)
+										}
+										onKeyDown={(e) => {
+											if (
+												e.key === 'Enter' &&
+												email.includes('@')
+											)
+												setSent(true);
+										}}
+									/>
+									<button
+										onClick={() => {
+											if (email.includes('@'))
+												setSent(true);
+										}}
+									>
+										Subscribe →
+									</button>
+								</div>
+							) : (
+								<div className="ok">
+									You're in. See you Thursday.
+								</div>
+							)}
+						</div>
+						<div className="credit">
+							The Guardian · Fashion · A concept
+						</div>
+					</section>
+				);
+			}
+
+			function App() {
+				return (
+					<>
+						<Progress />
+						<Intro />
+						<Strip />
+						<Rail />
+						<Split />
+						<Quote />
+						<Gallery />
+						<Outro />
+					</>
+				);
+			}
+			ReactDOM.createRoot(document.getElementById('root')).render(
+				<App />,
+			);
+		</script>
+	</body>
+</html>
diff --git a/dotcom-rendering/src/frontend/feShell.ts b/dotcom-rendering/src/frontend/feShell.ts
new file mode 100644
index 00000000000..25c82ea363b
--- /dev/null
+++ b/dotcom-rendering/src/frontend/feShell.ts
@@ -0,0 +1,16 @@
+import type { EditionId } from '../lib/edition';
+import type { ConfigType } from '../types/config';
+import type { FooterType } from '../types/footer';
+import type { FENavType } from '../types/frontend';
+
+export type FEShell = {
+	canonicalUrl: string;
+	config: ConfigType;
+	contributionsServiceUrl: string;
+	editionId: EditionId;
+	guardianBaseURL: string;
+	isAdFreeUser: boolean;
+	nav: FENavType;
+	pageFooter: FooterType;
+	pageId: string;
+};
diff --git a/dotcom-rendering/src/frontend/schemas/feShell.json b/dotcom-rendering/src/frontend/schemas/feShell.json
new file mode 100644
index 00000000000..aa3b0275916
--- /dev/null
+++ b/dotcom-rendering/src/frontend/schemas/feShell.json
@@ -0,0 +1,853 @@
+{
+    "type": "object",
+    "properties": {
+        "canonicalUrl": {
+            "type": "string"
+        },
+        "config": {
+            "$ref": "#/definitions/ConfigType"
+        },
+        "contributionsServiceUrl": {
+            "type": "string"
+        },
+        "editionId": {
+            "$ref": "#/definitions/EditionId"
+        },
+        "guardianBaseURL": {
+            "type": "string"
+        },
+        "isAdFreeUser": {
+            "type": "boolean"
+        },
+        "nav": {
+            "$ref": "#/definitions/FENavType"
+        },
+        "pageFooter": {
+            "$ref": "#/definitions/FooterType"
+        },
+        "pageId": {
+            "type": "string"
+        }
+    },
+    "required": [
+        "canonicalUrl",
+        "config",
+        "contributionsServiceUrl",
+        "editionId",
+        "guardianBaseURL",
+        "isAdFreeUser",
+        "nav",
+        "pageFooter",
+        "pageId"
+    ],
+    "definitions": {
+        "ConfigType": {
+            "description": "the config model will contain useful app/site\nlevel data. Although currently derived from the config model\nconstructed in frontend and passed to dotcom-rendering\nthis data could eventually be defined in dotcom-rendering",
+            "type": "object",
+            "properties": {
+                "adUnit": {
+                    "type": "string"
+                },
+                "ajaxUrl": {
+                    "type": "string"
+                },
+                "brazeApiKey": {
+                    "type": "string"
+                },
+                "commercialBundleUrl": {
+                    "type": "string"
+                },
+                "dcrCouldRender": {
+                    "type": "boolean"
+                },
+                "dcrSentryDsn": {
+                    "type": "string"
+                },
+                "dfpAccountId": {
+                    "type": "string"
+                },
+                "discussionApiClientHeader": {
+                    "type": "string"
+                },
+                "discussionApiUrl": {
+                    "type": "string"
+                },
+                "discussionD2Uid": {
+                    "type": "string"
+                },
+                "edition": {
+                    "$ref": "#/definitions/EditionId"
+                },
+                "frontendAssetsFullURL": {
+                    "type": "string"
+                },
+                "googleRecaptchaSiteKey": {
+                    "type": "string"
+                },
+                "googleRecaptchaSiteKeyVisible": {
+                    "type": "string"
+                },
+                "googletagUrl": {
+                    "type": "string"
+                },
+                "hasPageSkin": {
+                    "type": "boolean"
+                },
+                "host": {
+                    "type": "string"
+                },
+                "idApiUrl": {
+                    "type": "string"
+                },
+                "idUrl": {
+                    "type": "string"
+                },
+                "ipsosTag": {
+                    "type": "string"
+                },
+                "isDev": {
+                    "type": "boolean"
+                },
+                "isLive": {
+                    "type": "boolean"
+                },
+                "isLiveBlog": {
+                    "type": "boolean"
+                },
+                "isPaidContent": {
+                    "type": "boolean"
+                },
+                "isPhotoEssay": {
+                    "type": "boolean"
+                },
+                "isPreview": {
+                    "type": "boolean"
+                },
+                "isSensitive": {
+                    "type": "boolean"
+                },
+                "keywordIds": {
+                    "type": "string"
+                },
+                "mmaUrl": {
+                    "type": "string"
+                },
+                "references": {
+                    "type": "array",
+                    "items": {
+                        "type": "object",
+                        "additionalProperties": {
+                            "type": "string"
+                        }
+                    }
+                },
+                "revisionNumber": {
+                    "type": "string"
+                },
+                "section": {
+                    "type": "string"
+                },
+                "sentryHost": {
+                    "type": "string"
+                },
+                "sentryPublicApiKey": {
+                    "type": "string"
+                },
+                "serverSideABTests": {
+                    "$ref": "#/definitions/Record<string,string>"
+                },
+                "sharedAdTargeting": {
+                    "$ref": "#/definitions/SharedAdTargeting"
+                },
+                "shortUrlId": {
+                    "type": "string"
+                },
+                "shouldHideReaderRevenue": {
+                    "type": "boolean"
+                },
+                "showRelatedContent": {
+                    "type": "boolean"
+                },
+                "source": {
+                    "type": "string"
+                },
+                "stage": {
+                    "$ref": "#/definitions/StageType"
+                },
+                "switches": {
+                    "$ref": "#/definitions/Switches"
+                },
+                "userBenefitsApiUrl": {
+                    "type": "string"
+                },
+                "videoDuration": {
+                    "type": "number"
+                },
+                "pageId": {
+                    "type": "string"
+                },
+                "webPublicationDate": {
+                    "type": "number"
+                },
+                "headline": {
+                    "type": "string"
+                },
+                "author": {
+                    "type": "string"
+                },
+                "keywords": {
+                    "type": "string"
+                },
+                "series": {
+                    "type": "string"
+                },
+                "toneIds": {
+                    "type": "string"
+                },
+                "contentType": {
+                    "type": "string"
+                },
+                "ampIframeUrl": {
+                    "type": "string"
+                },
+                "hasLiveBlogTopAd": {
+                    "type": "boolean"
+                },
+                "hasSurveyAd": {
+                    "type": "boolean"
+                },
+                "a9PublisherId": {
+                    "type": "string"
+                },
+                "allowUserGeneratedContent": {
+                    "type": "boolean"
+                },
+                "assetsPath": {
+                    "type": "string"
+                },
+                "atoms": {
+                    "type": "array",
+                    "items": {
+                        "type": "string"
+                    }
+                },
+                "atomTypes": {
+                    "type": "object",
+                    "properties": {
+                        "audio": {
+                            "type": "boolean"
+                        },
+                        "callToAction": {
+                            "type": "boolean"
+                        },
+                        "chart": {
+                            "type": "boolean"
+                        },
+                        "commonsdivision": {
+                            "type": "boolean"
+                        },
+                        "explainer": {
+                            "type": "boolean"
+                        },
+                        "guide": {
+                            "type": "boolean"
+                        },
+                        "interactive": {
+                            "type": "boolean"
+                        },
+                        "media": {
+                            "type": "boolean"
+                        },
+                        "profile": {
+                            "type": "boolean"
+                        },
+                        "qanda": {
+                            "type": "boolean"
+                        },
+                        "quizz": {
+                            "type": "boolean"
+                        },
+                        "review": {
+                            "type": "boolean"
+                        },
+                        "timeline": {
+                            "type": "boolean"
+                        }
+                    }
+                },
+                "authorIds": {
+                    "type": "string"
+                },
+                "avatarApiUrl": {
+                    "type": "string"
+                },
+                "avatarImagesUrl": {
+                    "type": "string"
+                },
+                "beaconUrl": {
+                    "type": "string"
+                },
+                "blogIds": {
+                    "type": "string"
+                },
+                "blogs": {
+                    "type": "string"
+                },
+                "buildNumber": {
+                    "type": "string"
+                },
+                "byline": {
+                    "type": "string"
+                },
+                "calloutsUrl": {
+                    "type": "string"
+                },
+                "campaigns": {
+                    "type": "array",
+                    "items": {
+                        "type": "object",
+                        "properties": {
+                            "id": {
+                                "type": "string"
+                            },
+                            "name": {
+                                "type": "string"
+                            },
+                            "rules": {
+                                "type": "array",
+                                "items": {}
+                            },
+                            "priority": {
+                                "type": "number"
+                            },
+                            "displayOnSensitive": {
+                                "type": "boolean"
+                            },
+                            "fields": {
+                                "type": "object",
+                                "properties": {
+                                    "campaignId": {
+                                        "type": "string"
+                                    },
+                                    "_type": {
+                                        "type": "string"
+                                    }
+                                }
+                            }
+                        }
+                    }
+                },
+                "cardStyle": {
+                    "type": "string"
+                },
+                "commentable": {
+                    "type": "boolean"
+                },
+                "commissioningDesks": {
+                    "type": "string"
+                },
+                "contentId": {
+                    "type": "string"
+                },
+                "contributorBio": {
+                    "type": "string"
+                },
+                "dfpAdUnitRoot": {
+                    "type": "string"
+                },
+                "dfpHost": {
+                    "type": "string"
+                },
+                "disableStickyTopBanner": {
+                    "type": "boolean"
+                },
+                "externalEmbedHost": {
+                    "type": "string"
+                },
+                "facebookIaAdUnitRoot": {
+                    "type": "string"
+                },
+                "fbAppId": {
+                    "type": "string"
+                },
+                "forecastsapiurl": {
+                    "type": "string"
+                },
+                "frontendSentryDsn": {
+                    "type": "string"
+                },
+                "googleSearchId": {
+                    "type": "string"
+                },
+                "googleSearchUrl": {
+                    "type": "string"
+                },
+                "googletagJsUrl": {
+                    "type": "string"
+                },
+                "hasMultipleVideosInPage": {
+                    "type": "boolean"
+                },
+                "hasShowcaseMainElement": {
+                    "type": "boolean"
+                },
+                "hasYouTubeAtom": {
+                    "type": "boolean"
+                },
+                "idOAuthUrl": {
+                    "type": "string"
+                },
+                "idWebAppUrl": {
+                    "type": "string"
+                },
+                "inBodyExternalLinkCount": {
+                    "type": "number"
+                },
+                "inBodyInternalLinkCount": {
+                    "type": "number"
+                },
+                "isAdFree": {
+                    "type": "boolean"
+                },
+                "isColumn": {
+                    "type": "boolean"
+                },
+                "isContent": {
+                    "type": "boolean"
+                },
+                "isFront": {
+                    "type": "boolean"
+                },
+                "isHosted": {
+                    "type": "boolean"
+                },
+                "isImmersive": {
+                    "type": "boolean"
+                },
+                "isNumberedList": {
+                    "type": "boolean"
+                },
+                "isProd": {
+                    "type": "boolean"
+                },
+                "isSplash": {
+                    "type": "boolean"
+                },
+                "lightboxImages": {
+                    "type": "object",
+                    "properties": {
+                        "id": {
+                            "type": "string"
+                        },
+                        "headline": {
+                            "type": "string"
+                        },
+                        "shouldHideAdverts": {
+                            "type": "boolean"
+                        },
+                        "standfirst": {
+                            "type": "string"
+                        },
+                        "images": {
+                            "type": "array",
+                            "items": {
+                                "type": "object",
+                                "properties": {
+                                    "caption": {
+                                        "type": "string"
+                                    },
+                                    "credit": {
+                                        "type": "string"
+                                    },
+                                    "displayCredit": {
+                                        "type": "boolean"
+                                    },
+                                    "src": {
+                                        "type": "string"
+                                    },
+                                    "srcsets": {
+                                        "type": "string"
+                                    },
+                                    "sizes": {
+                                        "type": "string"
+                                    },
+                                    "ratio": {
+                                        "type": "number"
+                                    },
+                                    "role": {
+                                        "type": "string"
+                                    },
+                                    "parentContentId": {
+                                        "type": "string"
+                                    },
+                                    "id": {
+                                        "type": "string"
+                                    }
+                                }
+                            }
+                        }
+                    }
+                },
+                "locationapiurl": {
+                    "type": "string"
+                },
+                "membershipAccess": {
+                    "type": "string"
+                },
+                "membershipUrl": {
+                    "type": "string"
+                },
+                "mobileAppsAdUnitRoot": {
+                    "type": "string"
+                },
+                "nonKeywordTagIds": {
+                    "type": "string"
+                },
+                "omnitureAccount": {
+                    "type": "string"
+                },
+                "omnitureAmpAccount": {
+                    "type": "string"
+                },
+                "onwardWebSocket": {
+                    "type": "string"
+                },
+                "ophanEmbedJsUrl": {
+                    "type": "string"
+                },
+                "ophanJsUrl": {
+                    "type": "string"
+                },
+                "optimizeEpicUrl": {
+                    "type": "string"
+                },
+                "pageCode": {
+                    "type": "string"
+                },
+                "pbIndexSites": {},
+                "pillar": {
+                    "type": "string"
+                },
+                "plistaPublicApiKey": {
+                    "type": "string"
+                },
+                "productionOffice": {
+                    "type": "string"
+                },
+                "publication": {
+                    "type": "string"
+                },
+                "requiresMembershipAccess": {
+                    "type": "boolean"
+                },
+                "richLink": {
+                    "type": "string"
+                },
+                "sectionName": {
+                    "type": "string"
+                },
+                "shortUrl": {
+                    "type": "string"
+                },
+                "shouldHideAdverts": {
+                    "type": "boolean"
+                },
+                "sponsorshipType": {
+                    "type": "string"
+                },
+                "stripePublicToken": {
+                    "type": "string"
+                },
+                "supportUrl": {
+                    "type": "string"
+                },
+                "thirdPartyAppsAccount": {
+                    "type": "string"
+                },
+                "thumbnail": {
+                    "type": "string"
+                },
+                "tones": {
+                    "type": "string"
+                },
+                "userAttributesApiUrl": {
+                    "type": "string"
+                },
+                "weatherapiurl": {
+                    "type": "string"
+                },
+                "webTitle": {
+                    "type": "string"
+                },
+                "wordCount": {
+                    "type": "number"
+                }
+            },
+            "required": [
+                "adUnit",
+                "ajaxUrl",
+                "ampIframeUrl",
+                "commercialBundleUrl",
+                "contentType",
+                "dcrSentryDsn",
+                "dfpAccountId",
+                "discussionApiClientHeader",
+                "discussionApiUrl",
+                "discussionD2Uid",
+                "edition",
+                "frontendAssetsFullURL",
+                "googletagUrl",
+                "idApiUrl",
+                "isSensitive",
+                "keywordIds",
+                "pageId",
+                "revisionNumber",
+                "section",
+                "sentryHost",
+                "sentryPublicApiKey",
+                "serverSideABTests",
+                "sharedAdTargeting",
+                "shortUrlId",
+                "showRelatedContent",
+                "stage",
+                "switches"
+            ]
+        },
+        "EditionId": {
+            "enum": [
+                "AU",
+                "EUR",
+                "INT",
+                "UK",
+                "US"
+            ],
+            "type": "string"
+        },
+        "Record<string,string>": {
+            "type": "object"
+        },
+        "SharedAdTargeting": {
+            "type": "object"
+        },
+        "StageType": {
+            "enum": [
+                "CODE",
+                "DEV",
+                "PROD"
+            ],
+            "type": "string"
+        },
+        "Switches": {
+            "type": "object",
+            "additionalProperties": {
+                "type": "boolean"
+            }
+        },
+        "FENavType": {
+            "type": "object",
+            "properties": {
+                "currentUrl": {
+                    "type": "string"
+                },
+                "pillars": {
+                    "type": "array",
+                    "items": {
+                        "$ref": "#/definitions/FELinkType"
+                    }
+                },
+                "otherLinks": {
+                    "type": "array",
+                    "items": {
+                        "$ref": "#/definitions/FELinkType"
+                    }
+                },
+                "brandExtensions": {
+                    "type": "array",
+                    "items": {
+                        "$ref": "#/definitions/FELinkType"
+                    }
+                },
+                "currentNavLink": {
+                    "$ref": "#/definitions/FELinkType"
+                },
+                "currentNavLinkTitle": {
+                    "type": "string"
+                },
+                "currentPillarTitle": {
+                    "type": "string"
+                },
+                "subNavSections": {
+                    "type": "object",
+                    "properties": {
+                        "parent": {
+                            "$ref": "#/definitions/FELinkType"
+                        },
+                        "links": {
+                            "type": "array",
+                            "items": {
+                                "$ref": "#/definitions/FELinkType"
+                            }
+                        }
+                    },
+                    "required": [
+                        "links"
+                    ]
+                },
+                "readerRevenueLinks": {
+                    "$ref": "#/definitions/ReaderRevenuePositions"
+                }
+            },
+            "required": [
+                "brandExtensions",
+                "currentUrl",
+                "otherLinks",
+                "pillars",
+                "readerRevenueLinks"
+            ]
+        },
+        "FELinkType": {
+            "description": "Data types for the API request bodies from clients that require transformation before internal use.\nWhere data types are coming from Frontend we try to use the 'FE' prefix.\nPrior to this we used 'CAPI' as a prefix which wasn't entirely accurate, and some data structures never received the prefix, meaning some are still missing it.",
+            "type": "object",
+            "properties": {
+                "url": {
+                    "type": "string"
+                },
+                "title": {
+                    "type": "string"
+                },
+                "longTitle": {
+                    "type": "string"
+                },
+                "iconName": {
+                    "type": "string"
+                },
+                "children": {
+                    "type": "array",
+                    "items": {
+                        "$ref": "#/definitions/FELinkType"
+                    }
+                },
+                "pillar": {
+                    "$ref": "#/definitions/LegacyPillar"
+                },
+                "more": {
+                    "type": "boolean"
+                },
+                "classList": {
+                    "type": "array",
+                    "items": {
+                        "type": "string"
+                    }
+                }
+            },
+            "required": [
+                "title",
+                "url"
+            ]
+        },
+        "LegacyPillar": {
+            "enum": [
+                "culture",
+                "labs",
+                "lifestyle",
+                "news",
+                "opinion",
+                "sport"
+            ],
+            "type": "string"
+        },
+        "ReaderRevenuePositions": {
+            "type": "object",
+            "properties": {
+                "header": {
+                    "$ref": "#/definitions/ReaderRevenueCategories"
+                },
+                "footer": {
+                    "$ref": "#/definitions/ReaderRevenueCategories"
+                },
+                "sideMenu": {
+                    "$ref": "#/definitions/ReaderRevenueCategories"
+                },
+                "ampHeader": {
+                    "$ref": "#/definitions/ReaderRevenueCategories"
+                },
+                "ampFooter": {
+                    "$ref": "#/definitions/ReaderRevenueCategories"
+                }
+            },
+            "required": [
+                "ampFooter",
+                "ampHeader",
+                "footer",
+                "header",
+                "sideMenu"
+            ]
+        },
+        "ReaderRevenueCategories": {
+            "type": "object",
+            "properties": {
+                "contribute": {
+                    "type": "string"
+                },
+                "subscribe": {
+                    "type": "string"
+                },
+                "support": {
+                    "type": "string"
+                },
+                "supporter": {
+                    "type": "string"
+                },
+                "gifting": {
+                    "type": "string"
+                }
+            },
+            "required": [
+                "contribute",
+                "subscribe",
+                "support",
+                "supporter"
+            ]
+        },
+        "FooterType": {
+            "type": "object",
+            "properties": {
+                "footerLinks": {
+                    "type": "array",
+                    "items": {
+                        "type": "array",
+                        "items": {
+                            "$ref": "#/definitions/FooterLink"
+                        }
+                    }
+                }
+            },
+            "required": [
+                "footerLinks"
+            ]
+        },
+        "FooterLink": {
+            "type": "object",
+            "properties": {
+                "text": {
+                    "type": "string"
+                },
+                "url": {
+                    "type": "string"
+                },
+                "dataLinkName": {
+                    "type": "string"
+                },
+                "extraClasses": {
+                    "type": "string"
+                }
+            },
+            "required": [
+                "dataLinkName",
+                "text",
+                "url"
+            ]
+        }
+    },
+    "$schema": "http://json-schema.org/draft-07/schema#"
+}
\ No newline at end of file
diff --git a/dotcom-rendering/src/lib/canRenderAds.ts b/dotcom-rendering/src/lib/canRenderAds.ts
index a59debd4b8a..c0c286563b8 100644
--- a/dotcom-rendering/src/lib/canRenderAds.ts
+++ b/dotcom-rendering/src/lib/canRenderAds.ts
@@ -1,3 +1,4 @@
+import type { FEShell } from '../frontend/feShell';
 import type { SportDataPage } from '../sportDataPage';
 import type { ArticleDeprecated } from '../types/article';
 import type { Front } from '../types/front';
@@ -8,7 +9,7 @@ import type { TagPage } from '../types/tagPage';
  * prevent ads from being displayed.
  */
 export const canRenderAds = (
-	pageData: ArticleDeprecated | Front | TagPage | SportDataPage,
+	pageData: ArticleDeprecated | Front | TagPage | SportDataPage | FEShell,
 ): boolean => {
 	if (pageData.isAdFreeUser) {
 		return false;
diff --git a/dotcom-rendering/src/model/validate.ts b/dotcom-rendering/src/model/validate.ts
index 89791de1f3d..7602dced544 100644
--- a/dotcom-rendering/src/model/validate.ts
+++ b/dotcom-rendering/src/model/validate.ts
@@ -8,6 +8,7 @@ import type { FEFootballMatchInfoPage } from '../frontend/feFootballMatchInfoPag
 import type { FEFootballMatchListPage } from '../frontend/feFootballMatchListPage';
 import type { FEFootballTablesPage } from '../frontend/feFootballTablesPage';
 import type { FEFront } from '../frontend/feFront';
+import type { FEShell } from '../frontend/feShell';
 import type { FETagPage } from '../frontend/feTagPage';
 import articleSchema from '../frontend/schemas/feArticle.json';
 import cricketMatchPageSchema from '../frontend/schemas/feCricketMatchPage.json';
@@ -15,6 +16,7 @@ import footballMatchInfoPageSchema from '../frontend/schemas/feFootballMatchInfo
 import footballMatchListPageSchema from '../frontend/schemas/feFootballMatchListPage.json';
 import footballTablesPageSchema from '../frontend/schemas/feFootballTablesPage.json';
 import frontSchema from '../frontend/schemas/feFront.json';
+import shellSchema from '../frontend/schemas/feShell.json';
 import tagPageSchema from '../frontend/schemas/feTagPage.json';
 import type { Block } from '../types/blocks';
 import type { FEEditionsCrosswords } from '../types/editionsCrossword';
@@ -57,6 +59,20 @@ const validateFootballMatchInfoPage = ajv.compile<FEFootballMatchInfoPage>(
 	footballMatchInfoPageSchema,
 );
 
+const validateShell = ajv.compile<FEShell>(shellSchema);
+
+export const validateAsFESite = (data: unknown): FEArticle => {
+	if (validateArticle(data)) return data;
+
+	const url =
+		isObject(data) && isString(data.webURL) ? data.webURL : 'unknown url';
+
+	throw new TypeError(
+		`Unable to validate request body for url ${url}.\n
+            ${JSON.stringify(validateArticle.errors, null, 2)}`,
+	);
+};
+
 export const validateAsFEArticle = (data: unknown): FEArticle => {
 	if (validateArticle(data)) return data;
 
@@ -186,3 +202,17 @@ export const validateAsFootballMatchPageType = (
             ${JSON.stringify(validateFootballMatchInfoPage.errors, null, 2)}`,
 	);
 };
+
+export const validateAsFEShell = (data: unknown): FEShell => {
+	if (validateShell(data)) return data;
+
+	const url =
+		isObject(data) && isObject(data.config) && isString(data.config.pageId)
+			? data.config.pageId
+			: 'unknown url';
+
+	throw new TypeError(
+		`Unable to validate request body for url ${url}.\n
+            ${JSON.stringify(validateShell.errors, null, 2)}`,
+	);
+};
diff --git a/dotcom-rendering/src/server/handler.article.web.ts b/dotcom-rendering/src/server/handler.article.web.ts
index 73814f36f93..6530d25aee5 100644
--- a/dotcom-rendering/src/server/handler.article.web.ts
+++ b/dotcom-rendering/src/server/handler.article.web.ts
@@ -11,6 +11,16 @@ import {
 	renderHostedContent,
 } from './render.article.web';
 
+export const handleSite: RequestHandler = ({ body }, res) => {
+	const frontendData = validateAsFEArticle(body);
+	const article = enhanceArticleType(frontendData, 'Web');
+	const { html, prefetchScripts } = renderArticle({
+		article,
+	});
+
+	res.status(200).set('Link', makePrefetchHeader(prefetchScripts)).send(html);
+};
+
 export const handleArticle: RequestHandler = ({ body }, res) => {
 	const frontendData = validateAsFEArticle(body);
 	const article = enhanceArticleType(frontendData, 'Web');
diff --git a/dotcom-rendering/src/server/handler.shell.web.ts b/dotcom-rendering/src/server/handler.shell.web.ts
new file mode 100644
index 00000000000..4991e63fa3c
--- /dev/null
+++ b/dotcom-rendering/src/server/handler.shell.web.ts
@@ -0,0 +1,17 @@
+import type { RequestHandler } from 'express';
+import { validateAsFEShell } from '../model/validate';
+import { makePrefetchHeader } from './lib/header';
+import { renderShell } from './render.shell.web';
+
+export const handleShell: RequestHandler = ({ params, body }, res) => {
+	const { name } = params;
+	if (typeof name !== 'string') {
+		res.status(400).send('Invalid site name');
+		return;
+	}
+
+	const frontendData = validateAsFEShell(body);
+	const { html, prefetchScripts } = renderShell(frontendData, name);
+
+	res.status(200).set('Link', makePrefetchHeader(prefetchScripts)).send(html);
+};
diff --git a/dotcom-rendering/src/server/lib/get-content-from-url.ts b/dotcom-rendering/src/server/lib/get-content-from-url.ts
index ebde7b5eaec..48035885ada 100644
--- a/dotcom-rendering/src/server/lib/get-content-from-url.ts
+++ b/dotcom-rendering/src/server/lib/get-content-from-url.ts
@@ -43,6 +43,20 @@ async function getContentFromURL(
 			throw error;
 		});
 
+	// TODO: HACK!
+	if (url.pathname.startsWith('/site')) {
+		return {
+			...config,
+			config: {
+				// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access -- poc
+				...config.config,
+				keywordIds: 'shell',
+				shortUrlId: '',
+				showRelatedContent: false,
+			},
+		};
+	}
+
 	return config;
 }
 
@@ -51,8 +65,11 @@ async function getContentFromURL(
  */
 export const parseURL = (requestUrl: string): URL | undefined => {
 	try {
+		const splitPos = requestUrl.toLocaleLowerCase().startsWith('/site/')
+			? 3
+			: 2;
 		return new URL(
-			decodeURIComponent(requestUrl.split('/').slice(2).join('/')),
+			decodeURIComponent(requestUrl.split('/').slice(splitPos).join('/')),
 		);
 	} catch (error) {
 		return undefined;
diff --git a/dotcom-rendering/src/server/render.shell.web.tsx b/dotcom-rendering/src/server/render.shell.web.tsx
new file mode 100644
index 00000000000..66bc3f12bf0
--- /dev/null
+++ b/dotcom-rendering/src/server/render.shell.web.tsx
@@ -0,0 +1,118 @@
+import { isString } from '@guardian/libs';
+import { ConfigProvider } from '../components/ConfigContext';
+import { ShellPage } from '../components/ShellPage';
+import type { FEShell } from '../frontend/feShell';
+import {
+	ASSET_ORIGIN,
+	generateScriptTags,
+	getModulesBuild,
+	getPathFromManifest,
+} from '../lib/assets';
+import { renderToStringWithEmotion } from '../lib/emotion';
+import { polyfillIO } from '../lib/polyfill.io';
+import type { NavType } from '../model/extract-nav';
+import { extractNAV } from '../model/extract-nav';
+import { createGuardian as createWindowGuardian } from '../model/guardian';
+import type { Config } from '../types/configContext';
+import type { FENavType } from '../types/frontend';
+import { htmlPageTemplate } from './htmlPageTemplate';
+
+// TODO: PoC!
+
+const parseNav = (nav: FENavType): NavType => {
+	return {
+		...extractNAV(nav),
+		selectedPillar: undefined,
+	};
+};
+
+export const renderShell = (
+	frontendData: FEShell,
+	name: string,
+): { html: string; prefetchScripts: string[] } => {
+	const NAV = parseNav(frontendData.nav);
+
+	const title = `Shell Page - ${name}`;
+
+	const renderingTarget = 'Web';
+	const config: Config = {
+		renderingTarget,
+		darkModeAvailable: false,
+		assetOrigin: ASSET_ORIGIN,
+		editionId: frontendData.editionId,
+	};
+
+	const { html, extractedCss } = renderToStringWithEmotion(
+		<ConfigProvider value={config}>
+			<ShellPage
+				feShell={frontendData}
+				nav={NAV}
+				renderingTarget={renderingTarget}
+			/>
+		</ConfigProvider>,
+	);
+
+	const build = getModulesBuild();
+
+	/**
+	 * The highest priority scripts.
+	 * These scripts have a considerable impact on site performance.
+	 * Only scripts critical to application execution may go in here.
+	 * Please talk to the dotcom platform team before adding more.
+	 * Scripts will be executed in the order they appear in this array
+	 */
+	const prefetchScripts = [
+		polyfillIO,
+		getPathFromManifest(build, 'frameworks.js'),
+		getPathFromManifest(build, 'index.js'),
+		process.env.COMMERCIAL_BUNDLE_URL ??
+			frontendData.config.commercialBundleUrl,
+	].filter(isString);
+
+	const scriptTags = generateScriptTags(prefetchScripts);
+
+	/**
+	 * We escape windowGuardian here to prevent errors when the data
+	 * is placed in a script tag on the page
+	 */
+	const guardian = createWindowGuardian({
+		editionId: frontendData.editionId,
+		stage: frontendData.config.stage,
+		frontendAssetsFullURL: frontendData.config.frontendAssetsFullURL,
+		revisionNumber: frontendData.config.revisionNumber,
+		sentryPublicApiKey: frontendData.config.sentryPublicApiKey,
+		sentryHost: frontendData.config.sentryHost,
+		keywordIds: frontendData.config.keywordIds,
+		dfpAccountId: frontendData.config.dfpAccountId,
+		adUnit: frontendData.config.adUnit,
+		ajaxUrl: frontendData.config.ajaxUrl,
+		googletagUrl: frontendData.config.googletagUrl,
+		switches: frontendData.config.switches,
+		serverSideABTests: frontendData.config.serverSideABTests,
+		brazeApiKey: frontendData.config.brazeApiKey,
+		googleRecaptchaSiteKey: frontendData.config.googleRecaptchaSiteKey,
+		// Until we understand exactly what config we need to make available client-side,
+		// add everything we haven't explicitly typed as unknown config
+		unknownConfig: frontendData.config,
+	});
+
+	const section = frontendData.config.section;
+
+	const pageHtml = htmlPageTemplate({
+		scriptTags,
+		css: extractedCss,
+		html,
+		title,
+		description: 'Shell page',
+		guardian,
+		section,
+		canonicalUrl: frontendData.canonicalUrl,
+		renderingTarget: 'Web',
+		weAreHiring: !!frontendData.config.switches.weAreHiring,
+		config,
+		hasLiveBlogTopAd: !!frontendData.config.hasLiveBlogTopAd,
+		hasSurveyAd: !!frontendData.config.hasSurveyAd,
+	});
+
+	return { html: pageHtml, prefetchScripts };
+};
diff --git a/dotcom-rendering/src/server/server.dev.ts b/dotcom-rendering/src/server/server.dev.ts
index a8915867297..2aa0815a476 100644
--- a/dotcom-rendering/src/server/server.dev.ts
+++ b/dotcom-rendering/src/server/server.dev.ts
@@ -18,6 +18,7 @@ import { handleAppsAssets } from './handler.assets.apps';
 import { handleEditionsCrossword } from './handler.editionsCrossword';
 import { handleFootballMatchDayEmbed } from './handler.footballMatchDayEmbed';
 import { handleFront, handleTagPage } from './handler.front.web';
+import { handleShell } from './handler.shell.web';
 import {
 	handleAppsFootballMatchPage,
 	handleCricketMatchPage,
@@ -124,6 +125,7 @@ renderer.get('/HostedContent/*url', handleHostedContent);
 renderer.get('/AppsHostedContent/*url', handleAppsHostedContent);
 renderer.get('/AppsComponent/thrasher/:name', handleAppsThrasher);
 renderer.get('/FootballMatchDayEmbed/*url', handleFootballMatchDayEmbed);
+renderer.get('/Site/:name/*url', handleShell);
 
 // POST routes for running frontend locally
 renderer.post('/Article', handleArticle);
@@ -145,6 +147,7 @@ renderer.post('/HostedContent', handleHostedContent);
 renderer.post('/AppsHostedContent', handleAppsHostedContent);
 renderer.post('/AppsComponent/thrasher/:name', handleAppsThrasher);
 renderer.post('/FootballMatchDayEmbed', handleFootballMatchDayEmbed);
+renderer.post('/Site/:name', handleShell);
 
 renderer.get('/assets/rendered-items-assets', handleAppsAssets);
 
diff --git a/dotcom-rendering/webpack/.swcrc.json b/dotcom-rendering/webpack/.swcrc.json
index 490d70a5893..a0f037cdfc7 100644
--- a/dotcom-rendering/webpack/.swcrc.json
+++ b/dotcom-rendering/webpack/.swcrc.json
@@ -10,7 +10,8 @@
 		"transform": {
 			"react": {
 				"runtime": "automatic",
-				"importSource": "@emotion/react"
+				"importSource": "@emotion/react",
+				"throwIfNamespace": false
 			}
 		},
 		"experimental": {
diff --git a/dotcom-rendering/webpack/webpack.config.server.js b/dotcom-rendering/webpack/webpack.config.server.js
index bb3282477b8..c56dc6bef0c 100644
--- a/dotcom-rendering/webpack/webpack.config.server.js
+++ b/dotcom-rendering/webpack/webpack.config.server.js
@@ -82,6 +82,10 @@ module.exports = {
 				exclude: transpileExclude,
 				use: swcLoader,
 			},
+			{
+				test: /\.html$/i,
+				type: 'asset/source',
+			},
 			svgr,
 			{
 				test: /jsdom.*computed-style\.js$/,