/**
 * LTC Base — resets, base typography, containers, grid and section utilities.
 *
 * FONT LOADING STRATEGY (reported per implementation rule 13):
 * Real Manrope and Source Serif 4 files are self-hosted from
 * assets/fonts/ — no remote Google Fonts request is made at runtime.
 * The three .woff2 files were downloaded once, directly from Google's
 * own static font host (fonts.gstatic.com), under the SIL Open Font
 * License, which explicitly permits self-hosting and redistribution.
 * Full source/licensing detail: assets/fonts/LICENSE-AND-SOURCE.txt.
 * Manrope ships as a single variable-font file spanning weights
 * 400–800 (Google itself serves it that way); Source Serif 4 is
 * loaded only as the two weights/styles actually used — regular and
 * italic at 400. font-display: swap is used throughout so text is
 * never invisible while loading. System fallback stacks remain after
 * the real family name in ltc-tokens.css for resilience.
 */

@font-face {
	font-family: 'Manrope';
	src: url('../fonts/manrope-variable.woff2') format('woff2-variations'),
		url('../fonts/manrope-variable.woff2') format('woff2');
	font-weight: 400 800;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Source Serif 4';
	src: url('../fonts/source-serif-4-regular.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Source Serif 4';
	src: url('../fonts/source-serif-4-italic.woff2') format('woff2');
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}

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

html {
	-webkit-text-size-adjust: 100%;
	/* See the matching note on body.ltc-foundation below: the closed
	   mobile drawer is off-canvas via transform, not removed from
	   layout, so both html and body need overflow-x guarded against
	   it registering as horizontal scroll. */
	overflow-x: hidden;
}

body.ltc-foundation {
	margin: 0;
	/* The closed mobile drawer sits off-canvas via position:fixed +
	   translateX(100%) rather than being removed from layout, so
	   without this it can still register as document-level horizontal
	   overflow even while visually hidden. */
	overflow-x: hidden;
	background: var(--ltc-paper-50);
	color: var(--ltc-ink-900);
	font-family: var(--ltc-font-sans);
	font-weight: var(--ltc-weight-body);
	font-size: var(--ltc-type-body);
	line-height: var(--ltc-leading-body);
	-webkit-font-smoothing: antialiased;
}

.ltc-foundation img {
	max-width: 100%;
	display: block;
}

.ltc-foundation h1,
.ltc-foundation h2,
.ltc-foundation h3,
.ltc-foundation h4 {
	margin: 0;
	font-family: var(--ltc-font-sans);
	font-weight: var(--ltc-weight-heading);
	color: var(--ltc-ink-950);
}

.ltc-h-hero {
	font-size: var(--ltc-type-hero);
	line-height: var(--ltc-leading-hero);
	letter-spacing: var(--ltc-tracking-display);
}

.ltc-h1 {
	font-size: var(--ltc-type-h1);
	line-height: var(--ltc-leading-h1);
	letter-spacing: var(--ltc-tracking-display);
}

.ltc-h2 {
	font-size: var(--ltc-type-h2);
	line-height: var(--ltc-leading-h2);
	letter-spacing: var(--ltc-tracking-h2);
}

.ltc-h3 {
	font-size: var(--ltc-type-h3);
	line-height: var(--ltc-leading-h3);
	font-weight: var(--ltc-weight-subhead);
}

.ltc-h4 {
	font-size: var(--ltc-type-h4);
	line-height: var(--ltc-leading-h4);
	font-weight: var(--ltc-weight-subhead);
}

.ltc-body-lg {
	font-size: var(--ltc-type-body-lg);
	line-height: var(--ltc-leading-body-lg);
}

.ltc-body {
	font-size: var(--ltc-type-body);
	line-height: var(--ltc-leading-body);
}

.ltc-numeral {
	font-weight: var(--ltc-weight-numeral);
	font-variant-numeric: tabular-nums;
}

.ltc-eyebrow {
	display: inline-block;
	font-size: var(--ltc-type-eyebrow);
	font-weight: var(--ltc-weight-label);
	text-transform: uppercase;
	letter-spacing: var(--ltc-tracking-eyebrow);
	color: var(--ltc-teal-700);
}

.ltc-eyebrow--on-dark {
	color: var(--ltc-teal-500);
}

.ltc-serif-accent {
	font-family: var(--ltc-font-serif);
	font-weight: 400;
	font-style: italic;
	color: var(--ltc-teal-700);
}

/* Restrained editorial emphasis. --ltc-amber measures ~1.8:1 against a
   near-white surface, well under WCAG AA, so light/paper sections use
   dark-teal instead (set as the default above) — amber is not a
   light-surface text colour (see ltc-tokens.css). Dark surfaces use
   the full-brightness --ltc-amber directly, which reads correctly
   against the near-black background. Kept to one phrase per section
   wherever used (hero headline, testimonial quote, capability-page
   "why it matters" statement) — never a repeated or dominant
   treatment. */
.ltc-section--dark .ltc-serif-accent {
	color: var(--ltc-amber);
}

/* ---- Containers ---- */

.ltc-canvas {
	max-width: var(--ltc-canvas-wide);
	margin-inline: auto;
}

.ltc-container {
	max-width: var(--ltc-container-main);
	margin-inline: auto;
	padding-inline: var(--ltc-outer-padding);
}

.ltc-container-text {
	max-width: var(--ltc-text-container);
}

.ltc-container-article {
	max-width: var(--ltc-article-width);
}

/* ---- 12-column grid (desktop default; overridden per breakpoint in ltc-responsive.css) ---- */

.ltc-grid {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: var(--ltc-grid-gap);
}

/* ---- Sections ---- */

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

.ltc-section--tight {
	padding-block: calc(var(--ltc-section-space) * 0.6);
}

.ltc-section--light {
	background: var(--ltc-paper-50);
	color: var(--ltc-ink-900);
}

/* Full-width section separation (programme explorer, client-logo rail,
   contact form) — uses the cool Mist Surface, not the neutral Paper 100
   and not the rejected, more saturated aqua surface, so these sections
   read as gently set apart from white without becoming a dominant
   minty block. */
.ltc-section--paper {
	background: var(--ltc-mist-surface);
	color: var(--ltc-ink-900);
}

/* Neutral-grey secondary surface — reads as grey first, never as an
   aqua/blue-green field. Preferred over --paper (mist) for ordinary
   section differentiation; --paper is reserved for the rare moment
   that specifically wants the cool tint (the logo rail's immediate
   surroundings previously misused it for general section banding). */
.ltc-section--muted {
	background: var(--ltc-paper-100);
	color: var(--ltc-ink-900);
}

/* Restrained grid motif — restores a subtle echo of the old production
   site's semi-chequered background without reviving its heavier
   "graph paper" look. Self-contained (sets its own base colour + line
   overlay together) so it is used as a drop-in replacement for
   --light/--muted on the handful of sections chosen for it, not layered
   on top of them. Hairline lines only, drawn with linear-gradient() as
   a line-rendering technique (not a colour-transition gradient fill).
   DESIGN RULE (2026-08-08, grid-containment pass): this motif is
   HOMEPAGE-ONLY — a distinctive homepage visual element, not a
   site-wide background language. It was briefly reused on the
   programmes-hub search section and the capability-page "why it
   matters" intro; both were reverted to their prior neutral surfaces.
   Do not apply this class to any non-homepage template. Never behind
   the dark hero, never inside cards, never animated. */
.ltc-section--grid {
	background-color: var(--ltc-paper-100);
	background-image:
		linear-gradient(to right, rgba(6, 25, 27, 0.045) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(6, 25, 27, 0.045) 1px, transparent 1px);
	background-size: 48px 48px;
	color: var(--ltc-ink-900);
}

.ltc-section--dark {
	background: var(--ltc-ink-950);
	color: var(--ltc-paper-50);
}

.ltc-section--dark .ltc-h-hero,
.ltc-section--dark .ltc-h1,
.ltc-section--dark .ltc-h2,
.ltc-section--dark .ltc-h3,
.ltc-section--dark .ltc-h4 {
	color: var(--ltc-white);
}

.ltc-section--dark .ltc-text-muted {
	color: rgba(247, 245, 240, 0.66);
}

.ltc-text-muted {
	color: var(--ltc-text-muted);
}

/* ---- Accessible focus (visible, teal, never suppressed) ---- */

.ltc-foundation :focus-visible {
	outline: 2px solid var(--ltc-teal-600);
	outline-offset: 3px;
	border-radius: 4px;
}

.ltc-section--dark :focus-visible {
	outline-color: var(--ltc-teal-500);
}

/* ---- Screen-reader-only utility (used for decorative-loop labelling etc.) ---- */

.ltc-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ---- Reduced motion: global kill-switch ---- */

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

/* ---- Blog/Insights: hide public-facing publish dates ----
   Visual-only removal — the underlying post_date is untouched, and
   this does not affect Rank Math's own date output (schema, sitemap
   lastmod). Blocksy renders each meta item as its own <li> with no
   separator character in the markup (spacing/dividers are CSS layout,
   not content), so hiding the whole <li class="meta-date"> — not just
   the inner .ct-meta-element-date <time> — removes it cleanly with no
   dangling divider. Covers blog listing/archive cards, single-post
   meta, and related-posts cards alike, since all three use the same
   Blocksy post-meta component. The LTC-authored homepage Insights
   cards (template-parts/home/resources-insights.php) never rendered a
   date to begin with, so nothing to hide there. */
.meta-date {
	display: none !important;
}