/**
 * The seventeen pages that keep their own copy.
 *
 * Alex, 11 Aug 2026: the site launches with everything District Four already
 * have. The url map marks seventeen URLs "restyle-keep-copy", meaning their
 * words stay exactly as written and only the setting changes. Kyle drew no
 * design for any of them, so unlike everything else in this theme there is no
 * export to transcribe and no shape to match against.
 *
 * What there IS, and what every number below comes from, is his design language
 * on the pages he did draw. So this is his parts arranged, in the same spirit as
 * templates.css, and every value here is lifted from a measured class in the
 * generated shapes.css rather than chosen:
 *
 *   the accordion rule and its 22px rows      .d4x81e44f9c / .d4x59b5b602
 *   18px/1.75 body copy on #1d1d1d            .d4x92db83db
 *   15px/1.7 inside an answer                 .d4x9235e035
 *   the terracotta button, 16px by 40px       .d4x5b8ee406
 *   48px/1.08/300 at -0.02em for a heading    .d4x9464aa30
 *   the 12px 0.16em grey eyebrow              .d4x84f25956
 *
 * WHAT THEIR PAGES ACTUALLY ARE, and it is not a document. Every one is a stack
 * of full width bands, and the photography that makes them work is set on the
 * Elementor CONTAINER rather than dropped in as an image. So the converter emits
 * four shapes, all core blocks, and this styles them:
 *
 *   .d4-prose-hero    the opening band, their headline over their photograph
 *   .d4-band--cover   words over a photograph
 *   .d4-band--media   a photograph beside words, stacking on a phone
 *   .d4-band--photo   a photograph on its own
 *   .d4-prose         words on their own, in a 780px column
 *
 * NOT LOADED ON THE OTHER 64 PAGES. inc/enqueue.php only sends this to a post
 * carrying _d4_keep_copy, the same discipline templates.css follows, so the
 * pages built from Kyle's shapes do not carry styles for content they have not
 * got.
 *
 * THE FULL WIDTH BAND IS NOT alignfull, on purpose. The theme does not declare
 * wide alignment support, and the usual 100vw full bleed counts the scrollbar
 * and pushes the whole page sideways in Firefox on Windows. The hero is simply
 * an unconstrained group, so it is already the width of the page, and its inner
 * measure is set here.
 */

/* ---------------------------------------------------------------------------
   The bands
   ---------------------------------------------------------------------------
   Every band is a top level block, and page.php prints the content with nothing
   around it, so they are already the full width of the page. Nothing here uses
   100vw: it counts the scrollbar and pushes the whole page sideways in Firefox
   on Windows.
   --------------------------------------------------------------------------- */

.d4-band,
.d4-prose-hero {
	margin-block: 0;
}

/* Words over a photograph.
   Their pictures are office interiors and most of them are PALE, so the cover
   block's flat 60% dim turns half these bands into a muddy grey rectangle. It
   is replaced with the gradient Kyle uses on his own photo panels: solid where
   the words are, clear where the picture is worth seeing. Measured from
   .d4x84df86f9 in the generated shapes.css, turned on its side because their
   copy sits left rather than bottom. */
.d4-band--cover,
.wp-block-cover.d4-prose-hero {
	min-height: 0;
	padding-block: clamp(56px, 8vw, 104px);
	padding-inline: var(--d4-gutter);
	color: var(--wp--preset--color--paper);
}

.d4-band--cover > .wp-block-cover__background,
.wp-block-cover.d4-prose-hero > .wp-block-cover__background {
	background: linear-gradient(
		90deg,
		rgb(29 29 29 / 0.92) 0%,
		rgb(29 29 29 / 0.82) 42%,
		rgb(29 29 29 / 0.18) 100%
	);
	opacity: 1;
}

