/**
 * The five screens Kyle did not draw.
 *
 * 404, the blog index, search results, a single blog post and the case study
 * archive. His export has thirty-eight pages and none of them is any of these,
 * so there is nothing to transcribe: the sections on the other pages are his
 * markup and his declarations, and these five cannot be.
 *
 * They have been unstyled since the March design was cancelled and its
 * stylesheet went with it. 36 classes across the five templates had no rule
 * anywhere, so they rendered as a stack of browser defaults on a site that is
 * otherwise finished.
 *
 * WHAT THIS FILE IS ALLOWED TO DO. Alex, 5 Aug 2026: rebuild them from his own
 * parts. So every number below is measured off his export and noted with how
 * often he uses it. Nothing here is a new typeface, a new colour, a new corner
 * or a new rhythm. What IS ours is the arrangement, because somebody has to
 * decide what a search results page looks like and he did not.
 *
 *   the hero band          background:#1d1d1d;color:#ffffff;padding:56px 72px
 *   the eyebrow            700 / 0.16em / 12px, 32 uses of it on his dark bands
 *   h1                     56px / 1.08 / 300 / -0.03em, 11 uses
 *   h2                     56px / 1.06 / 300 / -0.025em, 5 uses
 *   body                   15px / 1.7, 97 uses, the most common pair he writes
 *   the lead paragraph     17px / 1.75, 16 uses
 *   the primary button     #B84836, 16px 30px, 700 / 15px, 36 uses
 *   the card               340px tall, radius 0 0 120px 0, his Work page card
 *   the card grid          repeat(6,minmax(0,1fr)) with gap:16px, his Work page
 *   rules                  1px solid #C7C8C1
 *   section padding        96px 72px, 13 uses, his most common
 *
 * The three colours come out of the brand guide, not his export, exactly as the
 * transcriber corrects them: #B84836 not #af4835, #C7C8C1 not #bfbfb9.
 *
 * BELOW 900PX. shapes-narrow.css is generated from his own declarations and only
 * knows about his classes, so these need their own. Same breakpoint and the same
 * measured scale off his one mobile page: 56 goes to 38, 22 to 17, 15 to 13, 12
 * to 11, the gutter to 20 and section padding to 48.
 *
 * The case study archive is the one of the five with a real design behind it.
 * His Work page IS the archive, so its card, its grid and its band all come
 * straight off that page rather than being invented here.
 */

/* ---------------------------------------------------------------------------
   The band at the top
   --------------------------------------------------------------------------- */

/* The wrapper every one of the five uses. It had no rule anywhere: it went with
   the twenty blocks, and the footer quietly carries its own copy. Without it
   every button and every line of copy on these five sat flush against the left
   edge of the window. His gutter is 72px and the token is his number. */
.d4-container {
	max-width: var(--d4-max);
	margin-inline: auto;
	padding-inline: var(--d4-gutter);
}

.d4-hero--page {
	display: block;
	background-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
	padding-block: 56px;
}

.d4-hero--page .d4-tag {
	display: block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--grey);
	margin-bottom: 24px;
}

.d4-hero--page h1 {
	margin: 0;
	font-size: 56px;
	line-height: 1.08;
	font-weight: 300;
	letter-spacing: -0.03em;
	color: var(--wp--preset--color--paper);
	max-width: 900px;
	text-wrap: balance;
}

.d4-hero__subtitle {
	margin: 20px 0 0;
	font-size: 17px;
	line-height: 1.75;
	max-width: 720px;
}

/* A post with a photograph on it. His own full bleed photo bands put the words
   over a gradient rather than the picture, which is the only reason any of this
   stays readable on a light image. Gradient values are his, off the Work card. */
.d4-hero--page:has(.d4-hero__bg) {
	position: relative;
	display: grid;
	align-content: end;
	min-height: 420px;
	padding-block: 96px 48px;
}

