/* ==========================================================================
   TrueSubstance — design system
   "Light and Substance": an airy frame (Outfit Light) around a few heavy,
   decisive words (Outfit Bold), taken from the wordmark itself.
   Sections: 1 tokens · 2 base · 3 type · 4 layout · 5 header/nav · 6 hero
             7 page header · 8 content blocks · 9 components · 10 footer
             11 brand colourway · 12 motion · 13 print
   ========================================================================== */

/* 1. Tokens ---------------------------------------------------------------- */
@font-face {
	font-family: "Outfit";
	src: url("../fonts/Outfit-Variable.ttf") format("truetype");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

:root {
	/* colour */
	--paper: #f5f1ea;
	--paper-2: #e7decf; /* V1.1: stronger step from paper */
	--ink: #1e1d1b;
	--ink-2: #37342f; /* V1.1: darker body text */
	--muted: #57524a; /* V1.1: darker muted grey */
	--navy: #0d142b; /* Slomilled */
	--cream: #fff9ee; /* Slomilled */
	--rule: rgba(30, 29, 27, 0.16);
	--rule-strong: rgba(30, 29, 27, 0.6);
	--charcoal: #2a2b2d;
	--on-dark: #f5f1ea;
	--on-dark-2: #cfc9be;
	--on-dark-muted: #a8a296;
	--on-dark-rule: rgba(245, 241, 234, 0.18);
	--husk: #a8742a;
	--husk-ink: #85561a;
	--husk-light: #d9a85b;
	--focus: #a8742a;

	/* type */
	--font: "Outfit", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--fs-body: clamp(1.09rem, 1.02rem + 0.25vw, 1.2rem);
	--fs-small: 0.875rem;
	--fs-xs: 0.78rem;
	--fs-lede: clamp(1.2rem, 1.05rem + 0.65vw, 1.55rem);
	--fs-h3: clamp(1.2rem, 1.1rem + 0.45vw, 1.5rem);
	--fs-h2: clamp(2.05rem, 1.25rem + 3.1vw, 3.9rem);
	--fs-h1: clamp(2.6rem, 1.4rem + 4.8vw, 5.6rem);
	--fs-hero: clamp(3rem, 1.2rem + 5.4vw, 7rem);

	/* space */
	--max: 1280px;
	--gutter: clamp(20px, 4.5vw, 56px);
	--pad-x: max(var(--gutter), calc((100% - var(--max)) / 2));
	--sec: clamp(60px, 9vw, 152px);
	--gap: clamp(24px, 3vw, 48px);
	--gap-lg: clamp(40px, 5.5vw, 88px);
	--radius: 2px;
	--header-h: 76px;
}

/* 2. Base ------------------------------------------------------------------ */
*,
*::before,
*::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--font);
	font-size: var(--fs-body);
	font-weight: 400;
	line-height: 1.62;
	font-optical-sizing: auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

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

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { color: var(--husk-ink); }

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

::selection { background: var(--husk-light); color: var(--ink); }

strong, b { font-weight: 650; }

hr { border: 0; border-top: 1px solid var(--rule); }

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.ts-skip {
	position: absolute;
	left: 16px;
	top: -100px;
	z-index: 100;
	padding: 12px 18px;
	background: var(--ink);
	color: var(--paper);
	text-decoration: none;
	border-radius: var(--radius);
}
.ts-skip:focus { top: 12px; color: var(--paper); }

/* 3. Type ------------------------------------------------------------------ */
h1, h2, h3, h4 {
	margin: 0;
	font-weight: 300;
	color: inherit;
	text-wrap: balance;
}

h2 {
	font-size: var(--fs-h2);
	line-height: 1.06;
	letter-spacing: -0.028em;
	max-width: 19ch;
}
h2 strong { font-weight: 640; }

h3 {
	font-size: var(--fs-h3);
	line-height: 1.25;
	font-weight: 520;
	letter-spacing: -0.01em;
}

p { margin: 0; }
p + p { margin-top: 1em; }

.ts-eyebrow {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0 0 1.4rem;
	font-size: var(--fs-xs);
	font-weight: 520;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--muted);
}
.ts-eyebrow::before {
	content: "";
	width: 28px;
	height: 1px;
	background: var(--husk);
	flex: none;
}
.ts-eyebrow a { text-decoration: none; }

.ts-lede {
	font-size: var(--fs-lede);
	font-weight: 300;
	line-height: 1.45;
	letter-spacing: -0.005em;
	color: var(--ink);
	max-width: 36em;
	text-wrap: pretty;
}

.ts-note { font-size: var(--fs-small); color: var(--muted); }

/* 4. Layout ---------------------------------------------------------------- */
.ts-main { display: block; }

.ts-section {
	position: relative;
	display: grid;
	gap: var(--gap-lg);
	padding: var(--sec) var(--pad-x);
	border-top: 1px solid var(--rule);
}
.ts-content > .ts-section:first-child { border-top: 0; }
.ts-section > * { min-width: 0; }

.ts-section.is-alt { background: var(--paper-2); border-top-color: transparent; }
.ts-section.is-dark {
	background: var(--charcoal);
	color: var(--on-dark);
	border-top-color: transparent;
	--rule: var(--on-dark-rule);
	--muted: var(--on-dark-muted);
	--ink-2: var(--on-dark-2);
	--focus: var(--husk-light);
}
.ts-section.is-dark a:hover { color: var(--husk-light); }
.ts-section.is-dark .ts-lede { color: var(--on-dark); }

.ts-head { display: grid; gap: 0; max-width: 60rem; }
.ts-head > h2 + .ts-lede,
.ts-head > h2 + p,
.ts-head > .wp-block-quote + p { margin-top: 1.6rem; }
.ts-head > .ts-lede + p,
.ts-head > p + p { margin-top: 1.1rem; }
.ts-head > .ts-cta { margin-top: 2rem; }

.ts-body { max-width: 40em; color: var(--ink-2); }
.ts-body > .ts-lede { color: var(--ink); margin-bottom: 1.2rem; }

.ts-split {
	display: grid;
	gap: var(--gap-lg);
	align-items: start;
}
@media (min-width: 960px) {
	.ts-split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
	.ts-split.reverse { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
	.ts-split > .ts-body { padding-top: 0.6rem; }
	.ts-split > .ts-media,
	.ts-split > .ts-portrait { position: sticky; top: calc(var(--header-h) + 32px); }
}

.ts-grid { display: grid; gap: var(--gap); }
@media (min-width: 640px) {
	.ts-grid.cols-2,
	.ts-grid.cols-3,
	.ts-grid.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
	.ts-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.ts-grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.ts-item {
	padding-top: 22px;
	border-top: 1px solid var(--rule-strong);
	color: var(--ink-2);
}
.is-dark .ts-item { border-top-color: var(--on-dark-rule); }
.ts-item h3 { color: var(--ink); margin-bottom: 0.7rem; }
.is-dark .ts-item h3 { color: var(--on-dark); }
.ts-item__num {
	font-size: var(--fs-xs);
	font-weight: 520;
	letter-spacing: 0.12em;
	color: var(--husk-ink);
	margin-bottom: 1.6rem;
}
.is-dark .ts-item__num { color: var(--husk-light); }
.ts-item > .ts-cta { margin-top: 1.4rem; }

/* 5. Header and navigation ------------------------------------------------- */
.ts-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--paper); /* fallback for browsers without color-mix() */
	background: color-mix(in srgb, var(--paper) 92%, transparent);
	transition: box-shadow 0.25s ease, background-color 0.25s ease;
}
@supports (backdrop-filter: blur(8px)) {
	.ts-header { backdrop-filter: saturate(1.2) blur(10px); }
}
.ts-header.is-scrolled { box-shadow: 0 1px 0 var(--rule); }
.admin-bar .ts-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .ts-header { top: 46px; } }
@media (max-width: 600px) { .admin-bar .ts-header { top: 0; } }

.ts-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	min-height: var(--header-h);
	padding: 0 var(--pad-x);
}

.ts-logo { display: inline-flex; color: var(--ink); line-height: 0; padding: 8px 0; }
.ts-logo:hover { color: var(--ink); }
.ts-logo__svg { width: clamp(150px, 14vw, 184px); height: auto; }