/* The CONTENT COLUMN, not the canvas. 16 Aug 2026.
 *
 * These were max-width: var(--d4-max), which is 1440, sitting inside a band
 * that already has a 72px gutter. So on a 1920 monitor the 1440 box centred
 * inside 1776 and the copy landed at 240, while every band Kyle drew landed at
 * 312. Two thirds of the site disagreed with itself above 1440 and nothing
 * caught it, because at 1440 exactly the two answers are the same number.
 *
 * 1440 is the canvas. The column inside it is 1440 minus a gutter each side,
 * which is what .d4-wrap has always done and what transcribe.py bakes into
 * every generated band as calc((100% - 1440px) / 2 + 72px). Same number, said
 * a different way, and it holds at every width because the gutter is a clamp:
 * 20px on a phone, 72 from 1440 up. Found by docs/audit-scripts/site-width.py.
 */
.d4-band--cover .wp-block-cover__inner-container,
.wp-block-cover.d4-prose-hero .wp-block-cover__inner-container {
	max-width: calc(var(--d4-max) - 2 * var(--d4-gutter));
	margin-inline: auto;
	width: 100%;
}

/* The words stay on the solid end of the gradient. Without this a long
   paragraph runs across the picture and off the readable part of it. */
.d4-band--cover .wp-block-cover__inner-container > *,
.wp-block-cover.d4-prose-hero .wp-block-cover__inner-container > * {
	max-width: min(100%, 620px);
	margin-inline: 0 auto;
}

.d4-band--cover :is(h1, h2, h3, h4),
.d4-prose-hero :is(h1, h2, h3, h4) {
	color: var(--wp--preset--color--paper);
	margin: 0;
	font-weight: 300;
	line-height: 1.06;
	letter-spacing: -0.025em;
	text-wrap: balance;
}

.d4-band--cover p,
.d4-prose-hero p {
	color: var(--wp--preset--color--grey);
	font-size: clamp(16px, 2vw, 18px);
	line-height: 1.75;
	max-width: 60ch;
}

.d4-band--cover > * + *,
.d4-prose-hero > * + *,
.d4-band--cover .wp-block-cover__inner-container > * + *,
.d4-prose-hero .wp-block-cover__inner-container > * + * {
	margin-block-start: 24px;
}

/* The opening band, whether it carries a photograph or not. */
.d4-prose-hero {
	padding-block: clamp(48px, 7vw, 88px);
	padding-inline: var(--d4-gutter);
}

.wp-block-group.d4-prose-hero {
	background-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
}

/* The content column again, same reason as the cover band above. This is the
 * hero every legal page wears, so it was 72px out on privacy, cookies and the
 * new terms page. */
.wp-block-group.d4-prose-hero > * {
	max-width: calc(var(--d4-max) - 2 * var(--d4-gutter));
	margin-inline: auto;
}

.d4-prose-hero h1 {
	font-size: clamp(38px, 5vw, 56px);
	max-width: 20ch;
}

.d4-band--cover h2 { font-size: clamp(30px, 3.6vw, 44px); }

/* A photograph beside words.
   The picture FILLS its half rather than setting the height of the band. Their
   library mixes landscape interiors with portrait product cut-outs, and one
   1152px tall chair beside three lines of copy leaves 700px of white. Selector
   carries the block class as well so it beats core's own height:auto, which is
   printed inline in the head and would otherwise win on load order. */
.d4-band--media.wp-block-media-text {
	grid-template-columns: 1fr 1fr;
	align-items: stretch;
}

.d4-band--media.wp-block-media-text > .wp-block-media-text__media {
	position: relative;
	align-self: stretch;
	min-height: clamp(260px, 30vw, 440px);
	margin: 0;
}

.d4-band--media.wp-block-media-text > .wp-block-media-text__media > img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.d4-band--media .wp-block-media-text__content {
	padding-inline: clamp(24px, 4vw, 64px);
	padding-block: clamp(32px, 5vw, 64px);
}

.d4-band--media .wp-block-media-text__content > * + * {
	margin-block-start: 20px;
}

.d4-band--media :is(h2, h3, h4) {
	margin: 0;
	font-weight: 300;
	line-height: 1.1;
	letter-spacing: -0.02em;
	font-size: clamp(26px, 3vw, 40px);
	text-wrap: balance;
}