.d4-hero__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.d4-hero__overlay {
	position: absolute;
	inset: 0;
	/* The wash used to stay completely clear until 45% down, but the copy block
	   starts at about 49%, so the date landed on bare photograph with roughly
	   0.09 of wash behind it. Over a bright shot it was unreadable: measured at
	   96% of its area below the threshold on the DRFC Peak Mechanical hero,
	   while the h1 underneath was fine because it sits lower in the ramp.
	   It now reaches 0.64 by 48%, which clears 4.5:1 for white text even over a
	   pure white photograph, and still leaves the top fifth of the picture
	   essentially untouched. */
	background: linear-gradient(180deg,
		rgb(29 29 29 / 0) 0%,
		rgb(29 29 29 / 0.10) 20%,
		rgb(29 29 29 / 0.64) 48%,
		rgb(29 29 29 / 0.88) 100%);
}

/* Light grey needs the background at #545454 or darker to clear 4.5:1, which
   over a bright photo means burying the picture under 0.76 of wash. White only
   needs 0.61. So on a photo hero the date goes white; on the plain ink hero it
   keeps Kyle's grey, where it has all the contrast it needs. */
.d4-hero--page:has(.d4-hero__bg) .d4-tag {
	color: var(--wp--preset--color--paper);
}

.d4-hero--page:has(.d4-hero__bg) .d4-container {
	position: relative;
	z-index: 1;
}

/* ---------------------------------------------------------------------------
   The body of the page
   --------------------------------------------------------------------------- */

.d4-section--lg { padding-block: 96px; }
.d4-section--white { background-color: var(--wp--preset--color--paper); }
.d4-section--light { background-color: var(--wp--preset--color--paper); }
.d4-section--dark {
	background-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
}

.d4-section--lg h2 {
	margin: 0 0 24px;
	font-size: 56px;
	line-height: 1.06;
	font-weight: 300;
	letter-spacing: -0.025em;
	text-wrap: balance;
}

.d4-section--lg p {
	font-size: 15px;
	line-height: 1.7;
	margin: 0 0 24px;
}

/* Running text in a post. His pages have no long form article on them at all,
   so the measure is the theme's own token rather than one of his numbers. */
.d4-content {
	max-width: var(--d4-measure);
}

.d4-content h2 { margin-top: 56px; }

.d4-content h3 {
	margin: 40px 0 16px;
	font-size: 28px;
	font-weight: 700;
	line-height: 1.25;
}

.d4-content ul,
.d4-content ol { margin: 0 0 24px; padding-left: 20px; }
.d4-content li { font-size: 15px; line-height: 1.7; margin-bottom: 8px; }
.d4-content img { max-width: 100%; height: auto; }

.d4-content a {
	color: var(--wp--preset--color--terracotta);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   Cards, which is what an archive is
   ---------------------------------------------------------------------------
   His Work page card, reused. Six columns with everything spanning two, so a
   row is three across and folds to two and one on its own as the tracks shrink.
   --------------------------------------------------------------------------- */

.d4-cases-grid,
.d4-blog-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
	gap: 16px;
}

.d4-case-card,
.d4-blog-card__link {
	position: relative;
	display: block;
	overflow: hidden;
	height: 340px;
	color: var(--wp--preset--color--paper);
	border-radius: 0 0 var(--d4-corner-lg) 0;
	background-color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.d4-case-card__image-wrap,
.d4-blog-card__image-wrap {
	position: absolute;
	inset: 0;
}

.d4-case-card__image-wrap img,
.d4-blog-card__image-wrap img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* His gradient, exactly: transparent to 45%, then 88% of his near black. */
.d4-case-card::after,
.d4-blog-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
	/* Same fault as the photo hero, same curve, different element. The caption
	   block sits about 56% down the card and the wash was still only 0.18 there,
	   so the date read fine over a dark thumbnail and vanished over a bright one.
	   It ramps sooner here than on the hero because a card is shorter and its
	   caption climbs higher up as the title wraps to two lines. */
	background: linear-gradient(180deg,
		rgb(29 29 29 / 0) 0%,
		rgb(29 29 29 / 0.12) 18%,
		rgb(29 29 29 / 0.66) 42%,
		rgb(29 29 29 / 0.88) 100%);
}

