/*
Theme Name: Direct IT Services
Theme URI: https://www.directitservices.co.uk/
Author: Direct IT Services Limited
Description: Block theme for Direct IT Services Limited, a managed IT service provider in Amesbury, Wiltshire. Ink-and-chalk palette, Bricolage Grotesque and Source Sans 3, and a "cover strip" device that shows staffed hours against round-the-clock monitoring. No plugins required, no external JavaScript.
Requires at least: 6.6
Tested up to: 7.0
Requires PHP: 7.4
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: dit
Tags: block-theme, full-site-editing, business, accessibility-ready, custom-colors, custom-menu
*/

/* -----------------------------------------------------------------------------
   Direct IT Services — supplementary stylesheet.

   What this file does: holds the layout and component CSS that theme.json
   cannot express (custom grids, the cover strip, sticky header, card states,
   focus treatment, reduced-motion handling).
   Role in the system: loaded on the front end and inside the Site Editor
   (see functions.php), so the editor preview matches the published page.
   Colours, type, spacing and element styles live in theme.json; this file
   consumes them as CSS custom properties and never redefines them.

   Contents
   1.  Local aliases
   2.  Base and accessibility
   3.  Container, shared section furniture
   4.  Header
   5.  Hero
   6.  Cover strip (signature element)
   7.  Facts row
   8.  Services grid
   9.  Monitoring band
   10. Differentiators
   11. Testimonials
   12. Contact
   13. Call to action band
   14. Footer
   15. Editorial pages, archive and 404
   16. Utilities and reduced motion
----------------------------------------------------------------------------- */

/* 1. Local aliases --------------------------------------------------------- */