.d4-band--media p {
	font-size: 16px;
	line-height: 1.75;
	margin: 0;
}

/* A photograph on its own, used as a full width strip between sections. Same
   specificity note as the band above: core sets height:auto on .wp-block-image
   img, so the block class has to be in the selector or a 2000px tall picture
   becomes an 810px band nobody scrolls past. */
.d4-band--photo.wp-block-image {
	margin: 0;
}

.d4-band--photo.wp-block-image img {
	display: block;
	width: 100%;
	height: clamp(220px, 30vw, 420px);
	object-fit: cover;
}

/* ---------------------------------------------------------------------------
   The body
   --------------------------------------------------------------------------- */

.d4-prose {
	padding-block: var(--d4-section-y);
	padding-inline: var(--d4-gutter);
	font-size: 18px;
	line-height: 1.75;
}

/* The rhythm, set once between siblings rather than as a margin on each thing.
   Anything that needs to sit closer to what precedes it says so below. */
.d4-prose > * + * {
	margin-block-start: 28px;
}

.d4-prose h2,
.d4-prose h3,
.d4-prose h4 {
	margin-block-end: 0;
	font-weight: 300;
	line-height: 1.1;
	letter-spacing: -0.02em;
	text-wrap: balance;
}

.d4-prose > * + :is(h2, h3, h4) {
	margin-block-start: clamp(40px, 6vw, 64px);
}

.d4-prose h2 { font-size: clamp(34px, 4vw, 48px); }
.d4-prose h3 { font-size: clamp(26px, 3vw, 34px); }
.d4-prose h4 { font-size: clamp(22px, 2.4vw, 26px); font-weight: 700; letter-spacing: 0; }

/* A heading is the start of something, so the paragraph under it belongs with
   it rather than floating halfway to the next one. */
.d4-prose :is(h2, h3, h4) + * {
	margin-block-start: 16px;
}

/* No max-width on a paragraph here. The block's own contentSize is already the
   measure, and a second one inside it would be centred by the layout's auto
   margins and sit off to the right of the headings above it. Found by looking:
   the first version did exactly that. */

.d4-prose :is(ul, ol) {
	padding-inline-start: 1.25em;
}

.d4-prose li + li {
	margin-block-start: 8px;
}

.d4-prose strong {
	font-weight: 700;
}

.d4-prose a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
	transition: color var(--d4-transition);
}

.d4-prose a:hover,
.d4-prose a:focus-visible {
	color: var(--wp--preset--color--terracotta);
}

.d4-prose img {
	max-width: 100%;
	height: auto;
}

/* A picture on its own inside the text column is capped, because their library
   mixes wide interiors with tall product cut-outs and one 1,495px tall PNG in a
   780px column is 810px of page nobody scrolls past. Height rather than width,
   so the proportions are theirs and only the scale is ours. */
.d4-prose > figure.wp-block-image img {
	max-height: clamp(280px, 40vh, 460px);
	width: auto;
	margin-inline: auto;
	display: block;
}

/* ---------------------------------------------------------------------------
   Their accordions
   ---------------------------------------------------------------------------
   Written as core/details by the converter, styled as Kyle's: a hairline rule
   above each row, 22px of air, 18px bold, and the row that is open loses the
   rule so the answer reads as part of it.

   The marker is turned off THREE ways because the browsers disagree. Firefox
   and Chrome use ::marker, Safari still needs the -webkit- pseudo element, and
   list-style covers the rest. Miss one and a stray triangle sits next to a
   carefully drawn plus sign.
   --------------------------------------------------------------------------- */

.d4-prose .wp-block-details {
	border-top: 1px solid var(--wp--preset--color--grey);
}

.d4-prose .wp-block-details + .wp-block-details {
	margin-block-start: 0;
}

.d4-prose .wp-block-details:last-of-type {
	border-bottom: 1px solid var(--wp--preset--color--grey);
}