.d4-case-card__body,
.d4-blog-card__body {
	position: absolute;
	left: 24px;
	right: 24px;
	bottom: 20px;
	z-index: 1;
}

.d4-case-card__meta,
.d4-blog-card__meta {
	display: block;
	margin: 0 0 6px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--paper);
}

.d4-case-card h3,
.d4-blog-card h2 {
	margin: 0;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--wp--preset--color--paper);
}

/* The excerpt and the read more only exist on the blog card, and they sit
   inside the same gradient, so they are the one thing here with no direct
   equivalent on his pages. Kept to two lines so a long one cannot push his
   title out of the card. */
.d4-blog-card__body p:not(.d4-blog-card__meta) {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 8px 0 0;
	font-size: 13px;
	line-height: 1.6;
	color: var(--wp--preset--color--grey);
}

.d4-case-card:hover h3,
.d4-blog-card__link:hover h2 { color: var(--wp--preset--color--terracotta); }

/* ---------------------------------------------------------------------------
   The filter row on the case study archive
   ---------------------------------------------------------------------------
   His Work page filter row, values and all: the row is space-between with the
   count on the right, the buttons are 13px bold in a 1px hairline with 10px by
   18px of padding, and the selected one is solid terracotta.

   The behaviour is the same handler the transcribed Work grid uses, so there is
   one implementation of this on the site rather than two. See main.js.
   --------------------------------------------------------------------------- */

.d4-product-filters {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 24px;
	margin-bottom: 24px;
}

.d4-filter-btn {
	font-family: inherit;
	font-size: 13px;
	font-weight: 700;
	padding: 10px 18px;
	/* 44px so it is a reliable tap target, which his design never has to be. */
	min-height: 44px;
	cursor: pointer;
	background: none;
	color: var(--wp--preset--color--ink);
	border: 1px solid var(--wp--preset--color--grey);
	transition: background-color var(--d4-transition), border-color var(--d4-transition), color var(--d4-transition);
}

.d4-filter-btn[aria-pressed="true"] {
	background-color: var(--wp--preset--color--terracotta);
	border-color: var(--wp--preset--color--terracotta);
	color: var(--wp--preset--color--paper);
}

.d4-filter-btn:focus-visible {
	outline: 2px solid var(--wp--preset--color--terracotta);
	outline-offset: 2px;
}

/* His 10px between buttons, on their own row so they wrap as a group. Without
   the wrapper, space-between spreads them across the full width and the count
   lands in the middle of the second line. D4 have ten sectors against twelve
   projects, three of which mean the same thing, so this row wraps in practice
   and how it wraps matters. Their taxonomy wants tidying; that is their call
   and not something to do quietly on their behalf. */
