/* ==========================================================================
   110KMPS — content layer
   Design tokens, base typography, editor content and pattern classes.
   Loaded on the front end AND in the block editor (scoped automatically),
   so the editor matches the site. Site chrome lives in main.css.

   Raw values are defined once in theme.json and exposed by WordPress as
   --wp--preset--* / --wp--custom--* properties. This file maps them to
   semantic tokens; nothing below the token block uses raw values except
   hairline widths and unitless ratios.
   ========================================================================== */

/* 1. Tokens
   Declared on body, not :root: WordPress < 6.6 prints the preset variables
   on body, so tokens referencing them must resolve there too.
   ========================================================================== */

body {
	--color-background: var(--wp--preset--color--base);
	--color-surface: var(--wp--preset--color--surface);
	--color-text: var(--wp--preset--color--contrast);
	--color-muted: var(--wp--preset--color--muted);
	--color-border: var(--wp--preset--color--line);
	--color-accent: var(--wp--preset--color--accent);
	--color-accent-contrast: var(--wp--preset--color--accent-contrast);
	--color-raised: var(--wp--custom--color--surface-raised);
	--color-border-strong: var(--wp--custom--color--line-strong);
	--color-focus: var(--wp--preset--color--contrast);

	--font-display: var(--font-body);
	--font-body: var(--wp--preset--font-family--body);

	--text-sm: var(--wp--preset--font-size--small);
	--text-base: var(--wp--preset--font-size--base);
	--text-md: var(--wp--preset--font-size--medium);
	--text-lg: var(--wp--preset--font-size--large);
	--text-xl: var(--wp--preset--font-size--x-large);
	--text-2xl: var(--wp--preset--font-size--xx-large);
	--text-display: var(--wp--preset--font-size--display);

	--leading-display: var(--wp--custom--line-height--display);
	--leading-heading: var(--wp--custom--line-height--heading);
	--leading-body: var(--wp--custom--line-height--body);

	--space-xs: var(--wp--preset--spacing--xs);
	--space-sm: var(--wp--preset--spacing--sm);
	--space-md: var(--wp--preset--spacing--md);
	--space-lg: var(--wp--preset--spacing--lg);
	--space-xl: var(--wp--preset--spacing--xl);
	--space-2xl: var(--wp--preset--spacing--xxl);

	--container-narrow: var(--wp--custom--container--narrow);
	--container-default: var(--wp--custom--container--default);
	--container-wide: var(--wp--custom--container--wide);
	--gutter: var(--wp--custom--gutter);
	--header-height: var(--wp--custom--header-height);

	--radius-sm: var(--wp--custom--radius--sm);
	--radius-md: var(--wp--custom--radius--md);

	--transition-fast: var(--wp--custom--transition--fast);
	--transition-default: var(--wp--custom--transition--default);

	--hairline: 1px solid var(--color-border);
	--measure: 64ch;
}

/* Colour schemes. The site is dark by default. Any element with a scheme
   class (or the matching core background colour) re-maps the semantic
   colours, so components inside need no variants.
     .is-deep     darker band (footer, emphasis sections)
     .is-surface  charcoal band
     .is-light    bone background with ink text, for rare contrast moments
   .is-inverse is kept as an alias of .is-deep for existing content. */
.is-deep,
.is-inverse,
.has-deep-background-color {
	--color-background: var(--wp--preset--color--deep);
	--color-surface: var(--wp--custom--color--deep-surface);
	--color-border: var(--wp--custom--color--deep-line);

	background-color: var(--color-background);
	color: var(--color-text);
}

.is-surface,
.has-surface-background-color {
	--color-background: var(--wp--preset--color--surface);
	--color-surface: var(--wp--custom--color--surface-raised);

	background-color: var(--color-background);
	color: var(--color-text);
}

.is-light,
.has-contrast-background-color {
	--color-background: var(--wp--preset--color--contrast);
	--color-surface: var(--wp--preset--color--contrast);
	--color-text: var(--wp--preset--color--accent-contrast);
	--color-muted: var(--wp--custom--color--light-muted);
	--color-border: var(--wp--custom--color--light-line);
	--color-border-strong: var(--wp--custom--color--light-muted);
	--color-accent: var(--wp--preset--color--accent-contrast);
	--color-accent-contrast: var(--wp--preset--color--contrast);
	--color-focus: var(--wp--preset--color--accent-contrast);

	background-color: var(--color-background);
	color: var(--color-text);
}

/* 2. Base
   ========================================================================== */

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