.d4-prose .wp-block-details > summary {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	padding-block: 22px;
	cursor: pointer;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.35;
	list-style: none;
	max-width: none;
}

.d4-prose .wp-block-details > summary::marker { content: ''; }
.d4-prose .wp-block-details > summary::-webkit-details-marker { display: none; }

/* The plus, drawn rather than typed so it is the same weight as the rule and
   cannot be picked up by a text selection or read out by a screen reader. */
.d4-prose .wp-block-details > summary::after {
	content: '';
	flex: 0 0 auto;
	width: 14px;
	height: 14px;
	background:
		linear-gradient(var(--wp--preset--color--ink), var(--wp--preset--color--ink)) center / 100% 1px no-repeat,
		linear-gradient(var(--wp--preset--color--ink), var(--wp--preset--color--ink)) center / 1px 100% no-repeat;
	transition: transform var(--d4-transition);
}

.d4-prose .wp-block-details[open] > summary::after {
	transform: rotate(45deg);
}

.d4-prose .wp-block-details > summary:hover {
	color: var(--wp--preset--color--terracotta);
}

.d4-prose .wp-block-details > summary:hover::after {
	background:
		linear-gradient(var(--wp--preset--color--terracotta), var(--wp--preset--color--terracotta)) center / 100% 1px no-repeat,
		linear-gradient(var(--wp--preset--color--terracotta), var(--wp--preset--color--terracotta)) center / 1px 100% no-repeat;
}

.d4-prose .wp-block-details > :not(summary) {
	font-size: 15px;
	line-height: 1.7;
	margin-block: 0 24px;
}

.d4-prose .wp-block-details > summary + * {
	margin-block-start: 0;
}

/* ---------------------------------------------------------------------------
   Buttons and galleries
   --------------------------------------------------------------------------- */

.d4-prose .wp-block-button__link,
.d4-prose-hero .wp-block-button__link {
	display: inline-block;
	background-color: var(--wp--preset--color--terracotta);
	color: var(--wp--preset--color--paper);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	padding: 16px 40px;
	border-radius: 0;
	text-decoration: none;
	transition: background-color var(--d4-transition);
}

.d4-prose .wp-block-button__link:hover,
.d4-prose .wp-block-button__link:focus-visible,
.d4-prose-hero .wp-block-button__link:hover,
.d4-prose-hero .wp-block-button__link:focus-visible {
	background-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
}

.d4-prose-hero .wp-block-button__link:hover,
.d4-prose-hero .wp-block-button__link:focus-visible {
	background-color: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--ink);
}

.d4-prose .wp-block-gallery {
	gap: 8px;
}

.d4-prose .wp-block-gallery figure {
	margin: 0;
}

/* ---------------------------------------------------------------------------
   Their "looking for more inspiration" grid
   ---------------------------------------------------------------------------
   core/query standing in for an Elementor loop grid. Styled off the blog card in
   templates.css so the two listings on the site look like each other, rather
   than off whatever core ships with.
   --------------------------------------------------------------------------- */

.d4-prose .d4-recent {
	margin-block-start: 40px;
}

.d4-prose .d4-recent .wp-block-post-template {
	list-style: none;
	padding: 0;
	margin: 0;
	gap: 40px;
}

.d4-prose .d4-recent .wp-block-post-template > li {
	max-width: none;
	margin: 0;
}

.d4-prose .d4-recent .wp-block-post-featured-image {
	margin: 0 0 20px;
}

.d4-prose .d4-recent .wp-block-post-featured-image img {
	width: 100%;
	height: clamp(180px, 20vw, 260px);
	object-fit: cover;
}

.d4-prose .d4-recent .wp-block-post-title {
	margin: 0 0 10px;
	font-size: clamp(20px, 2.2vw, 26px);
	font-weight: 300;
	line-height: 1.2;
	letter-spacing: -0.02em;
}

.d4-prose .d4-recent .wp-block-post-title a {
	text-decoration: none;
}

.d4-prose .d4-recent .wp-block-post-excerpt {
	margin: 0;
}