.ts-nav__list {
	display: flex;
	align-items: center;
	gap: clamp(16px, 2.2vw, 34px);
	margin: 0;
	padding: 0;
	list-style: none;
}
.ts-nav__list a {
	display: inline-block;
	padding: 8px 0;
	font-size: 0.95rem;
	font-weight: 420;
	text-decoration: none;
	color: var(--ink);
	background: linear-gradient(currentColor, currentColor) left bottom / 0 1px no-repeat;
	transition: background-size 0.25s ease, color 0.2s ease;
}
.ts-nav__list a:hover,
.ts-nav__list .current-menu-item > a,
.ts-nav__list .current-page-ancestor > a,
.ts-nav__list [aria-current="page"] { background-size: 100% 1px; color: var(--ink); }
.ts-nav__list .menu-item-cta > a {
	padding: 9px 18px;
	border: 1px solid var(--ink);
	border-radius: var(--radius);
	background: none;
}
.ts-nav__list .menu-item-cta > a:hover,
.ts-nav__list .menu-item-cta.current-menu-item > a { background: var(--ink); color: var(--paper); }

.ts-menu-toggle {
	display: none;
	align-items: center;
	gap: 10px;
	padding: 10px 0 10px 12px;
	border: 0;
	background: none;
	color: var(--ink);
	font: inherit;
	font-size: 0.95rem;
	font-weight: 450;
	cursor: pointer;
}
.ts-menu-toggle .ts-icon--close { display: none; }
.ts-menu-toggle[aria-expanded="true"] .ts-icon--close { display: block; }
.ts-menu-toggle[aria-expanded="true"] .ts-icon--menu { display: none; }

@media (max-width: 959px) {
	.js .ts-menu-toggle { display: inline-flex; }
	.js .ts-nav {
		position: fixed;
		inset: var(--header-h) 0 0 0;
		z-index: 49;
		padding: 24px var(--gutter) 48px;
		background: var(--paper);
		overflow-y: auto;
		visibility: hidden;
		opacity: 0;
		transform: translateY(-8px);
		transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
	}
	.admin-bar.js .ts-nav { top: calc(var(--header-h) + 46px); }
	.js .ts-nav.is-open {
		visibility: visible;
		opacity: 1;
		transform: none;
		transition: opacity 0.2s ease, transform 0.2s ease;
	}
	.js .ts-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
	.js .ts-nav__list li { border-bottom: 1px solid var(--rule); }
	.js .ts-nav__list a {
		display: block;
		padding: 18px 0;
		font-size: clamp(1.6rem, 6vw, 2.2rem);
		font-weight: 300;
		background: none;
	}
	.js .ts-nav__list .menu-item-cta { border-bottom: 0; margin-top: 28px; }
	.js .ts-nav__list .menu-item-cta > a { display: inline-block; font-size: 1.1rem; font-weight: 450; padding: 14px 24px; }
	.no-js-fallback,
	html:not(.js) .ts-nav__list { flex-wrap: wrap; gap: 12px 20px; }
	body.ts-menu-open { overflow: hidden; }
}
html:not(.js) .ts-header__inner { flex-wrap: wrap; padding-block: 12px; }

/* 6. Hero ------------------------------------------------------------------ */
/* V1.2: the V1 typographic hero with the rotating millstone (philosophy first).
   Real food imagery follows immediately in the "everyday pantry" section. */
.ts-hero {
	position: relative;
	padding: clamp(48px, 8vw, 112px) var(--pad-x) clamp(48px, 6vw, 88px);
	overflow: hidden;
	isolation: isolate;
}
.ts-hero__inner { display: grid; gap: var(--gap-lg); align-items: center; }
@media (min-width: 960px) {
	.ts-hero__inner { grid-template-columns: minmax(0, 7.2fr) minmax(0, 4.8fr); min-height: min(68vh, 700px); }
}
.ts-hero__art { display: flex; justify-content: center; }
.ts-hero__stone { width: min(100%, 480px); }
@media (max-width: 959px) {
	.ts-hero__art { position: absolute; right: -42vw; top: -4vw; width: 80vw; opacity: 0.3; z-index: -1; pointer-events: none; }
}
.ts-hero__title {
	font-size: var(--fs-hero);
	font-weight: 200;
	line-height: 0.98;
	letter-spacing: -0.04em;
	max-width: 11ch;
	text-wrap: balance;
}
.ts-hero__title strong { font-weight: 700; letter-spacing: -0.035em; }
.ts-hero__text {
	margin-top: clamp(1.6rem, 3vw, 2.6rem);
	max-width: 33em;
	font-size: var(--fs-lede);
	font-weight: 300;
	line-height: 1.45;
	color: var(--ink-2);
}
.ts-hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 18px 32px;
	margin-top: clamp(2rem, 3.5vw, 3rem);
}

.ts-millstone { overflow: visible; }
.ts-millstone circle,
.ts-millstone line {
	fill: none;
	stroke: var(--husk);
	stroke-width: 0.55;
	vector-effect: non-scaling-stroke;
}
.ts-millstone circle:first-child { stroke-width: 1.1; }
.ts-millstone__rot { transform-origin: 100px 100px; transform-box: view-box; }

/* 0.7.1: realistic hero stone. The image turns (same .ts-millstone__rot animation and reduced-motion
   rule as before); the light and the soft shadow below are fixed, so the light never appears to move.
   Ring geometry of the image: stone radius 48.5% of the width, opening radius 11.64% (24% of the stone). */