body {
	margin: 0;
	background-color: var(--color-background);
	color: var(--color-text);
	font-family: var(--font-body);
	font-size: var(--text-base);
	line-height: var(--leading-body);
	font-optical-sizing: auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

img,
svg,
video {
	max-width: 100%;
	height: auto;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 400;
	line-height: var(--leading-heading);
	letter-spacing: -0.012em;
	text-wrap: balance;
}

h4,
h5,
h6 {
	font-family: var(--font-body);
	font-weight: 600;
	letter-spacing: 0;
}

p {
	margin: 0;
	text-wrap: pretty;
}

a {
	color: inherit;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.22em;
	transition: text-decoration-color var(--transition-fast), color var(--transition-fast);
}

a:hover {
	text-decoration-color: var(--color-accent);
}

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

::selection {
	background-color: var(--color-accent);
	color: var(--color-accent-contrast);
}

/* 3. Shared typographic components
   ========================================================================== */

.eyebrow {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs) var(--space-sm);
	align-items: baseline;
	margin: 0;
	color: var(--color-muted);
	font-family: var(--font-body);
	font-size: var(--text-sm);
	font-weight: 500;
	letter-spacing: 0.08em;
	line-height: 1.4;
	text-transform: uppercase;
}

.eyebrow__index,
.eyebrow strong {
	color: var(--color-text);
	font-weight: inherit;
	font-variant-numeric: tabular-nums;
}

.lead,
.mc-lead {
	font-family: var(--font-display);
	font-size: var(--text-lg);
	line-height: 1.25;
	letter-spacing: -0.01em;
}

.mc-lead--xl {
	font-size: var(--text-xl);
	line-height: 1.12;
}

.mc-muted {
	color: var(--color-muted);
}

.button,
.wp-element-button,
.wp-block-button__link {
	display: inline-flex;
	gap: 0.6em;
	align-items: center;
	justify-content: center;
	min-height: 2.75rem;
	padding: 0.75em 1.4em;
	border: 1px solid var(--color-text);
	border-radius: var(--radius-sm);
	background-color: var(--color-text);
	color: var(--color-background);
	font-family: var(--font-body);
	font-size: var(--text-sm);
	font-weight: 500;
	letter-spacing: 0.02em;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.button:hover,
.wp-element-button:hover,
.wp-block-button__link:hover {
	background-color: transparent;
	color: var(--color-text);
}

.button--outline,
.is-style-outline > .wp-block-button__link {
	background-color: transparent;
	color: var(--color-text);
}

.button--outline:hover,
.is-style-outline > .wp-block-button__link:hover {
	background-color: var(--color-text);
	color: var(--color-background);
}

.link-arrow {
	display: inline-flex;
	gap: 0.5em;
	align-items: center;
	font-size: var(--text-sm);
	font-weight: 500;
	letter-spacing: 0.02em;
	text-decoration: none;
	border-bottom: 1px solid currentColor;
	padding-block: 0.25em;
}

.link-arrow .icon {
	width: 1em;
	height: 1em;
	transition: transform var(--transition-fast);
}

.link-arrow:hover .icon {
	transform: translateX(0.2em);
}

.link-arrow:hover .icon--arrow-up-right {
	transform: translate(0.15em, -0.15em);
}

/* 4. Entry content (Gutenberg output)
   ========================================================================== */

.entry-content {
	font-size: var(--text-base);
}

.entry-content > * {
	width: min(100% - var(--gutter) * 2, var(--container-narrow));
	margin-inline: auto;
}

.entry-content > * + * {
	margin-block-start: var(--space-md);
}

.entry-content > .alignwide {
	width: min(100% - var(--gutter) * 2, var(--container-default));
}

.entry-content > .alignfull {
	width: 100%;
	max-width: none;
}

.entry-content > .alignfull + .alignfull {
	margin-block-start: 0;
}

.entry-content > :is(h2, h3, h4) {
	margin-block-start: var(--space-lg);
}

.entry-content > :is(h2, h3, h4) + * {
	margin-block-start: var(--space-sm);
}

.entry-content :is(ul, ol):not([class*="mc-"]) {
	padding-inline-start: 1.25em;
}

.entry-content li + li {
	margin-block-start: 0.4em;
}

.entry-content :is(blockquote, .wp-block-quote) {
	margin-inline: auto;
	padding-inline-start: var(--space-md);
	border-inline-start: 1px solid var(--color-text);
}

.entry-content .wp-block-quote cite,
.entry-content .wp-block-pullquote cite {
	display: block;
	margin-block-start: var(--space-sm);
	color: var(--color-muted);
	font-family: var(--font-body);
	font-size: var(--text-sm);
	font-style: normal;
}

.entry-content .wp-block-pullquote {
	padding-block: var(--space-lg);
	border-block: var(--hairline);
	text-align: start;
}

.entry-content figure {
	margin-block-end: 0;
}

.entry-content figcaption,
.entry-content .wp-element-caption {
	margin-block-start: var(--space-xs);
	color: var(--color-muted);
	font-size: var(--text-sm);
}

.entry-content hr,
.entry-content .wp-block-separator {
	border: 0;
	border-block-start: var(--hairline);
}

.entry-content table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--text-sm);
}