.d4-prose .d4-recent .wp-block-post-excerpt__excerpt {
	font-size: 15px;
	line-height: 1.7;
}

/* ---------------------------------------------------------------------------
   Below 900px, the same breakpoint the transcribed pages use
   --------------------------------------------------------------------------- */

@media (max-width: 900px) {

	.d4-prose {
		font-size: 16px;
	}

	.d4-prose h1,
	.d4-prose-hero h1 {
		max-width: none;
	}

	/* media-text stacks itself below 600px, which leaves a 700px phone in
	   landscape and every tablet with two 300px columns and a paragraph four
	   words wide. Stacked from 900px, the same breakpoint the transcribed
	   pages change at. */
	.d4-band--media.wp-block-media-text {
		grid-template-columns: 1fr;
	}

	.d4-band--media .wp-block-media-text__media {
		grid-row: 1;
		grid-column: 1;
	}

	.d4-band--media .wp-block-media-text__content {
		grid-row: 2;
		grid-column: 1;
	}

	.d4-band--media.wp-block-media-text > .wp-block-media-text__media {
		min-height: 0;
		height: clamp(200px, 52vw, 340px);
	}

	.d4-band--cover .wp-block-cover__inner-container > *,
	.wp-block-cover.d4-prose-hero .wp-block-cover__inner-container > * {
		max-width: 100%;
	}

	/* Straight down on a phone, where there is no room to the right for a
	   picture to show through. */
	.d4-band--cover > .wp-block-cover__background,
	.wp-block-cover.d4-prose-hero > .wp-block-cover__background {
		background: linear-gradient(
			180deg,
			rgb(29 29 29 / 0.82) 0%,
			rgb(29 29 29 / 0.93) 100%
		);
	}

	/* A five across gallery is five slivers on a phone. Two, and the pictures
	   are big enough to be worth having. */
	.d4-prose .wp-block-gallery.has-nested-images {
		--wp--style--unstable-gallery-gap: 8px;
	}

	.d4-prose .wp-block-gallery.has-nested-images figure.wp-block-image {
		width: calc(50% - 4px);
	}

	.d4-prose .wp-block-details > summary {
		font-size: 16px;
	}

	.d4-prose .wp-block-button__link,
	.d4-prose-hero .wp-block-button__link {
		display: block;
		text-align: center;
	}
}

@media (prefers-reduced-motion: reduce) {

	.d4-prose .wp-block-details > summary::after,
	.d4-prose .wp-block-button__link,
	.d4-prose a {
		transition: none;
	}
}

/* ---------------------------------------------------------------------------
   THE 50/50 IMAGE AND TEXT BANDS, above the cap
   ---------------------------------------------------------------------------
   16 Aug 2026, 15 instances across the furniture category pages and the South
   Yorkshire page. These are the Elementor extraction's image-one-side,
   text-the-other bands and they ran the full width of the screen, so above 1440
   their words started at 77px while every band above and below them started
   at 312.

   The whole band caps, picture included, and that is the difference between
   these and his own full width bands in shape-fixes.css. KYLE NEVER DREW THESE
   PAGES. They are their own copy carried out of Elementor, so there is no
   intent to preserve and the site's own rule applies: content sits in the
   1440 canvas less a gutter each side.

   TRIED FIRST AND IT WAS WRONG: pad the block and pull the picture back out
   with a negative margin, so the photograph keeps bleeding. A percentage in a
   margin resolves against the ITEM'S containing block, which here is its grid
   cell of 840px and not the 1920 of the page, so calc((100% - 1440px) / 2) came
   out at -300 and the minus sign turned it into a shove 300px the wrong way.
   The photograph ended up inset and narrower instead of wider. Measured, not
   noticed by eye.
   --------------------------------------------------------------------------- */

@media (min-width: 1441px) {
	.wp-block-media-text {
		max-width: calc(var(--d4-max) - 2 * var(--d4-gutter));
		margin-inline: auto;
	}
}