.d4-product-filters__set {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.d4-filter-count {
	font-size: 14px;
	color: var(--wp--preset--color--ink);
	white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   The way off a 404
   --------------------------------------------------------------------------- */

.d4-404-links {
	list-style: none;
	margin: 32px 0;
	padding: 0;
	display: grid;
	gap: 12px;
	justify-items: start;
}

/* ---------------------------------------------------------------------------
   The search box
   ---------------------------------------------------------------------------
   His form fields, from the enquiry forms he drew on five pages: a 1px hairline,
   13px by 14px of padding, 14px type, and terracotta on focus. The only thing
   here he does not specify is what a search button looks like, so it is his
   primary button at the size the field is.
   --------------------------------------------------------------------------- */

/* .screen-reader-text moved to blocks.css on 5 Aug 2026. It was defined here,
   and this stylesheet is only loaded on the five leftover templates, so the
   hidden labels on Kyle's transcribed enquiry forms were rendering visibly on
   every page that has one. Somewhere loaded everywhere is the right home. */

.d4-search {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 32px;
	max-width: 520px;
}

.d4-search__field {
	flex: 1 1 220px;
	box-sizing: border-box;
	border: 1px solid var(--wp--preset--color--grey);
	padding: 13px 14px;
	font-family: inherit;
	font-size: 14px;
	color: var(--wp--preset--color--ink);
	background-color: var(--wp--preset--color--paper);
}

.d4-search__field:focus-visible {
	outline: 2px solid var(--wp--preset--color--terracotta);
	outline-offset: -1px;
}

.d4-search__submit {
	border: 0;
	cursor: pointer;
	font-family: inherit;
	padding: 13px 24px;
	font-size: 14px;
	font-weight: 700;
	background-color: var(--wp--preset--color--terracotta);
	color: var(--wp--preset--color--paper);
}

.d4-search__submit:hover { background-color: var(--wp--preset--color--ink); }

/* ---------------------------------------------------------------------------
   Search results, which are a list and not a grid
   ---------------------------------------------------------------------------
   His FAQ rows are the nearest thing he draws to a list of results: a hairline
   between each, and nothing else. Same treatment.
   --------------------------------------------------------------------------- */

.d4-search-result {
	padding: 28px 0;
	border-bottom: 1px solid var(--d4-rule-on-light);
}

.d4-search-result:first-of-type { padding-top: 0; }

.d4-search-result h2 {
	margin: 0 0 6px;
	font-size: 28px;
	font-weight: 700;
	line-height: 1.25;
}

.d4-search-result h2 a { color: inherit; text-decoration: none; }
.d4-search-result h2 a:hover { color: var(--wp--preset--color--terracotta); }

.d4-search-result__type {
	margin: 0 0 10px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--terracotta);
}

.d4-search-result p { margin: 0 0 10px; }

/* ---------------------------------------------------------------------------
   The bits that appear on more than one of the five
   --------------------------------------------------------------------------- */

.d4-tag {
	display: inline-block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--terracotta);
	margin-bottom: 16px;
}

.d4-btn--primary {
	display: inline-block;
	background-color: var(--wp--preset--color--terracotta);
	color: var(--wp--preset--color--paper);
	padding: 16px 30px;
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
}

.d4-btn--primary:hover { background-color: var(--wp--preset--color--ink); }

.d4-link {
	display: inline-block;
	font-size: 13px;
	font-weight: 700;
	color: var(--wp--preset--color--terracotta);
	text-decoration: none;
}

/* His arrows sit in the text, not beside it, so this only stops it wrapping
   onto a line of its own. */
.d4-arrow { white-space: nowrap; }

.d4-cta-banner {
	display: grid;
	gap: 20px;
	justify-items: start;
}

.d4-cta-banner h2 {
	margin: 0;
	font-size: 44px;
	line-height: 1.08;
	font-weight: 300;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--paper);
}

.d4-cta-banner p { margin: 0; font-size: 16px; line-height: 1.7; }

.d4-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 56px;
	padding-top: 32px;
	border-top: 1px solid var(--d4-rule-on-light);
}

.d4-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* 44px so it is a reliable tap target, which his design never has to be. */
	min-width: 44px;
	min-height: 44px;
	padding: 0 12px;
	font-size: 14px;
	font-weight: 700;
	color: var(--wp--preset--color--ink);
	border: 1px solid var(--wp--preset--color--grey);
	text-decoration: none;
}

.d4-pagination .page-numbers.current,
.d4-pagination .page-numbers:hover {
	background-color: var(--wp--preset--color--terracotta);
	border-color: var(--wp--preset--color--terracotta);
	color: var(--wp--preset--color--paper);
}

/* The blog index and search share the article body's stack, so they inherit the
   article rules above. This is what is left. */
.d4-article { max-width: var(--d4-measure); }

/* ---------------------------------------------------------------------------
   Below 900px
   ---------------------------------------------------------------------------
   Same breakpoint as shapes-narrow.css, and the same measured scale off his one
   mobile page, so a phone reads these five the way it reads the other thirty.
   --------------------------------------------------------------------------- */