.entry-content :is(th, td) {
	padding: var(--space-xs) var(--space-sm) var(--space-xs) 0;
	border-block-end: var(--hairline);
	text-align: start;
	vertical-align: top;
}

.entry-content code {
	font-size: 0.9em;
}

/* Long-form reading: articles and legal pages. */
.prose > p,
.prose > ul,
.prose > ol {
	font-size: var(--text-md);
	line-height: 1.7;
}

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

/* 5. Pattern classes
   Vocabulary used by theme patterns. Editors can apply them through
   Block → Advanced → Additional CSS class(es).
   ========================================================================== */

/* Full-width section with vertical rhythm. */
.mc-section {
	padding-block: var(--space-2xl);
	background-color: var(--color-background);
	color: var(--color-text);
}

.mc-section--tight {
	padding-block: var(--space-xl);
}

.mc-section + .mc-section:not(.is-deep, .is-inverse, .is-surface, .is-light) {
	border-block-start: var(--hairline);
}

/* Centered container inside a section. */
.mc-container {
	width: min(100% - var(--gutter) * 2, var(--container-wide));
	margin-inline: auto;
}

.mc-container > * + * {
	margin-block-start: var(--space-md);
}

/* Asymmetric label + body split. First child is the label column. */
.mc-split {
	display: grid;
	gap: var(--space-md);
}

.mc-split > * {
	margin: 0;
}

.mc-split > :nth-child(n + 2) > * + * {
	margin-block-start: var(--space-md);
}

.mc-split p {
	max-width: var(--measure);
}

/* Numbered, rule-topped items in a responsive grid. */
.mc-grid {
	display: grid;
	gap: var(--space-lg) var(--space-md);
	margin-block-start: var(--space-xl);
	counter-reset: mc-item;
}

.mc-grid > * {
	margin-block: 0;
}

.mc-item {
	padding-block-start: var(--space-sm);
	border-block-start: 1px solid var(--color-border);
	counter-increment: mc-item;
}

.mc-item > * + * {
	margin-block-start: var(--space-sm);
}

.mc-grid--numbered .mc-item::before {
	display: block;
	margin-block-end: var(--space-md);
	color: var(--color-muted);
	content: counter(mc-item, decimal-leading-zero);
	font-size: var(--text-sm);
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.08em;
}

.mc-item h3 {
	font-size: var(--text-lg);
}

.mc-item p {
	color: var(--color-muted);
}

.mc-section-title {
	max-width: 20ch;
	font-size: var(--text-xl);
}

/* Placeholder note for content that is not published yet. */
.mc-empty {
	padding: var(--space-lg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	background-color: var(--color-surface);
}

.mc-empty p {
	color: var(--color-muted);
	font-size: var(--text-md);
}

/* Team profiles (pattern "Team members"). */
.mc-team {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
	gap: var(--space-xl) var(--space-md);
}

.mc-team > * {
	margin-block: 0;
}

.mc-member > * + * {
	margin-block-start: var(--space-xs);
}

.mc-member__photo {
	margin: 0 0 var(--space-sm);
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border-radius: var(--radius-sm);
	background-color: var(--color-surface);
}

.mc-member__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mc-member__photo img:not([src]),
.mc-member__photo img[src=""] {
	display: none;
}

.mc-member__name {
	font-size: var(--text-lg);
}

.mc-member__role {
	font-size: var(--text-sm);
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.mc-member__bio {
	color: var(--color-muted);
}

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

@media (min-width: 60rem) {
	.mc-split {
		grid-template-columns: repeat(12, minmax(0, 1fr));
		column-gap: var(--space-md);
	}

	.mc-split > :first-child {
		grid-column: 1 / span 3;
	}

	.mc-split > :nth-child(n + 2) {
		grid-column: 5 / -1;
	}

	.mc-grid--3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}