.ts-stone { position: relative; display: block; aspect-ratio: 1; }
.ts-stone::before {
	content: "";
	position: absolute;
	inset: 3%;
	border-radius: 50%;
	/* A ring, so the opening shows the page behind it (only a hint of shade at its upper-left edge). */
	background: radial-gradient(circle closest-side, rgba(42, 34, 24, 0) 0 26%, rgba(42, 34, 24, 0.55) 35% 90%, rgba(42, 34, 24, 0) 118%);
	transform: translate(2.2%, 3.4%);
	filter: blur(14px);
	opacity: 0.45;
}
.ts-stone .ts-millstone__rot { transform-origin: 50% 50%; transform-box: border-box; }
.ts-stone__img { position: relative; display: block; width: 100%; height: auto; will-change: transform; }
.ts-stone__light {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	/* Soft key light from the upper left, gentle falloff to the lower right (eased stops: no visible edge). */
	background:
		radial-gradient(circle at 30% 26%, rgba(255, 251, 243, 0.24) 0%, rgba(255, 251, 243, 0.15) 16%, rgba(255, 251, 243, 0.07) 32%, rgba(255, 251, 243, 0.02) 46%, rgba(255, 251, 243, 0) 60%),
		radial-gradient(circle at 76% 82%, rgba(24, 20, 14, 0.26) 0%, rgba(24, 20, 14, 0.16) 20%, rgba(24, 20, 14, 0.07) 40%, rgba(24, 20, 14, 0.02) 56%, rgba(24, 20, 14, 0) 72%);
	/* closest-side: 100% = half the width, so 23.3% is the opening and 97% the stone's edge. */
	-webkit-mask-image: radial-gradient(circle closest-side, transparent 23.1%, #000 23.6%, #000 96.4%, transparent 97%);
	mask-image: radial-gradient(circle closest-side, transparent 23.1%, #000 23.6%, #000 96.4%, transparent 97%);
	pointer-events: none;
}

/* 7. Page header ------------------------------------------------------------ */
.ts-page-header {
	padding: clamp(56px, 9vw, 136px) var(--pad-x) clamp(48px, 6vw, 96px);
}
.ts-page-header__inner { max-width: 64rem; }
.ts-page-header__title {
	font-size: var(--fs-h1);
	font-weight: 220;
	line-height: 1.02;
	letter-spacing: -0.035em;
	max-width: 16ch;
}
.ts-page-header__title strong { font-weight: 680; }
.ts-page-header__intro {
	margin-top: clamp(1.4rem, 2.6vw, 2.2rem);
	max-width: 36em;
	font-size: var(--fs-lede);
	font-weight: 300;
	line-height: 1.45;
	color: var(--ink-2);
}
.ts-page-header--compact .ts-page-header__title { font-size: clamp(2.2rem, 1.4rem + 3vw, 3.8rem); }
.ts-page-header--brand {
	background: var(--sm-navy, #0d142b);
	color: var(--sm-cream, #fff9ee);
	--muted: #c7c9d3;
}
.ts-page-header--brand .ts-page-header__intro { color: #e6e3db; }
.ts-page-header__brand { width: 150px; height: auto; margin-bottom: clamp(28px, 4vw, 48px); }
.ts-page-header--job { padding-bottom: clamp(40px, 5vw, 72px); border-bottom: 1px solid var(--rule); }
.ts-page-header--job .ts-page-header__title { font-size: clamp(2.2rem, 1.3rem + 3.4vw, 4.2rem); max-width: 22ch; }

/* 8. Content blocks -------------------------------------------------------- */

/* Calls to action (paragraph with a single link) */
.ts-cta { margin-top: 1.6rem; }
.ts-cta a {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-weight: 520;
	text-decoration: none;
	border-bottom: 1px solid currentColor;
	padding-bottom: 3px;
}
.ts-cta a::after {
	content: "→";
	transition: transform 0.2s ease;
}
.ts-cta a:hover::after { transform: translateX(4px); }
.ts-cta + .ts-cta { margin-top: 0.9rem; }

/* Photographs */
.ts-photo { margin: 0; }
.ts-photo img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--radius);
	background: var(--paper-2);
}
.ts-photo.is-portrait img { aspect-ratio: 4 / 5; }
.ts-photo figcaption,
.wp-block-image figcaption {
	margin-top: 12px;
	font-size: var(--fs-xs);
	letter-spacing: 0.02em;
	color: var(--muted);
}
.wp-block-image { margin: 0; }

/* Criteria (ordered list) */
.ts-criteria ol,
.ts-system,
.ts-agenda { margin: 0; padding: 0; list-style: none; counter-reset: ts; }
.ts-criteria li {
	counter-increment: ts;
	position: relative;
	padding: 24px 0 24px 3.4rem;
	border-top: 1px solid var(--rule-strong);
	color: var(--ink-2);
}
.ts-criteria li:last-child { border-bottom: 1px solid var(--rule); }
.ts-criteria li::before {
	content: counter(ts, decimal-leading-zero);
	position: absolute;
	left: 0;
	top: 24px;
	font-size: var(--fs-xs);
	letter-spacing: 0.12em;
	line-height: 2.2;
	color: var(--husk-ink);
}
.ts-criteria li strong { display: block; color: var(--ink); font-weight: 600; font-size: 1.1em; margin-bottom: 0.25rem; }

/* Ledger: what we hold (filled marker) vs what we are testing (open marker) */
.ts-ledger h3 { margin-bottom: 1.2rem; }
.ts-ledger ul { margin: 0; padding: 0; list-style: none; }
.ts-ledger li {
	position: relative;
	padding: 14px 0 14px 28px;
	border-top: 1px solid var(--rule);
	color: var(--ink-2);
}
.ts-ledger li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 1.35em;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--husk-light);
}
.ts-ledger .ts-item:nth-child(2) li::before { background: transparent; border: 1px solid var(--husk-light); }
.ts-section:not(.is-dark) .ts-ledger li::before { background: var(--husk); }
.ts-section:not(.is-dark) .ts-ledger .ts-item:nth-child(2) li::before { background: transparent; border-color: var(--husk); }
.ts-ledger .ts-item { border-top: 0; padding-top: 0; }

/* Stats */
.ts-stats {
	display: grid;
	gap: var(--gap);
	border-top: 1px solid var(--rule-strong);
	padding-top: 28px;
}
@media (min-width: 720px) { .ts-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ts-stat__num {
	font-size: clamp(3.6rem, 2rem + 6vw, 7rem);
	font-weight: 150;
	line-height: 0.9;
	letter-spacing: -0.05em;
	font-variant-numeric: tabular-nums;
}
.ts-stat__label { margin-top: 0.9rem !important; max-width: 22em; font-size: var(--fs-small); color: var(--muted); }

/* System line */
.ts-system { display: grid; gap: 0; position: relative; }
.ts-system li {
	counter-increment: ts;
	position: relative;
	padding: 0 0 28px 40px;
	color: var(--ink-2);
}
.ts-system li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.45em;
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: var(--paper);
	border: 1px solid var(--husk);
	z-index: 1;
}
.ts-section.is-alt .ts-system li::before { background: var(--paper-2); }
.ts-system li::after {
	content: "";
	position: absolute;
	left: 5px;
	top: 0.45em;
	bottom: -0.45em;
	width: 1px;
	background: var(--rule-strong);
}
.ts-system li:last-child::after { display: none; }
.ts-system li strong { display: block; color: var(--ink); font-size: var(--fs-h3); font-weight: 520; margin-bottom: 0.35rem; }
@media (min-width: 1024px) {
	.ts-system { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--gap); }
	.ts-system li { padding: 36px 0 0; }
	.ts-system li::before { top: -5px; }
	.ts-system li::after { display: none; }
	.ts-system::before {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		height: 1px;
		background: var(--rule-strong);
		transform-origin: left center;
	}
}

/* Agenda (numbered questions) */
.ts-agenda { display: grid; gap: 0; max-width: 56rem; }
.ts-agenda li {
	counter-increment: ts;
	position: relative;
	padding: 22px 0 22px 3.4rem;
	border-top: 1px solid var(--rule);
	font-size: var(--fs-lede);
	font-weight: 300;
	line-height: 1.4;
}
.ts-agenda li::before { content: counter(ts, decimal-leading-zero); position: absolute; left: 0; top: 22px; font-size: var(--fs-xs); letter-spacing: 0.12em; line-height: 2.6; color: var(--husk-ink); }
.ts-agenda li strong { font-weight: 560; }

/* Roadmap */
.ts-roadmap { display: grid; gap: var(--gap); }
@media (min-width: 900px) { .ts-roadmap { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ts-phase { padding-top: 22px; border-top: 2px solid var(--ink); color: var(--ink-2); }
.ts-phase + .ts-phase { border-top-color: var(--rule-strong); }
.ts-phase + .ts-phase + .ts-phase { border-top-style: dashed; }
.ts-phase__when { font-size: var(--fs-small); font-weight: 560; letter-spacing: 0.04em; color: var(--husk-ink); margin-bottom: 0.9rem; }
.ts-phase h3 { color: var(--ink); margin-bottom: 0.8rem; }

/* Portrait */
/* The portrait has a white background; multiply blends it into the section
   colour. The figure carries that colour because sticky positioning isolates it. */
.ts-section { --section-bg: var(--paper); }
.ts-section.is-alt { --section-bg: var(--paper-2); }
.ts-portrait { margin: 0; max-width: 300px; background: var(--section-bg, var(--paper)); isolation: isolate; }
.ts-portrait img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	mix-blend-mode: multiply;
	filter: grayscale(1) contrast(1.02);
}
.is-alt .ts-portrait img { mix-blend-mode: multiply; }

/* Pull quote */
.wp-block-quote.ts-pull {
	margin: 1.8rem 0 1.6rem;
	padding: 0 0 0 24px;
	border-left: 2px solid var(--husk);
}
.ts-pull p {
	font-size: clamp(1.35rem, 1.1rem + 1vw, 2rem);
	font-weight: 300;
	line-height: 1.3;
	letter-spacing: -0.012em;
	color: var(--ink);
}
.ts-pull cite {
	display: block;
	margin-top: 1rem;
	font-style: normal;
	font-size: var(--fs-xs);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--muted);
}

.ts-advisors {
	margin-top: 1.6rem !important;
	padding-top: 1.2rem;
	border-top: 1px solid var(--rule);
	font-size: var(--fs-small);
	color: var(--muted);
}
.ts-advisors strong { display: block; color: var(--ink); font-weight: 560; margin-bottom: 4px; }
.is-dark .ts-advisors strong { color: var(--on-dark); }

