/* ==========================================================================
   Curate — global stylesheet
   --------------------------------------------------------------------------
   This is the only CSS file that loads on every page. Anything specific to a
   single block belongs in blocks/<slug>/style.css, which WordPress enqueues
   only when that block is actually rendered. The holding page's layout lives
   in holding.css, loaded only on that template.

   Written mobile-first: the base rules are the small-screen layout, and every
   media query is min-width. Sections:

     1. Fonts
     2. Reset
     3. Tokens
     4. Base elements
     5. Layout primitives
     6. Utilities
     7. Theme parts (header, footer, prose pages)

   Colours match the palette in theme.json. Change them in both places.
   ========================================================================== */


/* 1. Fonts
   ==========================================================================
   DM Sans, self-hosted: variable weight (100–1000) and optical size (9–40),
   subset to Latin and Latin-1. font-optical-sizing is on by default, so the
   browser picks the optical size to match the font size — the same thing the
   design's "DM Sans 18pt" cut does at 18px. */

@font-face {
	font-family: "DM Sans";
	src: url("../fonts/dm-sans-latin.woff2") format("woff2");
	font-weight: 100 1000;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "DM Sans";
	src: url("../fonts/dm-sans-italic-latin.woff2") format("woff2");
	font-weight: 100 1000;
	font-style: italic;
	font-display: swap;
}


/* 2. Reset
   ========================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

/* Strip the browser's default spacing. Everything that needs space asks for it
   explicitly, which is what stops block spacing drifting between templates. */
html,
body,
h1, h2, h3, h4, h5, h6,
p,
figure,
blockquote,
dl, dd,
ol, ul,
fieldset,
legend {
	margin: 0;
	padding: 0;
}

fieldset {
	border: 0;
	min-inline-size: 0;
}

ol[class],
ul[class] {
	list-style: none;
}

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body {
	min-block-size: 100vh;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img,
picture,
video,
canvas,
svg {
	display: block;
	max-inline-size: 100%;
	block-size: auto;
}

/* WordPress ships width/height attributes on images; keep the intrinsic ratio
   when CSS overrides one of them. */
img[width][height] {
	block-size: auto;
}

input,
button,
textarea,
select {
	font: inherit;
	color: inherit;
	letter-spacing: inherit;
}

button {
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* Long words and URLs in editor copy must not force a horizontal scrollbar. */
p, h1, h2, h3, h4, li, dd, dt, figcaption {
	overflow-wrap: break-word;
}

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

::selection {
	background: var(--wpd-ink);
	color: var(--wpd-white);
	text-shadow: none;
}


/* 3. Tokens
   ========================================================================== */

:root {
	--wpd-paper:    #f5f6f5;
	--wpd-stone:    #d1d2c6;
	--wpd-ink:      #0a0a0c;
	--wpd-graphite: #282e33;
	--wpd-cloud:    #e2e2e2;
	--wpd-muted:    #999;
	--wpd-white:    #fff;

	--wpd-font-sans:  "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
	/* The brand serif: the strapline and the sign-up options. A system font, so
	   nothing to download. Linux and Android have no Times New Roman; Liberation
	   Serif and Tinos are metric-compatible stand-ins that keep line lengths. */
	--wpd-font-serif: "Times New Roman", Times, "Liberation Serif", Tinos, serif;

	/* 70px at the 1920px artboard, never less than 20px. */
	--wpd-gutter: clamp(1.25rem, 3.6458vw, 4.375rem);

	--wpd-shell-max:    1920px;
	--wpd-shell-narrow: 46rem;

	--wpd-ease-out: cubic-bezier(0.2, 0.7, 0.1, 1);
}


/* 4. Base elements
   ========================================================================== */

body {
	background: var(--wpd-paper);
	color: var(--wpd-ink);
	font-family: var(--wpd-font-sans);
	font-size: 1rem;
	line-height: 1.5;
}

a {
	color: inherit;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.15em;
}

:focus-visible {
	outline: 2px solid var(--wpd-ink);
	outline-offset: 3px;
}


/* 5. Layout primitives
   ========================================================================== */

.wpd-shell {
	inline-size: 100%;
	max-inline-size: var(--wpd-shell-max);
	margin-inline: auto;
	padding-inline: var(--wpd-gutter);
}

.wpd-shell--narrow {
	max-inline-size: calc(var(--wpd-shell-narrow) + 2 * var(--wpd-gutter));
}


/* 6. Utilities
   ========================================================================== */

/* WordPress core's own name for visually hidden text, so plugin markup that
   uses it is covered too. */
.screen-reader-text {
	position: absolute !important;
	inline-size: 1px;
	block-size: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.wpd-skip-link {
	position: absolute;
	inset-block-start: 0.5rem;
	inset-inline-start: 0.5rem;
	z-index: 100;
	padding: 0.5rem 1rem;
	background: var(--wpd-ink);
	color: var(--wpd-white);
	font-size: 0.875rem;
	translate: 0 -200%;
}

.wpd-skip-link:focus {
	translate: 0 0;
}


/* 7. Theme parts
   ========================================================================== */

.wpd-site-header {
	padding-block: var(--wpd-gutter);
}

.wpd-site-header .wpd-logo {
	inline-size: 7.5rem;
	block-size: auto;
}

.wpd-site-footer {
	padding-block: 2rem 1.5rem;
	font-size: 0.75rem;
	letter-spacing: 0.02em;
}

/* Prose: core text blocks written straight onto a page — the privacy policy and
   any other legal page. ACF blocks (.wpd-block) are left alone. */
.wpd-page {
	padding-block: 2rem 4rem;
}

.wpd-page > :where(:not(.wpd-block)) {
	max-inline-size: var(--wpd-shell-narrow);
	margin-inline: auto;
	padding-inline: var(--wpd-gutter);
	box-sizing: content-box;
}

.wpd-page > :where(h1, h2, h3, h4) {
	margin-block: 2.5rem 0.75rem;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -0.01em;
}

.wpd-page > h1 { font-size: 2rem; margin-block-start: 0; }
.wpd-page > h2 { font-size: 1.5rem; }
.wpd-page > h3 { font-size: 1.125rem; }

.wpd-page > :where(p, ul, ol) {
	margin-block-end: 1rem;
}

.wpd-page > :where(ul, ol) {
	padding-inline-start: calc(var(--wpd-gutter) + 1.25em);
}