@media (max-width: 900px) {
	.d4-hero--page { padding-block: 40px; }
	.d4-hero--page h1 { font-size: 38px; }
	.d4-hero__subtitle { font-size: 15px; }
	.d4-hero--page:has(.d4-hero__bg) { min-height: 300px; padding-block: 48px 32px; }

	.d4-section--lg { padding-block: 48px; }
	.d4-section--lg h2 { font-size: 38px; }
	.d4-section--lg p,
	.d4-content li { font-size: 13px; }

	.d4-content h3 { font-size: 22px; }

	.d4-case-card h3,
	.d4-blog-card h2,
	.d4-search-result h2 { font-size: 17px; }

	.d4-cta-banner h2 { font-size: 28px; }
	.d4-cta-banner p { font-size: 15px; }

	.d4-case-card,
	.d4-blog-card__link { height: 260px; }

	.d4-case-card__body,
	.d4-blog-card__body { left: 20px; right: 20px; }
}

/* ---------------------------------------------------------------------------
   Previous and next, at the foot of a case study
   ---------------------------------------------------------------------------

   Emily, 15 Aug 2026, with a screenshot of their old site: a chevron, the word
   PREVIOUS above the project title on the left, NEXT and its title on the right,
   a hairline between them.

   Kyle drew nothing like it, so every number here is one of his, taken from the
   list at the top of this file:

     the eyebrow      700 / 0.16em / 12px, uppercase. He uses it 32 times
     the title        22px / 700 / 1.25, his Work page card title
     the hairline     1px, --d4-rule-on-light, which computes to his #3a3a3a
                      the same way every other rule on the site does
     terracotta       #B84836 from the brand guide, as everywhere else
     the gutter       --d4-wrap, so it lines up with the band above it

   The chevrons are ours. They are the only invented thing in the component and
   they are two line segments, so there is not much to get wrong.

   BELOW 900PX IT STACKS. Two project titles side by side at 390px is 24
   characters a column, which is three or four words and a rule under each: the
   same squeeze the tablet band was built to fix on 14 Aug. Stacked, each title
   gets the full width and the pair is 40px taller, which costs nothing at the
   bottom of a page somebody has just finished reading.
   --------------------------------------------------------------------------- */

.d4-adjacent {
	border-top: 1px solid var(--d4-rule-on-light);
	padding-block: clamp(28px, 5vw, 48px);
}

.d4-adjacent__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(20px, 4vw, 48px);
	align-items: start;
}

.d4-adjacent__link {
	display: block;
	text-decoration: none;
	color: inherit;
}

/* The right hand one reads right to left, which is what makes the pair a pair
   rather than two of the same thing. */
.d4-adjacent__link--next {
	text-align: right;
}

.d4-adjacent__eyebrow {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 10px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.16em;
	line-height: 1;
	text-transform: uppercase;
	color: var(--wp--preset--color--terracotta);
}

.d4-adjacent__link--next .d4-adjacent__eyebrow {
	justify-content: flex-end;
}

/* Nudged to sit on the cap height of the label rather than on its box, which is
   what stops a 18px square next to 12px uppercase looking like it has slipped. */
.d4-adjacent__chevron {
	flex: none;
	margin-block: -2px;
}

.d4-adjacent__title {
	display: block;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.01em;
}

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

@media (max-width: 900px) {
	.d4-adjacent__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: 28px;
	}

	/* Stacked, "next" aligned right would read as a mistake rather than as the
	   other half of a pair, so both go back to the left. */
	.d4-adjacent__link--next,
	.d4-adjacent__link--next .d4-adjacent__eyebrow {
		text-align: left;
		justify-content: flex-start;
	}

	/* His own mobile step down, 22 to 17, off the fit out landing page. */
	.d4-adjacent__title {
		font-size: 17px;
	}
}