/* Tags (inline lists) */
.ts-tags,
.ts-facts-inline { display: flex; flex-wrap: wrap; gap: 8px; margin: 1.6rem 0 0; padding: 0; list-style: none; }
.ts-tags li {
	padding: 6px 12px;
	border: 1px solid var(--rule-strong);
	border-radius: var(--radius);
	font-size: var(--fs-small);
	line-height: 1.3;
}
.ts-facts-inline { display: grid; gap: 0; }
.ts-facts-inline li { padding: 10px 0; border-top: 1px solid var(--rule); font-size: var(--fs-small); color: var(--ink-2); }

/* Certainty tags: solid = practice, outline = standard, dashed = research */
.ts-tag {
	display: inline-block;
	justify-self: start;
	margin-bottom: 1.1rem;
	padding: 4px 10px;
	border: 1px solid var(--ink);
	border-radius: var(--radius);
	font-size: 0.72rem;
	font-weight: 560;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	line-height: 1.4;
}
.ts-tag.is-practice,
.ts-tag.is-live { background: var(--ink); color: var(--paper); }
.ts-tag.is-standard { border-color: var(--husk-ink); color: var(--husk-ink); }
.ts-tag.is-research,
.ts-tag.is-dev { border-style: dashed; color: var(--ink-2); border-color: var(--ink-2); }
.ts-legend .ts-item { border-top: 0; padding-top: 0; }
.ts-legend .ts-item > p:not(.ts-tag) { font-size: var(--fs-small); }

/* Principles */
.ts-principles { display: grid; gap: var(--gap-lg) var(--gap); }
@media (min-width: 720px) { .ts-principles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .ts-principles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ts-principle { display: grid; align-content: start; padding-top: 22px; border-top: 1px solid var(--rule-strong); color: var(--ink-2); }
.ts-principle h3 { color: var(--ink); margin-bottom: 0.7rem; }

/* Brand card */
.ts-brandcard { display: grid; gap: var(--gap-lg); align-items: center; }
@media (min-width: 960px) { .ts-brandcard { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); } }
.ts-brandcard h2 { font-size: clamp(2.6rem, 1.4rem + 4.4vw, 5rem); margin-bottom: 1.4rem; }
.ts-brandcard .ts-body { max-width: none; }

.ts-pipeline .ts-item { border: 1px dashed var(--rule-strong); padding: 28px; border-radius: var(--radius); }
.ts-pipeline h3 { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem); font-weight: 300; }

/* Steps (four-up) */
.ts-steps .ts-item h3 { font-size: clamp(1.4rem, 1.15rem + 0.9vw, 1.9rem); font-weight: 300; }

/* Range */
.ts-range { display: grid; gap: 0 var(--gap); }
@media (min-width: 640px) { .ts-range { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .ts-range { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ts-rangeitem { padding: 22px 0 26px; border-top: 1px solid var(--rule-strong); color: var(--ink-2); font-size: var(--fs-small); }
.ts-rangeitem h3 { font-size: 1.15rem; color: var(--ink); margin-bottom: 0.4rem; }

/* Gallery */
.ts-gallery { display: grid; gap: 16px; }
@media (min-width: 760px) {
	.ts-gallery { grid-template-columns: 5fr 7fr; grid-template-rows: auto auto; }
	.ts-gallery > :first-child { grid-row: span 2; }
	.ts-gallery > :first-child img { height: 100%; aspect-ratio: auto; }
}
.ts-section.is-gallery { padding-top: 0; border-top: 0; }

/* Letter */
.ts-letter { display: grid; gap: var(--gap-lg); }
@media (min-width: 960px) {
	.ts-letter { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
	.ts-aside { position: sticky; top: calc(var(--header-h) + 32px); align-self: start; }
}
.ts-aside .ts-portrait { margin-bottom: 1.4rem; max-width: 240px; }
.ts-letter__name { font-size: var(--fs-h3); }
.ts-letter__role { color: var(--muted); margin-top: 0.2rem !important; }
.ts-letter__cv { margin-top: 1.2rem !important; padding-top: 1rem; border-top: 1px solid var(--rule); font-size: var(--fs-small); color: var(--muted); max-width: 20em; }
.ts-letter .ts-body { max-width: 38em; font-size: clamp(1.06rem, 1rem + 0.3vw, 1.2rem); line-height: 1.75; }
.ts-letter .ts-body h2 { margin-bottom: 2rem; color: var(--ink); }
.ts-letter__sign { margin-top: 2rem !important; font-size: 1.6rem; font-weight: 250; color: var(--ink); letter-spacing: -0.01em; }

.ts-mission {
	margin-top: 1.8rem !important;
	padding: 22px 0 0;
	border-top: 2px solid var(--ink);
	font-size: var(--fs-lede);
	font-weight: 300;
	line-height: 1.45;
	color: var(--ink);
}
.ts-mission strong { display: block; font-size: var(--fs-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--husk-ink); margin-bottom: 0.6rem; font-weight: 560; }

/* People */
.ts-people h3 { font-size: clamp(1.8rem, 1.3rem + 1.8vw, 2.8rem); font-weight: 250; letter-spacing: -0.02em; }
.ts-people__role { margin-top: 0.6rem !important; color: var(--muted); }

/* Routes */
.ts-routes h3 { font-size: clamp(1.6rem, 1.25rem + 1.2vw, 2.2rem); font-weight: 300; }
.ts-routes--contact h3 { font-size: 1.3rem; font-weight: 520; }
.ts-routes--contact .ts-item a { font-weight: 520; word-break: break-word; }
.ts-routes--contact .ts-item > p:last-child { margin-top: 1rem; }

/* CTA sections */
.ts-section.is-cta .ts-head { max-width: 52rem; }

/* Problem section: a large opening */
.ts-section.is-problem h2 { max-width: 15ch; }
@media (min-width: 960px) {
	.ts-section.is-problem { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; }
	.ts-section.is-problem .ts-body { padding-bottom: 0.4rem; }
}

/* 9. Components ------------------------------------------------------------ */
.ts-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 48px;
	padding: 12px 24px;
	border: 1px solid var(--ink);
	border-radius: var(--radius);
	background: var(--ink);
	color: var(--paper);
	font: inherit;
	font-size: 0.98rem;
	font-weight: 520;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.ts-button:hover { background: var(--husk-ink); border-color: var(--husk-ink); color: var(--paper); }
.ts-button--outline { background: transparent; color: var(--ink); }
.ts-button--outline:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.ts-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 520;
	text-decoration: none;
	border-bottom: 1px solid currentColor;
	padding-bottom: 2px;
}
.ts-icon { width: 1.1em; height: 1.1em; flex: none; }
.ts-link .ts-icon--arrow { transition: transform 0.2s ease; }
.ts-link:hover .ts-icon--arrow { transform: translateX(4px); }

/* Definition lists (visit, company facts) */
.ts-dl { margin: 0; display: grid; }
.ts-dl > div {
	display: grid;
	gap: 4px 24px;
	padding: 16px 0;
	border-top: 1px solid var(--rule);
}
.ts-dl > div:last-child { border-bottom: 1px solid var(--rule); }
@media (min-width: 640px) { .ts-dl > div { grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); } }
.ts-dl dt { font-size: var(--fs-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); padding-top: 0.25em; }
.ts-dl dd { margin: 0; color: var(--ink); }
.ts-dl .ts-link { margin-top: 6px; }

/* Jobs */
.ts-jobs { margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--rule-strong); }
.ts-jobs__item { border-top: 1px solid var(--rule-strong); }
.ts-jobs__link {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 4px 24px;
	align-items: center;
	padding: 22px 0;
	text-decoration: none;
}
.ts-jobs__team { grid-column: 1; font-size: var(--fs-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--husk-ink); }
.ts-jobs__title { grid-column: 1; font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.75rem); font-weight: 400; letter-spacing: -0.01em; line-height: 1.25; }
.ts-jobs__meta { grid-column: 1; font-size: var(--fs-small); color: var(--muted); }
.ts-jobs__link .ts-icon { grid-column: 2; grid-row: 1 / span 3; width: 28px; height: 28px; transition: transform 0.2s ease; }
.ts-jobs__link:hover { color: var(--ink); }
.ts-jobs__link:hover .ts-jobs__title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
.ts-jobs__link:hover .ts-icon { transform: translateX(6px); }
@media (min-width: 900px) {
	.ts-jobs__link { grid-template-columns: 12rem minmax(0, 1fr) 16rem auto; }
	.ts-jobs__team,
	.ts-jobs__title,
	.ts-jobs__meta { grid-column: auto; }
	.ts-jobs__link .ts-icon { grid-column: auto; grid-row: auto; }
}