:root {
	--ink: var(--wp--preset--color--ink, #0B1B3A);
	--ink-soft: var(--wp--preset--color--ink-soft, #14306B);
	--chalk: var(--wp--preset--color--chalk, #F1F4F8);
	--chalk-deep: var(--wp--preset--color--chalk-deep, #E2E8F0);
	--paper: var(--wp--preset--color--paper, #FFFFFF);
	--brand-sky: var(--wp--preset--color--brand-sky, #28A0E6);
	--brand-navy: var(--wp--preset--color--brand-navy, #001E78);
	--brand-sky-dark: #1B8CCE;
	--brand-blue: var(--wp--preset--color--brand-blue, #326EBE);
	--brand-sky-light: var(--wp--preset--color--brand-sky-light, #8FC6EE);
	--body: var(--wp--preset--color--body, #1D2A44);
	--muted: var(--wp--preset--color--muted, #5A6579);

	/* Text on ink: 13.8:1 and 8.0:1 against #0B1B3A. */
	--on-ink: #F1F4F8;
	--on-ink-muted: #AEBBD0;

	--line: var(--wp--custom--line--light, #D6DEE9);
	--line-ink: var(--wp--custom--line--ink, rgba(242, 241, 237, 0.16));

	--display: var(--wp--preset--font-family--display, "Bricolage Grotesque", "Trebuchet MS", system-ui, sans-serif);
	--mono: var(--wp--preset--font-family--mono, "DM Mono", ui-monospace, Menlo, monospace);

	--r-sm: var(--wp--custom--radius--sm, 3px);
	--r-md: var(--wp--custom--radius--md, 6px);
	--r-lg: var(--wp--custom--radius--lg, 12px);

	--gutter: var(--wp--custom--gutter, clamp(1.25rem, 5vw, 3rem));
	--section: clamp(3.5rem, 8vw, 6.5rem);
	--measure: var(--wp--custom--measure, 38rem);
}

/* 2. Base and accessibility ------------------------------------------------ */

html {
	-webkit-text-size-adjust: 100%;
	scroll-padding-top: 6rem;
}

body {
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

/* Visible keyboard focus everywhere. Ink ring reads at 12:1 on chalk and
   7.2:1 on brand-sky; sections on ink switch the ring to chalk. */
:focus-visible {
	outline: 3px solid var(--ink);
	outline-offset: 3px;
	border-radius: 2px;
}

.dit-on-ink :focus-visible {
	outline-color: var(--chalk);
}

.dit-card:focus-within {
	border-color: var(--ink);
}

::selection {
	background: var(--brand-sky);
	color: var(--ink);
}

img {
	height: auto;
	vertical-align: middle;
}

/* Long words and email addresses must not push the 360px layout sideways. */
p,
li,
h1,
h2,
h3,
h4 {
	overflow-wrap: break-word;
}

.dit-measure {
	max-width: var(--measure);
}

/* 3. Shared section furniture --------------------------------------------- */

/* Every band on the page is a full-bleed group with its own background, holding
   one .dit-wrap for width and gutters. Doing the container myself keeps the
   generated layout CSS out of the way, so nothing depends on whether core has
   added has-global-padding to a given wrapper. */

.dit-wrap {
	width: 100%;
	max-width: var(--wp--style--global--wide-size, 78rem);
	margin-inline: auto;
	padding-inline: var(--gutter);
}


.dit-section {
	padding-block: var(--section);
}

.dit-on-ink,
.dit-on-ink :where(p, li, dd) {
	color: var(--on-ink);
}

.dit-on-ink :where(h1, h2, h3, h4, h5, h6) {
	color: var(--on-ink);
}

.dit-on-ink .dit-lead,
.dit-on-ink .dit-note {
	color: var(--on-ink-muted);
}

.dit-on-ink a:not(.wp-element-button) {
	color: var(--on-ink);
	text-decoration-color: var(--brand-sky);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

.dit-on-ink a:not(.wp-element-button):hover {
	color: var(--brand-sky);
}

/* Eyebrow label: the small mono tag that opens every section. */
.dit-eyebrow {
	font-family: var(--mono);
	font-size: 0.75rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--brand-navy);
	margin: 0 0 0.75rem;
	display: flex;
	align-items: center;
	gap: 0.6rem;
	line-height: 1.4;
}

/* Sits against the first line, not the middle, when the label wraps. */
.dit-eyebrow::before {
	content: "";
	flex: 0 0 auto;
	align-self: flex-start;
	margin-top: 0.45em;
	width: 0.5rem;
	height: 0.5rem;
	background: var(--brand-sky);
	border-radius: 1px;
}

.dit-on-ink .dit-eyebrow {
	color: var(--brand-sky);
}

.dit-lead {
	font-size: clamp(1.0625rem, 0.5vw + 1rem, 1.25rem);
	line-height: 1.6;
	color: var(--muted);
	max-width: var(--measure);
}

.dit-note {
	font-size: 0.9375rem;
	color: var(--muted);
}

.dit-section-head {
	max-width: 44rem;
	margin-bottom: clamp(2rem, 4vw, 3rem);
}

.dit-section-head h2 {
	margin: 0 0 0.75rem;
}

.dit-section-head > :last-child {
	margin-bottom: 0;
}

/* Card shell shared by services, contact and testimonial blocks. */
.dit-card {
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	padding: clamp(1.4rem, 2.5vw, 2rem);
}

.dit-card > :first-child {
	margin-top: 0;
}

.dit-card > :last-child {
	margin-bottom: 0;
}

/* Grids. Group blocks with the default layout, so no core layout CSS to fight. */
.dit-grid {
	display: grid;
	gap: clamp(1rem, 2vw, 1.5rem);
}

.dit-grid--2 {
	grid-template-columns: 1fr;
}

.dit-grid--3 {
	grid-template-columns: 1fr;
}

.dit-grid > * {
	margin: 0;
}

@media (min-width: 40em) {
	.dit-grid--2,
	.dit-grid--3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 62em) {
	.dit-grid--3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* Secondary button: outline rather than a second block of brand-sky. */
.dit-btn-quiet .wp-element-button,
.dit-btn-quiet .wp-block-button__link {
	background: transparent;
	color: var(--ink);
	box-shadow: inset 0 0 0 2px var(--ink);
}

.dit-btn-quiet .wp-element-button:hover,
.dit-btn-quiet .wp-block-button__link:hover {
	background: var(--ink);
	color: var(--chalk);
}

.dit-on-ink .dit-btn-quiet .wp-element-button,
.dit-on-ink .dit-btn-quiet .wp-block-button__link {
	color: var(--on-ink);
	box-shadow: inset 0 0 0 2px rgba(242, 241, 237, 0.55);
}

.dit-on-ink .dit-btn-quiet .wp-element-button:hover,
.dit-on-ink .dit-btn-quiet .wp-block-button__link:hover {
	background: var(--chalk);
	color: var(--ink);
	box-shadow: inset 0 0 0 2px var(--chalk);
}

/* 4. Header --------------------------------------------------------------- */

.dit-header {
	position: sticky;
	top: 0;
	z-index: 20;
	background: var(--chalk);
	border-bottom: 1px solid var(--line);
}

.dit-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	padding-block: 0.9rem;
}

.dit-brand {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	min-width: 0;
}

.dit-brand .wp-block-site-logo img {
	max-height: 40px;
	width: auto;
}

.dit-brand .wp-block-site-title a {
	text-decoration: none;
	color: var(--ink);
}

.dit-header__nav {
	display: flex;
	align-items: center;
	gap: clamp(0.75rem, 2vw, 1.75rem);
	flex-wrap: wrap;
	justify-content: flex-end;
}

.dit-header .wp-block-navigation a {
	color: var(--body);
	padding-block: 0.35rem;
	border-bottom: 2px solid transparent;
}

.dit-header .wp-block-navigation a:hover,
.dit-header .wp-block-navigation .current-menu-item > a {
	color: var(--ink);
	border-bottom-color: var(--brand-sky);
}

/* Inside the mobile overlay the border trick is noise. */
.dit-header .wp-block-navigation__responsive-container.is-menu-open a {
	border-bottom-color: transparent;
	font-size: 1.125rem;
}

/* Telephone number: mono, so it reads as data rather than prose. */
.dit-phone {
	margin: 0;
	font-family: var(--mono);
	font-size: 1rem;
	white-space: nowrap;
}

.dit-phone a {
	color: var(--ink);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	font-weight: 500;
}

.dit-phone a:hover {
	color: var(--brand-navy);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

.dit-phone a::before {
	content: "";
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: var(--brand-blue);
	flex: 0 0 auto;
}

@media (max-width: 47.99em) {
	.dit-header__inner {
		padding-block: 0.7rem;
	}

	.dit-phone {
		font-size: 0.9375rem;
	}
}

/* 5. Hero ----------------------------------------------------------------- */

.dit-hero {
	background: var(--ink);
	border-bottom: 4px solid var(--brand-sky);
	padding-top: clamp(2.75rem, 7vw, 5.5rem);
	padding-bottom: 0;
	position: relative;
	overflow: hidden;
}

/* Faint grid, drawn in CSS rather than shipped as an image. */
.dit-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(to right, rgba(242, 241, 237, 0.045) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(242, 241, 237, 0.045) 1px, transparent 1px);
	background-size: 68px 68px;
	pointer-events: none;
}

.dit-hero__grid {
	position: relative;
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(2rem, 5vw, 3.5rem);
	align-items: end;
}

.dit-hero__copy {
	padding-bottom: clamp(2.75rem, 7vw, 5.5rem);
	max-width: 36rem;
}

.dit-hero h1 {
	margin: 0 0 1.1rem;
	text-wrap: balance;
}

.dit-hero .dit-lead {
	margin: 0 0 1.75rem;
	max-width: 32rem;
}

.dit-hero__figure {
	margin: 0;
	align-self: stretch;
	display: flex;
}

.dit-hero__figure img {
	width: 100%;
	height: 100%;
	min-height: 15rem;
	max-height: 32rem;
	object-fit: cover;
	object-position: 50% 35%;
	border-radius: var(--r-md) var(--r-md) 0 0;
	filter: saturate(0.88) contrast(1.02);
}

.dit-hero__buttons {
	margin-bottom: 0;
}

@media (min-width: 62em) {
	.dit-hero__grid {
		grid-template-columns: minmax(0, 1.28fr) minmax(0, 1fr);
		gap: clamp(2.5rem, 4vw, 4rem);
	}

	.dit-hero__figure img {
		max-height: none;
	}
}

/* 6. Cover strip — the signature element ---------------------------------- */
/* Seven day cells show when a person answers the phone; the bar beneath runs
   unbroken to show monitoring that does not stop. The plain-language note is
   the accessible version of the same two facts. */

.dit-strip {
	margin: 2rem 0 0;
	max-width: 27rem;
	border: 1px solid var(--line-ink);
	border-radius: var(--r-md);
	padding: 1rem 1.1rem 1.1rem;
	background: rgba(242, 241, 237, 0.04);
}

.dit-strip__label {
	margin: 0 0 0.7rem;
	font-family: var(--mono);
	font-size: 0.6875rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--on-ink-muted);
}

.dit-strip__week {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 0.3rem;
	margin: 0 0 0.35rem;
}

.dit-day {
	margin: 0;
	font-family: var(--mono);
	font-size: 0.625rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-align: center;
	padding: 0.55rem 0.1rem 0.5rem;
	border-radius: 2px;
	line-height: 1;
}

.dit-day--open {
	background: var(--brand-sky);
	color: var(--ink);
	font-weight: 500;
}

.dit-day--closed {
	background: rgba(242, 241, 237, 0.08);
	color: var(--on-ink-muted);
}

.dit-strip__always {
	margin: 0;
	font-family: var(--mono);
	font-size: 0.6875rem;
	letter-spacing: 0.04em;
	color: var(--ink);
	background: var(--brand-sky-light);
	border-radius: 2px;
	padding: 0.4rem 0.6rem;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.dit-strip__always::before {
	content: "";
	width: 0.45rem;
	height: 0.45rem;
	border-radius: 50%;
	background: var(--ink);
	flex: 0 0 auto;
}

.dit-strip__note {
	margin: 0.8rem 0 0;
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--on-ink-muted);
}

@media (max-width: 24em) {
	.dit-day {
		font-size: 0.5625rem;
		padding-inline: 0;
	}
}

/* 7. Facts row ------------------------------------------------------------ */

.dit-facts {
	background: var(--chalk-deep);
	border-bottom: 1px solid var(--line);
	padding-block: clamp(1.75rem, 3vw, 2.5rem);
}

.dit-facts__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.25rem;
}

.dit-fact {
	margin: 0;
	display: flex;
	align-items: baseline;
	gap: 0.7rem;
}

.dit-fact strong {
	font-family: var(--display);
	font-size: clamp(1.5rem, 3vw, 2rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--ink);
	line-height: 1;
	flex: 0 0 auto;
}

.dit-fact span {
	font-size: 0.9375rem;
	color: var(--muted);
	line-height: 1.4;
}

@media (min-width: 48em) {
	.dit-facts__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 2rem;
	}

	.dit-fact + .dit-fact {
		border-left: 1px solid var(--line);
		padding-left: 2rem;
	}
}

/* 8. Services grid -------------------------------------------------------- */

.dit-service {
	position: relative;
	padding-top: calc(clamp(1.4rem, 2.5vw, 2rem) + 4px);
	display: flex;
	flex-direction: column;
}

.dit-service::before {
	content: "";
	position: absolute;
	top: -1px;
	left: -1px;
	right: -1px;
	height: 4px;
	background: var(--ink);
	border-radius: var(--r-md) var(--r-md) 0 0;
}

.dit-service:hover::before,
.dit-service:focus-within::before {
	background: var(--brand-sky);
}

.dit-service__no {
	margin: 0 0 0.6rem;
	font-family: var(--mono);
	font-size: 0.75rem;
	letter-spacing: 0.1em;
	color: var(--muted);
}

.dit-service h3 {
	margin: 0 0 0.6rem;
	font-size: 1.1875rem;
	line-height: 1.25;
}

.dit-service p:last-child {
	margin-bottom: 0;
	color: var(--muted);
	font-size: 1rem;
}

/* 9. Monitoring band ------------------------------------------------------ */

/* Core gives cover blocks a 430px floor and centres their contents; this band
   wants neither, it just wants the photograph behind an ink overlay. */
.wp-block-cover.dit-band {
	min-height: 0;
	padding: 0;
	align-items: stretch;
	justify-content: flex-start;
	border-block: 1px solid var(--line-ink);
}

.wp-block-cover.dit-band .wp-block-cover__inner-container {
	width: 100%;
}

.wp-block-cover.dit-band .wp-block-cover__image-background {
	object-position: 50% 45%;
}

/* Two-column band layout, used by the monitoring band and the differentiators.
   Deliberately not scoped to .dit-band — both sections use it. */
.dit-band__inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(1.75rem, 4vw, 3.5rem);
	align-items: start;
}

.dit-checklist {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 0.85rem;
}

.dit-checklist li {
	position: relative;
	padding-left: 1.75rem;
	font-size: 1rem;
	line-height: 1.55;
}

.dit-checklist li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.45rem;
	width: 0.7rem;
	height: 0.7rem;
	border-radius: 2px;
	background: var(--brand-sky-light);
}

@media (min-width: 56em) {
	.dit-band__inner {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}
}

/* 10. Differentiators ----------------------------------------------------- */

.dit-why {
	counter-reset: why;
}

.dit-why__item {
	border-top: 2px solid var(--ink);
	padding-top: 1rem;
}

.dit-why__item h3 {
	margin: 0 0 0.45rem;
	font-size: 1.125rem;
}

.dit-why__item p {
	margin: 0;
	color: var(--muted);
	font-size: 1rem;
}

.dit-why__figure {
	margin: 0;
	display: flex;
	align-self: stretch;
}

.dit-why__figure img {
	width: 100%;
	border-radius: var(--r-md);
	aspect-ratio: 4 / 3;
	object-fit: cover;
	object-position: 50% 40%;
}

@media (min-width: 56em) {
	.dit-why__figure img {
		aspect-ratio: auto;
		height: 100%;
		min-height: 22rem;
	}
}

/* 11. Testimonials -------------------------------------------------------- */

.dit-quote {
	display: flex;
	flex-direction: column;
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	padding: clamp(1.4rem, 2.5vw, 2rem);
}

.dit-quote::before {
	content: "\201C";
	font-family: var(--display);
	font-size: 3rem;
	line-height: 0.7;
	color: var(--brand-sky);
	display: block;
	margin-bottom: 0.5rem;
}

.dit-quote blockquote,
.dit-quote .wp-block-quote {
	margin: 0;
	border: 0;
	padding: 0;
}

.dit-quote p {
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--body);
	margin: 0 0 1rem;
}

.dit-quote cite,
.dit-quote .wp-block-quote cite {
	margin-top: auto;
	display: block;
	font-family: var(--mono);
	font-size: 0.8125rem;
	font-style: normal;
	line-height: 1.5;
	color: var(--muted);
	padding-top: 0.9rem;
	border-top: 1px solid var(--line);
}

.dit-quote cite strong {
	display: block;
	color: var(--ink);
	font-weight: 500;
}

/* 12. Contact ------------------------------------------------------------- */

.dit-contact__card h3 {
	margin: 0 0 0.35rem;
	font-size: 1.125rem;
}

.dit-contact__who {
	margin: 0 0 1rem;
	font-size: 0.9375rem;
	color: var(--muted);
}

.dit-contact__line {
	margin: 0 0 0.5rem;
	font-family: var(--mono);
	font-size: 0.9375rem;
	line-height: 1.5;
	word-break: break-word;
}

.dit-contact__line a {
	color: var(--ink);
	text-decoration-color: var(--brand-sky);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

.dit-contact__line a:hover {
	color: var(--brand-navy);
}

.dit-contact__line:last-child {
	margin-bottom: 0;
}

.dit-hours {
	margin: 0;
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.4rem 1.25rem;
	font-size: 0.9375rem;
}

.dit-hours dt {
	font-weight: 600;
	color: var(--ink);
}

.dit-hours dd {
	margin: 0;
	font-family: var(--mono);
	color: var(--muted);
}

.dit-address {
	margin: 0;
	font-style: normal;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--muted);
}

/* 13. Call to action band ------------------------------------------------- */
/* Ink on brand-sky measures 7.2:1, so the loudest block on the page is still
   comfortably readable. */

.dit-cta {
	background: var(--brand-sky);
	padding-block: clamp(2.5rem, 5vw, 4rem);
}

.dit-cta__inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
	align-items: center;
}

.dit-cta h2,
.dit-cta p {
	color: var(--ink);
}

.dit-cta h2 {
	margin: 0 0 0.5rem;
	font-size: clamp(1.625rem, 3vw, 2.25rem);
}

.dit-cta p {
	margin: 0;
	max-width: 34rem;
}

.dit-cta .wp-block-buttons {
	justify-content: flex-start;
}

.dit-cta .wp-element-button,
.dit-cta .wp-block-button__link {
	background: var(--ink);
	color: var(--chalk);
}

.dit-cta .wp-element-button:hover,
.dit-cta .wp-block-button__link:hover {
	background: #061229;
	color: var(--chalk);
}

.dit-cta .dit-btn-quiet .wp-element-button,
.dit-cta .dit-btn-quiet .wp-block-button__link {
	background: transparent;
	color: var(--ink);
	box-shadow: inset 0 0 0 2px var(--ink);
}

.dit-cta .dit-btn-quiet .wp-element-button:hover,
.dit-cta .dit-btn-quiet .wp-block-button__link:hover {
	background: var(--ink);
	color: var(--chalk);
}

.dit-cta__phone {
	font-family: var(--mono);
	font-size: clamp(1.375rem, 4vw, 2rem);
	font-weight: 500;
	letter-spacing: -0.01em;
}

.dit-cta__phone a {
	color: var(--ink);
	text-decoration-color: rgba(24, 36, 55, 0.4);
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
	white-space: nowrap;
}

.dit-cta__phone a:hover {
	text-decoration-color: var(--ink);
}

@media (min-width: 56em) {
	.dit-cta__inner {
		grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
		gap: 2.5rem;
	}

	.dit-cta .wp-block-buttons {
		justify-content: flex-end;
	}
}

/* 14. Footer -------------------------------------------------------------- */

.dit-footer {
	background: var(--ink);
	padding-block: clamp(2.75rem, 5vw, 4rem) 1.5rem;
}

.dit-footer__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
}

.dit-footer h2,
.dit-footer h3 {
	font-size: 0.75rem;
	font-family: var(--mono);
	font-weight: 400;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--on-ink-muted);
	margin: 0 0 0.9rem;
}

.dit-footer__brand p {
	margin: 0 0 0.6rem;
}

.dit-footer__brand .dit-footer__name {
	font-family: var(--display);
	font-size: 1.25rem;
	font-weight: 700;
	letter-spacing: -0.018em;
}

.dit-footer ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.55rem;
	font-size: 0.9375rem;
}

.dit-footer li {
	margin: 0;
}

.dit-footer__legal {
	margin-top: clamp(2rem, 4vw, 3rem);
	padding-top: 1.25rem;
	border-top: 1px solid var(--line-ink);
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	justify-content: space-between;
	font-size: 0.8125rem;
	color: var(--on-ink-muted);
}

.dit-footer__legal p {
	margin: 0;
	font-size: 0.8125rem;
	color: var(--on-ink-muted);
}

@media (min-width: 48em) {
	.dit-footer__grid {
		grid-template-columns: 1.4fr 1fr 1fr;
		gap: clamp(1.5rem, 4vw, 3.5rem);
	}
}

/* 15. Editorial pages, archive and 404 ----------------------------------- */

.dit-page-head {
	background: var(--chalk-deep);
	border-bottom: 1px solid var(--line);
	padding-block: clamp(2.5rem, 6vw, 4.5rem);
}

.dit-page-head h1,
.dit-page-head .wp-block-post-title {
	margin: 0;
	max-width: 44rem;
}

.dit-prose > * {
	margin-block: 0 1.25rem;
}

.dit-prose > :last-child {
	margin-bottom: 0;
}

.dit-prose h2 {
	margin-top: 2.5rem;
}

.dit-prose h3 {
	margin-top: 2rem;
}

.dit-prose img {
	border-radius: var(--r-md);
}

.dit-postlist {
	display: grid;
	gap: clamp(1rem, 2vw, 1.5rem);
	grid-template-columns: 1fr;
	padding: 0;
	list-style: none;
}

.dit-postlist > li {
	margin: 0;
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	padding: clamp(1.25rem, 2.5vw, 1.75rem);
}

.dit-postlist .wp-block-post-title {
	font-size: 1.25rem;
	margin: 0 0 0.5rem;
}

.dit-postlist .wp-block-post-title a {
	text-decoration: none;
}

.dit-postlist .wp-block-post-title a:hover {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

.dit-postlist .wp-block-post-date {
	font-family: var(--mono);
	font-size: 0.8125rem;
	color: var(--muted);
	margin: 0 0 0.6rem;
}

.dit-postlist .wp-block-post-excerpt__excerpt {
	color: var(--muted);
	margin: 0;
}

@media (min-width: 48em) {
	.dit-postlist {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.dit-404 {
	padding-block: clamp(3.5rem, 9vw, 7rem);
}

.dit-404__code {
	font-family: var(--mono);
	font-size: 0.875rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--brand-navy);
	margin: 0 0 1rem;
}

.dit-404 .wp-block-search__label {
	font-family: var(--mono);
	font-size: 0.75rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--muted);
	margin-bottom: 0.5rem;
	display: block;
}

.dit-404 .wp-block-search__input {
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	padding: 0.75rem 0.85rem;
	background: var(--paper);
	color: var(--body);
	font-family: inherit;
	font-size: 1rem;
}

.dit-404 .wp-block-search__input:focus {
	border-color: var(--ink);
}

/* 16. Reduced motion and contrast preferences ---------------------------- */

/* Movement is opt-in, and only ever a colour or a couple of pixels. */
@media (prefers-reduced-motion: no-preference) {
	a,
	.wp-element-button,
	.wp-block-button__link,
	.dit-service::before,
	.dit-card,
	.dit-quote {
		transition: background-color 160ms ease, color 160ms ease,
			border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
	}

	.dit-service:hover {
		transform: translateY(-2px);
	}

	html {
		scroll-behavior: smooth;
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}

@media (prefers-contrast: more) {
	.dit-card,
	.dit-quote,
	.dit-postlist > li {
		border-color: var(--ink);
	}

	.dit-lead,
	.dit-note,
	.dit-service p:last-child,
	.dit-why__item p {
		color: var(--body);
	}
}

/* The editor canvas has no body background of its own to inherit. */
.editor-styles-wrapper {
	background-color: var(--chalk);
}