/* Job page */
.ts-job__facts { display: flex; flex-wrap: wrap; gap: 8px; margin: 1.6rem 0 2rem; padding: 0; list-style: none; }
.ts-job__facts li { padding: 6px 12px; border: 1px solid var(--rule-strong); border-radius: var(--radius); font-size: var(--fs-small); }
.ts-job__layout {
	display: grid;
	gap: var(--gap-lg);
	padding: clamp(48px, 6vw, 96px) var(--pad-x);
}
@media (min-width: 960px) {
	.ts-job__layout { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
	.ts-job__aside { position: sticky; top: calc(var(--header-h) + 32px); align-self: start; }
}
.ts-job__apply { padding: 28px; background: var(--paper-2); border-radius: var(--radius); }
.ts-job__apply h2 { font-size: 1.4rem; font-weight: 520; margin-bottom: 0.8rem; }
.ts-job__apply p { color: var(--ink-2); font-size: var(--fs-small); }
.ts-job__apply .ts-link { margin-top: 1rem; font-size: 1rem; word-break: break-all; }
.ts-job__more { background: var(--paper-2); padding: var(--sec) var(--pad-x); }
.ts-job__more h2.ts-eyebrow { max-width: none; }

/* Prose (legal pages, job descriptions) */
.ts-prose { color: var(--ink-2); }
.ts-content.ts-prose { padding: 0 var(--pad-x) var(--sec); }
.ts-content.ts-prose > * { max-width: 44rem; }
.ts-prose > * + * { margin-top: 1.1em; }
.ts-prose h2 {
	font-size: clamp(1.4rem, 1.2rem + 0.7vw, 1.85rem);
	font-weight: 450;
	letter-spacing: -0.012em;
	max-width: none;
	color: var(--ink);
	margin-top: 2.4em;
}
.ts-prose h3 { font-size: 1.1rem; font-weight: 560; color: var(--ink); margin-top: 1.8em; }
.ts-prose h2 + *,
.ts-prose h3 + * { margin-top: 0.7em; }
.ts-prose ul,
.ts-prose ol { padding-left: 1.2em; }
.ts-prose li { padding-left: 0.3em; }
.ts-prose li + li { margin-top: 0.55em; }
.ts-prose li::marker { color: var(--husk); }
.ts-prose strong { color: var(--ink); font-weight: 580; }
.ts-prose .ts-lede { color: var(--ink); }
.ts-prose .ts-note { padding: 14px 18px; background: var(--paper-2); border-radius: var(--radius); }
.ts-legal__updated { margin-top: 3em !important; font-size: var(--fs-xs); color: var(--muted); }

/* Form */
.ts-form { max-width: 44rem; }
.ts-form__grid { display: grid; gap: 20px 24px; }
@media (min-width: 640px) { .ts-form__grid { grid-template-columns: 1fr 1fr; } }
.ts-field { display: grid; gap: 8px; margin: 0; }
.ts-field--full { grid-column: 1 / -1; }
.ts-field label { font-size: var(--fs-small); font-weight: 500; }
.ts-field__opt { color: var(--muted); font-weight: 360; }
.ts-field input,
.ts-field select,
.ts-field textarea,
.ts-search input {
	width: 100%;
	min-height: 48px;
	padding: 12px 14px;
	border: 1px solid var(--rule-strong);
	border-radius: var(--radius);
	background: #fffdf9;
	color: var(--ink);
	font: inherit;
	font-size: 1rem;
}
.ts-field textarea { resize: vertical; min-height: 160px; }
.ts-field input:focus,
.ts-field select:focus,
.ts-field textarea:focus,
.ts-search input:focus { outline: 2px solid var(--focus); outline-offset: 1px; border-color: var(--ink); }
.ts-field--check { grid-template-columns: auto 1fr; align-items: start; gap: 12px; }
.ts-field--check input { width: 20px; height: 20px; min-height: 0; margin-top: 3px; accent-color: var(--ink); }
.ts-field--check label { font-weight: 360; color: var(--ink-2); }
.ts-field--hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ts-form__notice { padding: 14px 18px; border-radius: var(--radius); margin-bottom: 20px; font-size: var(--fs-small); }
.ts-form__notice--ok { background: #e3ecdf; color: #22361d; }
.ts-form__notice--error { background: #f6e1d8; color: #5a1f0b; }
.ts-form .ts-button { margin-top: 24px; }
.ts-form__alt { margin-top: 1rem; font-size: var(--fs-small); color: var(--muted); }

.ts-search { display: flex; gap: 10px; max-width: 32rem; margin-top: 2rem; }

/* Lists (index/search) */
.ts-list { padding: 0 var(--pad-x) var(--sec); }
.ts-list__items { margin: 0; padding: 0; list-style: none; max-width: 52rem; }
.ts-list__item a { display: grid; gap: 4px; padding: 22px 0; border-top: 1px solid var(--rule); text-decoration: none; }
.ts-list__type { font-size: var(--fs-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--husk-ink); }
.ts-list__title { font-size: 1.4rem; font-weight: 420; }
.ts-list__excerpt { color: var(--muted); font-size: var(--fs-small); }

/* 404 */
.ts-404 { position: relative; overflow: hidden; min-height: 70vh; }
.ts-404__stone { position: absolute; right: -8vw; top: 4vh; width: min(52vw, 560px); opacity: 0.5; z-index: -1; }
.ts-main--404 { isolation: isolate; }
.ts-404__links { display: flex; flex-wrap: wrap; gap: 14px 28px; margin: 2rem 0 0; padding: 0; list-style: none; }

/* 10. Footer --------------------------------------------------------------- */
.ts-footer {
	border-top: 1px solid rgba(245, 241, 234, 0.1);
	background: var(--charcoal);
	color: var(--on-dark);
	--rule: var(--on-dark-rule);
	--focus: var(--husk-light);
}
.ts-footer a { text-decoration: none; }
.ts-footer a:hover { color: var(--husk-light); }
.ts-footer__inner {
	display: grid;
	gap: var(--gap-lg);
	padding: clamp(64px, 8vw, 120px) var(--pad-x) 32px;
}
@media (min-width: 960px) { .ts-footer__inner { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.ts-footer__statement {
	font-size: clamp(2.2rem, 1.3rem + 3.6vw, 4.4rem);
	font-weight: 200;
	line-height: 1.02;
	letter-spacing: -0.035em;
	max-width: 12ch;
}
.ts-footer__statement strong { font-weight: 680; }
.ts-footer__about { margin-top: 1.8rem !important; max-width: 30em; color: var(--on-dark-2); font-size: var(--fs-small); }
.ts-footer__email { margin-top: 1.2rem !important; }
.ts-footer__email a { font-size: 1.15rem; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.ts-footer__nav { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-content: start; }
.ts-footer__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; align-content: start; }
.ts-footer__list a { display: inline-flex; align-items: center; gap: 6px; color: var(--on-dark-2); font-size: 0.98rem; padding: 2px 0; }
.ts-footer__list .ts-icon { width: 0.9em; height: 0.9em; }
.ts-footer__legal {
	grid-column: 1 / -1;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 12px 32px;
	padding-top: 24px;
	border-top: 1px solid var(--on-dark-rule);
	font-size: var(--fs-xs);
	color: var(--on-dark-muted);
}
.ts-footer__legal-links { display: flex; gap: 20px; margin: 0; padding: 0; list-style: none; }
.ts-footer__legal-links a { color: var(--on-dark-2); }

/* 11. Slomilled colourway (brand page template) ---------------------------- */
.ts-colourway-slomilled {
	--paper: #fff9ee;
	--paper-2: #f3ead9;
	--ink: #0d142b;
	--ink-2: #343a4f;
	--muted: #5d6275;
	--rule: rgba(13, 20, 43, 0.15);
	--rule-strong: rgba(13, 20, 43, 0.55);
	--charcoal: #0d142b;
	--husk: #b07a2a;
	--husk-ink: #8a5a17;
}
.ts-colourway-slomilled .ts-page-header--brand { --sm-navy: #0d142b; }
.ts-colourway-slomilled .ts-header { background: var(--paper); background: color-mix(in srgb, var(--paper) 92%, transparent); }

/* 11b. V1.1 storytelling components ---------------------------------------- */

/* Navy chapter: entering the Slomilled story */
.ts-section.is-navy {
	background: var(--navy);
	color: var(--cream);
	border-top-color: transparent;
	--rule: rgba(255, 249, 238, 0.18);
	--rule-strong: rgba(255, 249, 238, 0.4);
	--muted: #c3c6d2;
	--ink: var(--cream);
	--ink-2: #e4e1d9;
	--husk-ink: var(--husk-light);
	--focus: var(--husk-light);
	--section-bg: var(--navy);
}
.ts-section.is-navy a:hover { color: var(--husk-light); }
.ts-section.is-dark { --section-bg: var(--charcoal); }

/* Belief: one statement, four oversized words */
.ts-section.is-belief { padding-block: clamp(80px, 11vw, 176px); }
.ts-section.is-belief h2 { max-width: 16ch; }
.ts-words { display: grid; gap: clamp(28px, 4vw, 56px); }
@media (min-width: 720px) { .ts-words { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .ts-words { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ts-word h3 {
	font-size: clamp(2.6rem, 1.6rem + 3.2vw, 4.6rem);
	font-weight: 220;
	letter-spacing: -0.035em;
	line-height: 1;
	margin-bottom: 0.9rem;
}
.ts-word p { max-width: 20em; color: var(--ink-2); }

/* Proof: copy + tall photo, then a product strip */
.ts-proof { display: grid; gap: var(--gap-lg); align-items: center; }
@media (min-width: 960px) { .ts-proof { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); } }
.ts-proof-copy h2 { margin: 1.6rem 0 1.4rem; }
.ts-proof-copy .ts-lede { max-width: 30em; }
.ts-proof-media .ts-photo img { aspect-ratio: 4 / 5; }
.ts-section.is-proof { gap: clamp(40px, 5vw, 72px); }

.ts-lockup { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.ts-lockup img { width: 120px; height: auto; }
.ts-lockup p {
	margin: 0;
	padding-left: 18px;
	border-left: 1px solid currentColor;
	font-size: var(--fs-xs);
	font-weight: 520;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	opacity: 0.9;
}
.ts-lockup--header { margin-bottom: clamp(28px, 4vw, 48px); }
.ts-lockup--header .ts-page-header__brand { margin: 0; width: 150px; }

.ts-cta.is-button a {
	padding: 13px 24px;
	border: 1px solid currentColor;
	border-radius: var(--radius);
	background: var(--cream);
	color: var(--navy);
	border-bottom-width: 1px;
}
.ts-section:not(.is-navy) .ts-cta.is-button a { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.ts-cta.is-button a:hover { background: var(--husk-light); color: var(--navy); border-color: var(--husk-light); }

/* Products: real packs, no prices, no buy buttons */
.ts-products { display: grid; gap: clamp(10px, 1.4vw, 18px); margin: 0; padding: 0; list-style: none; }
.ts-products figure { margin: 0; }
.ts-products img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--radius); background: #3a2f27; }
.ts-products--home { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (min-width: 900px) { .ts-products--home { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
/* V1.3: the full shelf of real packs (27): 3-up on phones, 6-up on desktop. */
.ts-products--shelf { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: clamp(18px, 2.4vw, 32px); }
@media (min-width: 720px) { .ts-products--shelf { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .ts-products--shelf { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (max-width: 719px) {
	.ts-products--shelf figcaption { font-size: 0.78rem; }
	.ts-products--shelf figcaption span { font-size: 0.66rem; letter-spacing: 0.08em; }
}
.ts-products figcaption { margin-top: 10px; font-size: var(--fs-small); font-weight: 500; color: var(--ink); line-height: 1.35; }
.ts-products figcaption span { display: block; font-size: var(--fs-xs); font-weight: 520; letter-spacing: 0.12em; text-transform: uppercase; color: var(--husk-ink); margin-bottom: 2px; }

.ts-categories { columns: 1; margin: 0; padding: 0; list-style: none; }
@media (min-width: 720px) { .ts-categories { columns: 2; column-gap: var(--gap); } }
@media (min-width: 1100px) { .ts-categories { columns: 3; } }
.ts-categories li { break-inside: avoid; padding: 10px 0; border-top: 1px solid var(--rule); font-size: var(--fs-small); color: var(--ink-2); }
.ts-categories__label { margin-bottom: 0.8rem !important; font-size: var(--fs-xs); font-weight: 520; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.ts-categories-wrap, .ts-section.is-shelf .ts-categories { margin-top: 0.4rem; }

/* Interlude: a full-bleed photograph and one line */
/* Charcoal base: the overlaid line stays readable even if the photo fails to load. */
.ts-section.is-interlude { padding: 0; gap: 0; border-top: 0; display: block; position: relative; background: var(--charcoal); }
.ts-section.is-interlude .ts-photo { margin: 0; }
.ts-section.is-interlude .ts-photo img {
	width: 100%;
	height: clamp(360px, 72vh, 780px);
	aspect-ratio: auto;
	object-fit: cover;
	border-radius: 0;
}
.ts-section.is-interlude.is-short .ts-photo img { height: clamp(280px, 52vh, 560px); }

/* 0.7.2: background video band. A Cover block with a background video and the class
   ts-video-band: full width, same height as the photo bands, charcoal while it loads,
   with a small pause/play button (added by main.js). */
.wp-block-cover.ts-video-band { min-height: clamp(360px, 72vh, 780px) !important; margin: 0; padding: 0; background: var(--charcoal); overflow: hidden; }
.ts-video-band .wp-block-cover__video-background { object-fit: cover; }
.ts-video-band .wp-block-cover__inner-container:empty,
.ts-video-band .wp-block-cover__inner-container > p:empty { display: none; } /* the Cover block's empty placeholder line */
.ts-video-band + .ts-section { border-top: 0; }
/* 0.7.3: add the class is-uncropped to show the whole video frame: the band takes the video's own
   16:9 shape at full width (no cropping, no side bars), at every screen size. */
.wp-block-cover.ts-video-band.is-uncropped { min-height: 0 !important; aspect-ratio: 16 / 9 !important; }
.ts-video-band.is-uncropped .wp-block-cover__video-background { object-fit: contain; object-position: 50% 50% !important; }
.ts-video-band__toggle {
	position: absolute;
	right: clamp(12px, 2vw, 24px);
	bottom: clamp(12px, 2vw, 24px);
	z-index: 2;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid rgba(245, 241, 234, 0.55);
	border-radius: 50%;
	background: rgba(30, 29, 27, 0.45);
	color: #f5f1ea;
	cursor: pointer;
	transition: background-color 0.2s ease;
}
.ts-video-band__toggle:hover { background: rgba(30, 29, 27, 0.72); }
.ts-video-band__toggle:focus-visible { outline: 2px solid var(--husk-light); outline-offset: 3px; }
.ts-video-band__toggle svg { width: 15px; height: 15px; }

/* 0.7.5: floating "View Catalogue" button (Slomilled Foods page only; printed by
   inc/catalogue-button.php). Bottom-left pill on larger screens, bottom bar on phones.
   main.js shows it between the navy header and the store details. */
.ts-float-cta {
	position: fixed;
	left: clamp(16px, 2vw, 28px);
	bottom: clamp(16px, 2vw, 28px);
	z-index: 60;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 12px 20px 12px 16px;
	border-radius: 999px;
	background: var(--navy);
	color: var(--cream);
	font-size: 0.95rem;
	font-weight: 500;
	letter-spacing: 0.01em;
	text-decoration: none;
	box-shadow: 0 10px 28px rgba(13, 20, 43, 0.28);
	transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s, background-color 0.2s ease;
}
.ts-float-cta svg { width: 18px; height: 18px; flex: none; }
.ts-float-cta:hover { background: #1c2647; color: #fff; }
.ts-float-cta:focus-visible { outline: 2px solid var(--husk-light); outline-offset: 3px; }
.js .ts-float-cta:not(.is-shown) { opacity: 0; visibility: hidden; transform: translateY(14px); pointer-events: none; }
@media (max-width: 759px) {
	.ts-float-cta {
		left: 0;
		right: 0;
		bottom: 0;
		justify-content: flex-start;
		padding: 14px 20px calc(14px + env(safe-area-inset-bottom));
		border-radius: 0;
		box-shadow: 0 -6px 20px rgba(13, 20, 43, 0.18);
	}
}
@media print { .ts-float-cta { display: none !important; } }
.ts-section.is-interlude .wp-element-caption { display: none; }
.ts-section.is-interlude::after {
	content: "";
	position: absolute;
	inset: 40% 0 0 0;
	background: linear-gradient(to bottom, rgba(20, 18, 16, 0), rgba(20, 18, 16, 0.62));
	pointer-events: none;
}
.ts-interlude__line {
	position: absolute;
	z-index: 1;
	left: var(--pad-x);
	right: var(--pad-x);
	bottom: clamp(28px, 6vw, 72px);
	color: var(--on-dark);
	font-size: clamp(2rem, 1.2rem + 3.4vw, 4.4rem);
	font-weight: 220;
	line-height: 1.04;
	letter-spacing: -0.03em;
	max-width: 16ch;
}
.ts-interlude__line strong { font-weight: 680; }

/* Criteria as compact one-liners */
.ts-criteria-compact { margin: 0; padding: 0; list-style: none; counter-reset: ts; }
.ts-criteria-compact li {
	counter-increment: ts;
	position: relative;
	padding: 18px 0 18px 3.2rem;
	border-top: 1px solid var(--rule-strong);
	color: var(--ink-2);
}
.ts-criteria-compact li:last-child { border-bottom: 1px solid var(--rule); }
.ts-criteria-compact li::before { content: counter(ts, decimal-leading-zero); position: absolute; left: 0; top: 18px; font-size: var(--fs-xs); letter-spacing: 0.12em; line-height: 2.1; color: var(--husk-ink); }
.ts-criteria-compact strong { color: var(--ink); font-weight: 600; margin-right: 0.35em; }

/* Science teaser: the honesty tags as the visual device */
.ts-legend-inline { display: flex; flex-wrap: wrap; gap: 12px; }
.ts-legend-inline .ts-tag { margin: 0; font-size: 0.82rem; padding: 8px 14px; }
.is-dark .ts-tag { border-color: var(--on-dark); }
.is-dark .ts-tag.is-practice { background: var(--on-dark); color: var(--charcoal); }
.is-dark .ts-tag.is-standard { border-color: var(--husk-light); color: var(--husk-light); }
.is-dark .ts-tag.is-research { border-color: var(--on-dark-2); color: var(--on-dark-2); }
.ts-section.is-science .ts-ledger { max-width: 64rem; }

/* Closing band: next · person · routes */
.ts-closing { display: grid; gap: var(--gap-lg); align-items: start; }
@media (min-width: 960px) { .ts-closing { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); } }
.ts-closing-next h2 { margin-bottom: 1.2rem; }
.ts-closing-next > p:not(.ts-eyebrow):not(.ts-cta) { max-width: 32em; color: var(--ink-2); }
.ts-closing-person { display: grid; grid-template-columns: 112px 1fr; gap: 24px; align-items: start; }
.ts-closing-person .ts-portrait { max-width: 112px; }
.ts-closing-person .wp-block-quote.ts-pull { margin: 0; }
.ts-closing-person > .ts-note { grid-column: 2; margin-top: 0 !important; max-width: 30em; }
@media (max-width: 520px) { .ts-closing-person > .ts-note { grid-column: 1 / -1; } }
.ts-section.is-closing .ts-routes { padding-top: clamp(24px, 3vw, 40px); border-top: 1px solid var(--rule-strong); }
.ts-section.is-closing .ts-routes .ts-item { border-top: 0; padding-top: 0; }
.ts-section.is-closing .ts-routes h3 { font-size: clamp(1.4rem, 1.15rem + 0.9vw, 1.9rem); }

/* Brand architecture */
.ts-arch { display: grid; justify-items: center; text-align: center; gap: 0; }
.ts-arch__parent { display: grid; justify-items: center; gap: 10px; padding: 28px 36px; border: 1px solid var(--ink); border-radius: var(--radius); background: var(--paper); }
.ts-arch__parent .ts-logo__svg { width: clamp(180px, 22vw, 260px); }
.ts-arch__role { font-size: var(--fs-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.ts-arch__stem { width: 1px; height: 48px; background: var(--rule-strong); }
.ts-arch__brands { display: grid; gap: var(--gap); width: 100%; max-width: 56rem; margin: 0; padding: 32px 0 0; list-style: none; border-top: 1px solid var(--rule-strong); }
@media (min-width: 720px) { .ts-arch__brands { grid-template-columns: 1fr 1fr; } }
.ts-arch__brand { display: grid; justify-items: center; align-content: start; gap: 14px; padding: 28px; border-radius: var(--radius); }
.ts-arch__brand.is-live { background: var(--cream); border: 1px solid rgba(13, 20, 43, 0.25); color: var(--navy); }
.ts-arch__brand.is-live img { width: 132px; height: auto; }
.ts-arch__brand.is-dev { border: 1px dashed var(--rule-strong); }
.ts-arch__brand p { margin: 0; max-width: 24em; font-size: var(--fs-small); color: var(--ink-2); }
.ts-arch__brand .ts-tag { margin: 0; }
.ts-arch__name { font-size: clamp(1.8rem, 1.3rem + 1.6vw, 2.6rem) !important; font-weight: 250; letter-spacing: -0.02em; color: var(--ink) !important; max-width: none !important; }
.ts-arch__note { margin-top: 24px !important; font-size: var(--fs-small); color: var(--muted); }

/* Science summary */
.ts-summary { margin: 0 0 2rem; padding: 0; list-style: none; counter-reset: ts; }
.ts-summary li { counter-increment: ts; position: relative; padding: 14px 0 14px 2.6rem; border-top: 1px solid var(--rule-strong); font-size: var(--fs-lede); font-weight: 300; line-height: 1.4; }
.ts-summary li::before { content: counter(ts); position: absolute; left: 0; top: 14px; font-size: var(--fs-small); font-weight: 600; color: var(--husk-ink); line-height: 2.2; }
.ts-summary strong { font-weight: 600; }
.ts-section.is-summary .ts-body { max-width: none; }

/* 11c. V1.2: the everyday pantry and processing expertise ------------------ */

/* Pantry: nine category tiles */
.ts-pantry { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 22px); margin: 0; padding: 0; list-style: none; }
@media (min-width: 760px) { .ts-pantry { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ts-pantry a { display: grid; gap: 4px; text-decoration: none; color: var(--ink); }
.ts-pantry__media { display: block; overflow: hidden; border-radius: var(--radius); background: var(--paper-2); aspect-ratio: 4 / 3; }
.ts-pantry__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s cubic-bezier(0.2, 0.6, 0.2, 1); }
.ts-pantry a:hover img { transform: scale(1.04); }
.ts-pantry__process { margin-top: 10px; font-size: var(--fs-xs); font-weight: 520; letter-spacing: 0.12em; text-transform: uppercase; color: var(--husk-ink); }
.ts-pantry__name { font-size: clamp(1.02rem, 0.95rem + 0.4vw, 1.3rem); font-weight: 450; line-height: 1.25; }
.ts-pantry a:hover .ts-pantry__name { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
.ts-pantry__tile.is-type .ts-pantry__media { display: flex; align-items: flex-end; padding: clamp(16px, 2vw, 28px); background: var(--charcoal); color: var(--on-dark); }
/* Text-only pantry (product photos switched off). */
.ts-pantry.is-text { gap: 0; border-top: 1px solid var(--rule); }
.ts-pantry.is-text .ts-pantry__tile { border-bottom: 1px solid var(--rule); }
.ts-pantry.is-text a { grid-template-columns: auto 1fr; column-gap: clamp(14px, 1.6vw, 22px); align-items: baseline; height: 100%; padding: clamp(20px, 2.4vw, 34px) clamp(4px, 1vw, 14px) clamp(20px, 2.4vw, 34px) 0; transition: background-color 0.3s ease; }
.ts-pantry.is-text a:hover { background: var(--paper-2); }
.ts-pantry__num { grid-row: span 2; font-size: var(--fs-xs); font-weight: 560; letter-spacing: 0.1em; color: var(--husk-ink); font-variant-numeric: tabular-nums; }
.ts-pantry.is-text .ts-pantry__name { font-size: clamp(1.25rem, 1rem + 0.9vw, 1.8rem); font-weight: 300; letter-spacing: -0.01em; line-height: 1.15; }
.ts-pantry.is-text .ts-pantry__process { margin-top: 6px; grid-column: 2; }
@media (min-width: 760px) {
	.ts-pantry.is-text .ts-pantry__tile:not(:nth-child(3n)) { border-right: 1px solid var(--rule); }
	.ts-pantry.is-text .ts-pantry__tile:not(:nth-child(3n+1)) a { padding-left: clamp(16px, 2vw, 30px); }
}
@media (max-width: 759px) {
	.ts-pantry.is-text { grid-template-columns: 1fr; }
}
.ts-pantry__type {font-size: clamp(1.4rem, 1rem + 1.6vw, 2.4rem); font-weight: 220; line-height: 1.05; letter-spacing: -0.02em; }
.ts-section.is-pantry { padding-top: clamp(48px, 6vw, 96px); }
.ts-section.is-pantry h2 { max-width: 14ch; }

/* A second, large light/bold line inside a section */
.ts-subhead {
	font-size: clamp(1.6rem, 1.1rem + 1.8vw, 2.6rem);
	font-weight: 260;
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--ink);
	padding-top: clamp(24px, 3vw, 40px);
	border-top: 1px solid var(--rule-strong);
}
.ts-subhead strong { font-weight: 640; }

/* Journey strip (Slomilled proof across categories) */
.ts-products--journey { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (min-width: 900px) { .ts-products--journey { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
.ts-products--journey figcaption { margin-top: 8px; font-size: var(--fs-xs); font-weight: 560; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); }
.ts-products--journey li:not(:last-child) figcaption::after { content: " →"; color: var(--husk-light); }

/* Methods: every ingredient has its method */
.ts-methods { display: grid; gap: 0 var(--gap); }
@media (min-width: 760px) { .ts-methods { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .ts-methods { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ts-method { display: grid; align-content: start; padding: 22px 0 30px; border-top: 1px solid var(--rule-strong); color: var(--ink-2); }
.ts-method h3 { font-size: clamp(1.35rem, 1.1rem + 0.9vw, 1.9rem); font-weight: 300; letter-spacing: -0.015em; color: var(--ink); margin-bottom: 0.6rem; }
.ts-method .ts-tag { margin-bottom: 1rem; }
.ts-method__for { margin-top: 0.8rem !important; font-size: var(--fs-xs); letter-spacing: 0.06em; color: var(--muted); }

/* Platform: standards (left) + operating system (right) */
.ts-platform { display: grid; gap: var(--gap-lg); align-items: start; }
@media (min-width: 960px) { .ts-platform { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.ts-platform h3 { font-size: var(--fs-xs); font-weight: 560; letter-spacing: 0.14em; text-transform: uppercase; color: var(--husk-ink); margin-bottom: 1rem; }
.ts-oslist { margin: 0; padding: 0; list-style: none; counter-reset: ts; }
.ts-oslist li { counter-increment: ts; position: relative; padding: 12px 0 12px 2.6rem; border-top: 1px solid var(--rule); color: var(--ink-2); font-size: var(--fs-small); }
.ts-oslist li::before { content: counter(ts); position: absolute; left: 0; top: 12px; width: 1.6rem; height: 1.6rem; border: 1px solid var(--husk); border-radius: 50%; font-size: 0.72rem; line-height: 1.5rem; text-align: center; color: var(--husk-ink); }
.ts-oslist strong { color: var(--ink); font-weight: 600; }

/* Four-label honesty model: Belief · Standard · Practice · Evidence */
.ts-tag.is-belief { background: var(--husk-ink); border-color: var(--husk-ink); color: #fff; }
.ts-tag.is-evidence { border-style: dashed; color: var(--ink-2); border-color: var(--ink-2); }
.ts-tag.is-operate,
.ts-tag.is-develop { background: var(--ink); color: var(--paper); }
.is-dark .ts-tag.is-belief { background: var(--husk-light); border-color: var(--husk-light); color: var(--charcoal); }
.is-dark .ts-tag.is-evidence { border-color: var(--on-dark-2); color: var(--on-dark-2); }
.ts-claim { position: relative; padding-left: 7.4rem; margin-top: 0.7rem !important; min-height: 1.6em; }
.ts-claim::before {
	position: absolute;
	left: 0;
	top: 0.15em;
	width: 6.6rem;
	padding: 2px 0;
	border: 1px solid var(--ink);
	border-radius: var(--radius);
	font-size: 0.66rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-align: center;
	line-height: 1.5;
}
.ts-claim.is-belief::before { content: "Belief"; background: var(--husk-ink); border-color: var(--husk-ink); color: #fff; }
.ts-claim.is-standard::before { content: "Standard"; border-color: var(--husk-ink); color: var(--husk-ink); }
.ts-claim.is-practice::before { content: "Practice"; background: var(--ink); color: var(--paper); }
.ts-claim.is-evidence::before { content: "Evidence"; border-style: dashed; border-color: var(--ink-2); color: var(--ink-2); }
@media (max-width: 520px) {
	.ts-claim { padding-left: 0; padding-top: 1.9rem; }
}
.ts-domains { display: grid; gap: var(--gap-lg) var(--gap); }
@media (min-width: 900px) { .ts-domains { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ts-domain { padding-top: 22px; border-top: 1px solid var(--rule-strong); color: var(--ink-2); }
.ts-domain h3 { font-size: clamp(1.4rem, 1.15rem + 0.9vw, 2rem); font-weight: 300; letter-spacing: -0.015em; color: var(--ink); margin-bottom: 0.4rem; }
.ts-domain-list { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.ts-domain-list li { padding: 8px 14px; border: 1px solid var(--on-dark-rule); border-radius: var(--radius); font-size: var(--fs-small); }
.ts-section:not(.is-dark) .ts-domain-list li { border-color: var(--rule-strong); }

/* 12. Motion --------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
	.js .ts-reveal {
		opacity: 0;
		transform: translateY(18px);
		transition: opacity 0.7s cubic-bezier(0.2, 0.6, 0.2, 1), transform 0.7s cubic-bezier(0.2, 0.6, 0.2, 1);
		transition-delay: var(--ts-delay, 0s);
	}
	.js .ts-reveal.is-in { opacity: 1; transform: none; }

	.ts-hero__stone .ts-millstone__rot { animation: ts-turn 160s linear infinite; }
	.ts-hero__title,
	.ts-hero__eyebrow,
	.ts-hero__text,
	.ts-hero__actions { animation: ts-rise 0.9s cubic-bezier(0.2, 0.6, 0.2, 1) both; }
	.ts-hero__title { animation-delay: 0.08s; }
	.ts-hero__text { animation-delay: 0.2s; }
	.ts-hero__actions { animation-delay: 0.3s; }

	.js .ts-system::before { transform: scaleX(0); transition: transform 1.4s cubic-bezier(0.3, 0.6, 0.2, 1); }
	.js .ts-system.is-in::before { transform: scaleX(1); }
}
@keyframes ts-turn { to { transform: rotate(360deg); } }
/* Hero text only slides; it is never invisible, so it paints immediately (LCP). */
@keyframes ts-rise { from { transform: translateY(14px); } to { transform: none; } }

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* 13. Print ---------------------------------------------------------------- */
@media print {
	.ts-header,
	.ts-footer__nav,
	.ts-hero__art,
	.ts-form,
	.ts-skip { display: none !important; }
	body { background: #fff; }
	.ts-section.is-dark,
	.ts-section.is-alt,
	.ts-footer { background: #fff; color: #000; }
	.js .ts-reveal { opacity: 1 !important; transform: none !important; }
}