/*
Theme Name: JANCO MILL
Theme URI: https://jancomill.com
Author: JANCO MILL
Author URI: https://jancomill.com
Description: Custom WordPress theme for JANCO MILL — a bespoke joinery, interior design and CNC production studio. Project data sheets for specifiers, no page builder required.
Version: 1.3.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: janco-mill
Tags: portfolio, custom-logo, custom-menu, featured-images, translation-ready
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
*/

/* ============================================================
   1 · Tokens

   Every value in this stylesheet comes from this block. If you
   need a size, a colour or a duration that is not here, add it
   here first — that is what keeps the site looking like one
   thing rather than forty decisions.
   ============================================================ */

:root {
	color-scheme: light;

	/* --- Brand grounds. Do not change without redrawing the logo. --- */
	--bg:      #F2EEE8;
	--surface: #E0DAD0;
	--paper:   #FFFFFF;
	--ink:     #28261E;
	--accent:  #7A7060;   /* Warm Oak — devices and rules, not small text */

	/* --- Text tones. Measured against every ground they sit on. ---
	   ink     13.11 : 1 on bg
	   ink-2    8.15 : 1 on bg
	   ink-3    6.17 on bg · 5.13 on surface · 7.13 on paper  */
	--ink-2:   #4A463A;
	--ink-3:   #5F5749;

	/* Deprecated aliases kept so an existing child theme keeps working. */
	--quiet:      var(--ink-3);
	--accent-txt: var(--ink-3);
	--muted:      #B4ACA0;   /* decorative, and text on the dark ground only */

	/* --- Lines. Two kinds, and the difference matters. ---
	   line  is decorative: table rules, section dividers.
	   field is the visible boundary of a control and must clear
	   3 : 1 (WCAG 1.4.11) — 3.29 on bg, 3.80 on paper. */
	--line:    #D4CEC6;
	--border:  var(--line);  /* deprecated alias */
	--field:   #8A8274;

	/* On the dark ground the same two roles, as cream tints. */
	--line-dark:  rgba(242, 238, 232, .22);
	--field-dark: rgba(242, 238, 232, .40);   /* 3.34 : 1 on ink */
	--ink-on-dark:      rgba(242, 238, 232, .92);
	--ink-2-on-dark:    rgba(242, 238, 232, .74);

	/* --- Focus. Two tones so the ring is visible on both grounds. --- */
	--focus:      var(--ink);
	--focus-halo: var(--bg);

	/* --- Type families --- */
	--display: "Chivo", Helvetica, Arial, sans-serif;
	--body:    "DM Sans", Helvetica, Arial, sans-serif;
	--mono:    "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

	/* --- Type scale. Nine fixed steps plus four fluid display steps. --- */
	--t-100: 0.6875rem;   /* 11 — mono micro labels */
	--t-200: 0.75rem;     /* 12 — labels, meta, UI */
	--t-300: 0.875rem;    /* 14 */
	--t-400: 0.9375rem;   /* 15 — secondary copy */
	--t-500: 1rem;        /* 16 — body */
	--t-600: 1.0625rem;   /* 17 — lede */
	--t-700: 1.1875rem;   /* 19 — card title, pull quote */
	--t-800: 1.3125rem;   /* 21 — h3 */
	--t-900: 1.5rem;      /* 24 */

	--d-1: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);    /* 22 – 28 */
	--d-2: clamp(1.625rem, 1.2rem + 1.9vw, 2.5rem);     /* 26 – 40 */
	--d-3: clamp(2.125rem, 1.45rem + 3vw, 3.75rem);     /* 34 – 60 */
	--d-4: clamp(2.375rem, 1rem + 6vw, 5.5rem);         /* 38 – 88 hero */

	/* --- Line heights and tracking --- */
	--lh-tight:  1.08;
	--lh-snug:   1.25;
	--lh-normal: 1.45;
	--lh-loose:  1.65;
	--track-label:   .14em;
	--track-tight:  -.015em;
	--track-display: -.03em;

	/* --- Spacing. 4 px base. --- */
	--s-1:  4px;
	--s-2:  8px;
	--s-3:  12px;
	--s-4:  16px;
	--s-5:  20px;
	--s-6:  24px;
	--s-7:  32px;
	--s-8:  40px;
	--s-9:  48px;
	--s-10: 64px;
	--s-11: 80px;
	--s-12: 96px;

	/* One vertical rhythm for the whole site. Every band uses these. */
	--section:    clamp(56px, 7.5vw, 104px);
	--section-lg: clamp(72px, 10vw, 136px);

	/* --- Layout --- */
	--gut:         var(--s-8);
	--maxw:        1360px;
	--maxw-narrow: 1180px;
	--prose:       66ch;
	--aside:       360px;
	--header-h:    76px;

	/* --- Minimum interactive size (WCAG 2.5.5). --- */
	--tap:    44px;
	--tap-lg: 48px;

	/* --- Shape and motion --- */
	--radius: 0;
	--stroke: 1px;
	--tick:   5px;
	--dur-1:  120ms;
	--dur-2:  200ms;
	--dur-3:  400ms;
	--ease:   cubic-bezier(.2, 0, 0, 1);
}

@media (max-width: 900px) {
	:root {
		--gut: var(--s-5);
		--header-h: 64px;
	}
}

/* Dark bands re-point the ground-dependent tokens once, so every
   component inside them is correct without its own override. */
.jm-hero,
.jm-footer,
.jm-creds {
	--focus:      var(--bg);
	--focus-halo: var(--ink);
	--line:       var(--line-dark);
	--field:      var(--field-dark);
}

/* ============================================================
   2 · Reset and base
   ============================================================ */

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

body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ol, ul {
	margin: 0;
	padding: 0;
}

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

html {
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--header-h) + var(--s-3));
	-webkit-text-size-adjust: 100%;
}

body {
	background: var(--bg);
	color: var(--ink);
	font-family: var(--body);
	font-size: var(--t-500);
	font-weight: 400;
	line-height: var(--lh-loose);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	touch-action: manipulation;
	-webkit-tap-highlight-color: rgba(40, 38, 30, .12);

	/* Short pages — 404, an empty search — must still push the footer down. */
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

.jm-main { flex: 1 0 auto; display: block; }
.jm-footer { flex-shrink: 0; }
.jm-header { flex-shrink: 0; }
.jm-main:focus { outline: none; }

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

a {
	color: var(--ink-3);
	text-decoration: none;
	transition: color var(--dur-1) var(--ease);
}
a:hover { color: var(--ink); }

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible {
	outline: 2px solid var(--focus);
	outline-offset: 2px;
	box-shadow: 0 0 0 4px var(--focus-halo);
	border-radius: var(--radius);
}

strong, b { font-weight: 500; }

h1, h2, h3, h4, h5, h6 {
	font-family: var(--display);
	font-weight: 600;
	line-height: var(--lh-tight);
	letter-spacing: var(--track-tight);
	color: var(--ink);
	text-wrap: balance;
}

/* Numbers that sit in columns should line up. */
.jm-sheet, .jm-steps, .jm-process__steps, .jm-card__meta, .jm-footer__legal {
	font-variant-numeric: tabular-nums;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	white-space: nowrap;
}

.jm-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999;
	background: var(--ink);
	color: var(--bg);
	padding: var(--s-3) var(--s-5);
	font-family: var(--mono);
	font-size: var(--t-200);
}
.jm-skip:focus { left: 0; color: var(--bg); }

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

/* Shared container. Anything that needs the page gutter uses this. */
.jm-wrap {
	max-width: var(--maxw);
	margin-inline: auto;
	padding-inline: var(--gut);
}

.jm-wrap--narrow { max-width: var(--maxw-narrow); }

/* ============================================================
   3 · The dimension rule (kóta) and the logo
   ============================================================ */

.jm-rule {
	display: flex;
	height: var(--tick);
	width: 100%;
	color: inherit;
}

.jm-rule i {
	flex: 0 0 auto;
	width: var(--stroke);
	height: 100%;
	background: currentColor;
}

.jm-rule b {
	flex: 1 1 auto;
	height: var(--stroke);
	background: currentColor;
}

/* Ticks point away from the wordmark. */
.jm-rule--up   { align-items: flex-end; }
.jm-rule--down { align-items: flex-start; }
.jm-rule--up b   { align-self: flex-end; }
.jm-rule--down b { align-self: flex-start; }

.jm-logo-link { display: inline-block; color: var(--ink); }
.jm-logo-link:hover { color: var(--ink); }
.jm-logo-link:hover .jm-rule { color: var(--accent); }

.jm-logo {
	display: inline-flex;
	flex-direction: column;
	align-items: stretch;
	color: inherit;
}

.jm-logo__word {
	font-family: var(--display);
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
	color: currentColor;
}

/* Wordmark: rule / JANCO MILL / rule */
.jm-logo--wordmark { gap: var(--s-1); }
.jm-logo--wordmark .jm-logo__word {
	font-size: var(--t-500);
	letter-spacing: .115em;
	text-indent: .115em;
}

/* Stacked: JANCO / rule / rule / MILL */
.jm-logo--stacked {
	gap: 7px;
	align-items: center;
}
.jm-logo--stacked .jm-logo__rules {
	display: flex;
	flex-direction: column;
	gap: var(--s-1);
	width: 100%;
}
.jm-logo--stacked .jm-logo__word--janco {
	font-size: var(--t-700);
	letter-spacing: .04em;
	text-indent: .04em;
}
.jm-logo--stacked .jm-logo__word--mill {
	font-size: var(--t-700);
	letter-spacing: .285em;
	text-indent: .285em;
}

.jm-logo--image .jm-logo__img { max-height: var(--s-8); width: auto; }

/* Drawn wordmark. One inline SVG, sized by height so it keeps its ratio and
   inherits colour from the link around it. Heights match the typographic
   lockup it replaces, so nothing in the header or footer moves. */
.jm-logo--mark { display: block; }
.jm-logo--mark svg {
	display: block;
	width: auto;
	height: 32px;
}
.jm-logo--mark-stacked svg { height: 64px; }
.jm-logo-link:hover .jm-mark__rule { fill: var(--accent); }
.jm-footer__brand .jm-logo-link:hover .jm-mark__rule { fill: var(--muted); }

/* ============================================================
   4 · Header
   ============================================================ */

.jm-header {
	position: sticky;
	top: 0;
	z-index: 90;
	background: var(--bg);
	border-bottom: 1px solid var(--line);
}

.jm-header__inner {
	max-width: var(--maxw);
	margin-inline: auto;
	padding-inline: var(--gut);
	height: var(--header-h);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-6);
}

.jm-nav {
	display: flex;
	align-items: center;
	gap: var(--s-8);
}

.jm-nav__list {
	display: flex;
	align-items: center;
	gap: var(--s-7);
	margin: 0;
	padding: 0;
	list-style: none;
}

.jm-nav__list a {
	font-family: var(--display);
	font-size: var(--t-200);
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ink-3);
	display: flex;
	align-items: center;
	min-height: var(--tap);
}

.jm-nav__list a:hover,
.jm-nav__list .is-current a { color: var(--ink); }

/* The current page gets the brand rule rather than a colour change alone,
   so it is legible without relying on colour. */
.jm-nav__list .is-current a { box-shadow: inset 0 -1px 0 var(--ink); }

.jm-nav__cta {
	display: flex;
	align-items: center;
	min-height: var(--tap);
	font-family: var(--mono);
	font-size: var(--t-200);
	letter-spacing: .01em;
	color: var(--ink);
	box-shadow: inset 0 -1px 0 var(--field);
	transition: box-shadow var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.jm-nav__cta:hover { box-shadow: inset 0 -1px 0 var(--ink); }

.jm-burger {
	display: none;
	background: none;
	border: 1px solid var(--field);
	padding: var(--s-3);
	cursor: pointer;
	line-height: 0;
	min-width: var(--tap);
	min-height: var(--tap);
	align-items: center;
	justify-content: center;
	color: var(--ink);
}
.jm-burger__box { display: block; width: 20px; }
.jm-burger__box i {
	display: block;
	height: 1px;
	background: currentColor;
	transition: transform var(--dur-2) var(--ease);
}
.jm-burger__box i + i { margin-top: 6px; }
.jm-burger[aria-expanded="true"] .jm-burger__box i:first-child { transform: translateY(3.5px) rotate(45deg); }
.jm-burger[aria-expanded="true"] .jm-burger__box i:last-child  { transform: translateY(-3.5px) rotate(-45deg); }

@media (max-width: 900px) {
	.jm-burger { display: flex; }
	.jm-nav {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		background: var(--bg);
		border-bottom: 1px solid var(--line);
		padding: 0 var(--gut);
		max-height: 0;
		overflow: hidden;
		visibility: hidden;
		overscroll-behavior: contain;
		transition: max-height var(--dur-2) var(--ease), visibility 0s linear var(--dur-2);
	}
	.jm-nav.is-open {
		max-height: 70vh;
		padding: var(--s-2) var(--gut) var(--s-6);
		overflow-y: auto;
		visibility: visible;
		transition: max-height var(--dur-2) var(--ease), visibility 0s;
	}
	.jm-nav__list { flex-direction: column; align-items: stretch; gap: 0; width: 100%; }
	.jm-nav__list li { width: 100%; border-bottom: 1px solid var(--line); }
	.jm-nav__list a { min-height: calc(var(--tap) + var(--s-2)); font-size: var(--t-300); }
	.jm-nav__list .is-current a { box-shadow: none; color: var(--ink); }
	.jm-nav__cta { margin-top: var(--s-4); box-shadow: none; }
}

/* ============================================================
   5 · Shared blocks
   ============================================================ */

/* The eyebrow is a real heading on every section that has one, so a
   screen reader can jump between sections. It only looks like a label. */
.jm-eyebrow {
	font-family: var(--mono);
	font-size: var(--t-100);
	font-weight: 400;
	line-height: var(--lh-normal);
	letter-spacing: var(--track-label);
	text-transform: uppercase;
	color: var(--ink-3);
	margin: 0 0 var(--s-5);
}

h2.jm-eyebrow, h3.jm-eyebrow { font-family: var(--mono); font-weight: 400; }

.jm-section__head {
	max-width: var(--maxw);
	margin-inline: auto;
	padding-inline: var(--gut);
}

.jm-section__head--split {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--s-6);
	flex-wrap: wrap;
}

.jm-link-arrow {
	display: inline-flex;
	align-items: center;
	min-height: var(--tap);
	font-family: var(--mono);
	font-size: var(--t-200);
	letter-spacing: .06em;
	color: var(--ink-3);
	white-space: nowrap;
}
.jm-link-arrow::after {
	content: "→";
	margin-left: .5em;
	transition: transform var(--dur-2) var(--ease);
}
.jm-link-arrow:hover { color: var(--ink); }
.jm-link-arrow:hover::after { transform: translateX(3px); }

.jm-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--tap-lg);
	font-family: var(--display);
	font-size: var(--t-200);
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	padding: var(--s-3) var(--s-7);
	background: var(--ink);
	color: var(--bg);
	border: 1px solid var(--ink);
	border-radius: var(--radius);
	transition: background var(--dur-2) var(--ease), color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
.jm-btn:hover { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.jm-btn:active { background: var(--ink-2); border-color: var(--ink-2); }

.jm-btn--ghost {
	background: transparent;
	color: var(--ink);
	border-color: var(--field);
}
.jm-btn--ghost:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }

.jm-btn--light {
	background: var(--bg);
	color: var(--ink);
	border-color: var(--bg);
}
.jm-btn--light:hover { background: var(--accent); border-color: var(--accent); color: var(--bg); }

/* ============================================================
   6 · Hero
   ============================================================ */

.jm-hero {
	background: var(--ink);
	color: var(--bg);
}

.jm-hero__inner {
	max-width: var(--maxw);
	margin-inline: auto;
	padding: var(--section-lg) var(--gut);
}

.jm-hero__eyebrow {
	font-family: var(--mono);
	font-size: var(--t-100);
	letter-spacing: var(--track-label);
	text-transform: uppercase;
	color: var(--muted);
	margin-bottom: var(--s-6);
}

.jm-hero__title {
	font-family: var(--display);
	font-weight: 700;
	font-size: var(--d-4);
	line-height: 1.02;
	letter-spacing: var(--track-display);
	color: var(--bg);
	max-width: 16ch;
	margin-bottom: var(--s-7);
}

.jm-hero__intro {
	max-width: 52ch;
	font-size: var(--t-600);
	line-height: var(--lh-loose);
	color: var(--ink-2-on-dark);
	margin-bottom: var(--s-8);
}
.jm-hero__intro p { margin: 0 0 var(--s-3); }
.jm-hero__intro p:last-child { margin-bottom: 0; }

.jm-hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.jm-hero__actions .jm-btn { background: var(--bg); color: var(--ink); border-color: var(--bg); }
.jm-hero__actions .jm-btn:hover { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.jm-hero__actions .jm-btn--ghost {
	background: transparent;
	color: var(--ink-on-dark);
	border-color: var(--field-dark);
}
.jm-hero__actions .jm-btn--ghost:hover { background: var(--bg); color: var(--ink); border-color: var(--bg); }

/* ============================================================
   6b · Hero media — the drawing resolving into the finished piece
   ============================================================ */

.jm-hero__grid { display: grid; }

@media (min-width: 900px) {

	.jm-hero__grid {
		max-width: none;
		margin-inline: 0;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
		align-items: stretch;
		gap: clamp(32px, 4vw, 72px);
	}

	/* The text keeps the site container's left gutter; the photograph runs
	   all the way to the right edge of the screen. */
	.jm-hero__grid > .jm-hero__inner {
		max-width: none;
		margin-inline: 0;
		padding-left: max(var(--gut), calc((100vw - var(--maxw)) / 2 + var(--gut)));
		padding-right: 0;
		align-self: center;
	}
}

.jm-hero__media {
	position: relative;
	margin: 0;
	overflow: hidden;
	background: var(--surface);
	aspect-ratio: 3 / 2;
}

@media (min-width: 900px) {
	.jm-hero__media {
		aspect-ratio: auto;
		min-height: clamp(440px, 44vw, 640px);
	}
}

.jm-hero__frame {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: 100%;
	object-fit: cover;
	object-position: 62% 54%;
	display: block;
}

/* The drawing sits on top and is wiped away left to right. */
.jm-hero__frame--drawn {
	animation: jm-hero-wipe 2.4s cubic-bezier(.65, 0, .35, 1) .5s forwards;
}

.jm-hero__edge {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 1px;
	background: linear-gradient(to bottom,
		transparent,
		rgba(40, 38, 30, .55) 10%,
		rgba(40, 38, 30, .55) 90%,
		transparent);
	animation: jm-hero-edge 2.4s cubic-bezier(.65, 0, .35, 1) .5s forwards;
}

@keyframes jm-hero-wipe {
	from { clip-path: inset(0 0 0 0); }
	to   { clip-path: inset(0 0 0 100%); }
}

@keyframes jm-hero-edge {
	from { left: 0;    opacity: 1; }
	90%  {              opacity: 1; }
	to   { left: 100%; opacity: 0; }
}

/* A caption, not a headline — the claim stays on the dark panel where it
   is always legible, whatever the photograph is doing underneath. */
.jm-hero__cap {
	position: absolute;
	left: var(--s-5);
	bottom: var(--s-5);
	margin: 0;
	padding: var(--s-2) var(--s-4);
	font-family: var(--mono);
	font-size: var(--t-100);
	letter-spacing: var(--track-label);
	text-transform: uppercase;
	color: var(--ink);
	background: rgba(242, 238, 232, .88);
	border: 1px solid rgba(40, 38, 30, .10);
}

/* Stacked, a full-height text block above a 3:2 photograph reads as two
   separate bands rather than one hero. Tighten both. */
@media (max-width: 899.98px) {

	.jm-hero__grid > .jm-hero__inner {
		padding-block: var(--section);
	}

	.jm-hero__media {
		aspect-ratio: 16 / 9;
	}
}

@media (prefers-reduced-motion: reduce) {

	.jm-hero__frame--drawn {
		animation: none;
		clip-path: inset(0 0 0 100%);
	}

	.jm-hero__edge { display: none; }
}

/* ============================================================
   7 · Services
   ============================================================ */

.jm-services { padding-top: var(--section); }

.jm-services__grid {
	width: calc(100% - var(--gut) * 2);
	max-width: calc(var(--maxw) - var(--gut) * 2);
	margin: var(--s-7) auto 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1px;
	background: var(--line);
	border-block: 1px solid var(--line);
}

.jm-service {
	background: var(--bg);
	padding: var(--s-8) var(--s-7) var(--s-9);
	transition: background var(--dur-2) var(--ease);
}
.jm-service:hover { background: var(--surface); }

.jm-service__num {
	font-family: var(--mono);
	font-size: var(--t-100);
	letter-spacing: var(--track-label);
	color: var(--ink-3);
	margin-bottom: var(--s-6);
}

.jm-service__title {
	font-size: var(--d-1);
	margin-bottom: var(--s-3);
}

.jm-service__desc {
	font-size: var(--t-400);
	line-height: var(--lh-loose);
	color: var(--ink-2);
	margin-bottom: var(--s-6);
}

.jm-service__tags { display: flex; flex-direction: column; }
.jm-service__tags li {
	font-family: var(--mono);
	font-size: var(--t-200);
	line-height: var(--lh-normal);
	letter-spacing: .02em;
	color: var(--ink-3);
	padding: var(--s-3) 0;
	border-top: 1px solid var(--line);
}
.jm-service__tags li:last-child { border-bottom: 1px solid var(--line); }

@media (max-width: 900px) {
	.jm-services__grid { grid-template-columns: 1fr; }
	.jm-service { padding: var(--s-7) var(--s-5) var(--s-8); }
}

/* ============================================================
   8 · Project grid and cards
   ============================================================ */

.jm-selected { padding-block: var(--section); }
.jm-archive  { padding-block: var(--s-9) var(--section); }
.jm-home .jm-selected { padding-bottom: 0; }

.jm-grid {
	max-width: var(--maxw);
	margin: var(--s-7) auto 0;
	padding-inline: var(--gut);
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--s-9) var(--s-6);
}

@media (max-width: 1100px) { .jm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .jm-grid { grid-template-columns: 1fr; gap: var(--s-8); } }

.jm-card__link { display: block; color: var(--ink); }

.jm-card__media {
	display: block;
	position: relative;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background: var(--surface);
	margin-bottom: var(--s-4);
}
.jm-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--dur-3) var(--ease);
}
.jm-card__link:hover .jm-card__media img { transform: scale(1.03); }

.jm-card__placeholder {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(var(--line) 1px, transparent 1px) 0 0 / 100% 33.33%,
		var(--surface);
	opacity: .6;
}

.jm-card__body { display: block; }

.jm-card__title {
	display: block;
	font-family: var(--display);
	font-weight: 600;
	font-size: var(--t-700);
	line-height: var(--lh-snug);
	letter-spacing: var(--track-tight);
	margin: 0 0 var(--s-1);
	overflow-wrap: anywhere;
}
.jm-card__link:hover .jm-card__title { color: var(--accent); }

.jm-card__meta {
	display: block;
	font-family: var(--mono);
	font-size: var(--t-200);
	line-height: var(--lh-normal);
	letter-spacing: .02em;
	color: var(--ink-3);
}

/* Filter */

.jm-filter {
	max-width: var(--maxw);
	margin-inline: auto;
	padding-inline: var(--gut);
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-2);
}

.jm-filter__item {
	display: inline-flex;
	align-items: center;
	min-height: var(--tap);
	font-family: var(--mono);
	font-size: var(--t-200);
	letter-spacing: .08em;
	text-transform: uppercase;
	padding: 0 var(--s-5);
	border: 1px solid var(--field);
	border-radius: var(--radius);
	color: var(--ink-3);
	transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.jm-filter__item:hover { border-color: var(--ink); color: var(--ink); }
.jm-filter__item.is-current { background: var(--ink); border-color: var(--ink); color: var(--bg); }

/* ============================================================
   9 · Proof, steps, CTA
   ============================================================ */

.jm-proof { padding-top: var(--section); }

.jm-proof__inner {
	max-width: var(--maxw);
	margin-inline: auto;
	padding-inline: var(--gut);
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(var(--s-9), 6vw, var(--s-12));
	align-items: start;
}

.jm-proof__title {
	font-size: var(--d-2);
	margin-bottom: var(--s-5);
	max-width: 20ch;
}

.jm-proof__text {
	font-size: var(--t-500);
	color: var(--ink-2);
	max-width: 56ch;
}

.jm-proof__actions { margin-top: var(--s-7); }

.jm-steps { counter-reset: step; border-top: 1px solid var(--line); }
.jm-steps li {
	counter-increment: step;
	display: flex;
	gap: var(--s-5);
	align-items: baseline;
	padding: var(--s-4) 0;
	border-bottom: 1px solid var(--line);
}
.jm-steps li::before {
	content: counter(step, decimal-leading-zero);
	font-family: var(--mono);
	font-size: var(--t-200);
	color: var(--ink-3);
	flex: 0 0 auto;
}
.jm-steps li span {
	font-family: var(--display);
	font-weight: 600;
	font-size: var(--t-400);
	line-height: var(--lh-snug);
}

@media (max-width: 900px) {
	.jm-proof__inner { grid-template-columns: 1fr; gap: var(--s-8); }
}

/* The closing band. Left-aligned like everything else on the page, with the
   ask on the left and the action on the right — a centred island read as a
   different template dropped into the page. */
.jm-cta {
	margin-top: var(--section);
	background: var(--surface);
	border-top: 1px solid var(--line);
}

.jm-cta__inner {
	max-width: var(--maxw);
	margin-inline: auto;
	padding: var(--section) var(--gut);
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: var(--s-8);
	align-items: end;
}

.jm-cta__title { font-size: var(--d-2); margin-bottom: var(--s-3); max-width: 18ch; }
.jm-cta__text { color: var(--ink-2); max-width: 46ch; margin: 0; }
.jm-cta__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.jm-cta .jm-btn--light { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.jm-cta .jm-btn--light:hover { background: var(--accent); border-color: var(--accent); }

@media (max-width: 900px) {
	.jm-cta__inner { grid-template-columns: 1fr; gap: var(--s-7); align-items: start; }
}

/* ============================================================
   10 · Page heads and prose
   ============================================================ */

.jm-page-head { padding-block: var(--section) var(--s-9); }

.jm-page-head__inner {
	max-width: var(--maxw);
	margin-inline: auto;
	padding-inline: var(--gut);
}

.jm-page-head__title {
	font-size: var(--d-3);
	letter-spacing: var(--track-display);
	margin-bottom: var(--s-5);
	max-width: 18ch;
}

.jm-page-head__text {
	font-size: var(--t-600);
	color: var(--ink-2);
	max-width: 54ch;
}

.jm-page-media {
	max-width: var(--maxw);
	margin-inline: auto;
	margin-bottom: var(--s-10);
	padding-inline: var(--gut);
}

.jm-prose {
	max-width: calc(var(--prose) + var(--gut) * 2);
	margin-inline: auto;
	padding: 0 var(--gut) var(--section);
}

.jm-prose--flush { padding-bottom: 0; max-width: none; padding-inline: 0; }

.jm-prose > * + * { margin-top: var(--s-5); }
.jm-prose h2 { font-size: var(--d-1); margin-top: var(--s-9); }
.jm-prose h3 { font-size: var(--t-800); margin-top: var(--s-8); }
.jm-prose p { color: var(--ink-2); }
.jm-prose ul, .jm-prose ol { padding-left: var(--s-5); color: var(--ink-2); }
.jm-prose li + li { margin-top: var(--s-2); }
.jm-prose img { margin-block: var(--s-7); }
.jm-prose blockquote {
	border-left: 2px solid var(--accent);
	padding: var(--s-1) 0 var(--s-1) var(--s-6);
	font-size: var(--t-700);
	color: var(--ink);
}
.jm-prose a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.jm-prose table { width: 100%; border-collapse: collapse; font-size: var(--t-400); }
.jm-prose th, .jm-prose td { text-align: left; padding: var(--s-3); border-bottom: 1px solid var(--line); }

/* ============================================================
   11 · Single project
   ============================================================ */

.jm-project__hero {
	max-width: var(--maxw);
	margin-inline: auto;
	padding: var(--s-7) var(--gut) 0;
}
.jm-project__hero img {
	display: block;
	width: 100%;
	/* Every hero sits in the same band whatever the source aspect. Without
	   this a 4:3 or portrait upload renders a metre tall and pushes the
	   title off the screen. */
	aspect-ratio: 16 / 9;
	object-fit: cover;
	object-position: center;
}

.jm-project__head { padding-block: var(--s-10) var(--s-8); }

.jm-project__head-inner {
	max-width: var(--maxw);
	margin-inline: auto;
	padding-inline: var(--gut);
}

.jm-project__title {
	font-size: var(--d-3);
	letter-spacing: var(--track-display);
	margin-bottom: var(--s-4);
	max-width: 20ch;
}

.jm-project__standfirst {
	font-size: var(--t-600);
	color: var(--ink-2);
	max-width: 56ch;
}

/* The text column is capped at the measure and the data sheet is flush to the
   right edge, so both align with the page grid and the space between them is
   deliberate. The old grid gave the text column 940 px while the paragraphs
   stopped at 68 ch, which opened a 300 px hole in the middle of the page. */
.jm-project__body {
	max-width: var(--maxw);
	margin-inline: auto;
	padding: 0 var(--gut) var(--section);
	display: grid;
	grid-template-columns: minmax(0, var(--prose)) minmax(0, var(--aside));
	justify-content: space-between;
	gap: var(--s-12);
	align-items: start;
}

.jm-project__content > * + * { margin-top: var(--s-5); }
.jm-project__content p { color: var(--ink-2); max-width: var(--prose); }
.jm-project__content h2 { font-size: var(--d-1); margin-top: var(--s-9); }
.jm-project__content h3 { font-size: var(--t-800); margin-top: var(--s-8); }
.jm-project__content img { margin-block: var(--s-7); }
.jm-project__content ul, .jm-project__content ol { padding-left: var(--s-5); color: var(--ink-2); }

.jm-project__aside {
	position: sticky;
	top: calc(var(--header-h) + var(--s-6));
	border-top: 2px solid var(--ink);
	padding-top: var(--s-5);
}

.jm-aside__heading {
	font-family: var(--mono);
	font-size: var(--t-100);
	font-weight: 500;
	line-height: var(--lh-normal);
	letter-spacing: var(--track-label);
	text-transform: uppercase;
	color: var(--ink-3);
	margin-bottom: var(--s-2);
}

@media (max-width: 1000px) {
	.jm-project__body { grid-template-columns: 1fr; gap: var(--s-9); }
	.jm-project__aside { position: static; }
}

/* Data sheet */

.jm-sheet { display: block; }

.jm-sheet__row {
	display: grid;
	grid-template-columns: 116px minmax(0, 1fr);
	gap: var(--s-4);
	padding: var(--s-3) 0;
	border-bottom: 1px solid var(--line);
}

.jm-sheet dt {
	font-family: var(--mono);
	font-size: var(--t-100);
	line-height: var(--lh-normal);
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--ink-3);
	padding-top: 2px;
}

.jm-sheet dd {
	margin: 0;
	font-size: var(--t-400);
	color: var(--ink);
	line-height: var(--lh-normal);
	overflow-wrap: anywhere;
}

/* A row whose whole value is one link — the e-mail and phone rows on the
   contact page — gets a 44 px target without stretching every other row. */
.jm-sheet dd > a:only-child {
	display: flex;
	align-items: center;
	min-height: var(--tap);
	margin-block: -11px;
}

@media (max-width: 480px) {
	.jm-sheet__row { grid-template-columns: 1fr; gap: var(--s-1); }
}

/* ============================================================
   12 · Contact
   ============================================================ */

.jm-contact {
	max-width: var(--maxw);
	margin-inline: auto;
	padding: var(--section) var(--gut);
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
	justify-content: space-between;
	gap: clamp(var(--s-9), 6vw, var(--s-12));
	align-items: start;
}

.jm-contact__title {
	font-size: var(--d-3);
	letter-spacing: var(--track-display);
	margin-bottom: var(--s-5);
}

.jm-contact__lede {
	font-size: var(--t-600);
	color: var(--ink-2);
	max-width: 46ch;
	margin-bottom: var(--s-8);
}

.jm-contact__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-3);
	margin-top: var(--s-8);
}

/* The information column runs three times the height of the form. Sticking
   the form keeps it beside whatever the reader is on instead of leaving a
   tall empty column. */
.jm-contact__col--form {
	background: var(--paper);
	border: 1px solid var(--line);
	padding: var(--s-8);
	position: sticky;
	top: calc(var(--header-h) + var(--s-6));
}

@media (max-width: 900px) {
	.jm-contact { grid-template-columns: 1fr; gap: var(--s-8); }
	.jm-contact__col--form { padding: var(--s-6); position: static; }
}

/* Generic form styling so contact-form plugins inherit the brand. */

input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
input[type="search"], input[type="number"], input[type="date"], textarea, select {
	width: 100%;
	font-family: var(--body);
	font-size: var(--t-400);
	font-weight: 400;
	color: var(--ink);
	background: var(--bg);
	border: 1px solid var(--field);
	border-radius: var(--radius);
	padding: var(--s-3) var(--s-4);
	min-height: var(--tap-lg);
	transition: border-color var(--dur-1) var(--ease);
}

input:hover, textarea:hover, select:hover { border-color: var(--ink-2); }

select { background-color: var(--bg); color: var(--ink); }

textarea { min-height: 150px; resize: vertical; }

input::placeholder, textarea::placeholder { color: var(--ink-3); opacity: 1; }

input:disabled, textarea:disabled, select:disabled {
	background: var(--surface);
	color: var(--ink-3);
	cursor: not-allowed;
}

input[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--ink); border-width: 2px; }

label {
	display: block;
	font-family: var(--mono);
	font-size: var(--t-100);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ink-3);
	margin-bottom: var(--s-2);
}

input[type="submit"], button[type="submit"], .wpcf7-submit {
	width: auto;
	min-height: var(--tap-lg);
	font-family: var(--display);
	font-size: var(--t-200);
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	padding: var(--s-3) var(--s-7);
	background: var(--ink);
	color: var(--bg);
	border: 1px solid var(--ink);
	border-radius: var(--radius);
	cursor: pointer;
	transition: background var(--dur-2) var(--ease), color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
input[type="submit"]:hover, button[type="submit"]:hover, .wpcf7-submit:hover {
	background: var(--accent);
	border-color: var(--accent);
}

/* ============================================================
   13 · Blog list, pagination, 404, empty
   ============================================================ */

.jm-list {
	max-width: calc(var(--prose) + var(--gut) * 2);
	margin-inline: auto;
	padding-inline: var(--gut);
	border-top: 1px solid var(--line);
}

.jm-list__item { padding-block: var(--s-7); border-bottom: 1px solid var(--line); }
.jm-list__date {
	font-family: var(--mono);
	font-size: var(--t-100);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ink-3);
	margin-bottom: var(--s-2);
}
.jm-list__title { font-size: var(--t-900); margin-bottom: var(--s-2); }
.jm-list__title a { color: var(--ink); }
.jm-list__title a:hover { color: var(--accent); }
.jm-list__excerpt { color: var(--ink-2); font-size: var(--t-400); }

.pagination, .navigation.pagination {
	max-width: var(--maxw);
	margin: var(--s-9) auto 0;
	padding-inline: var(--gut);
}
.nav-links { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--tap);
	min-height: var(--tap);
	padding-inline: var(--s-3);
	font-family: var(--mono);
	font-size: var(--t-200);
	border: 1px solid var(--field);
	border-radius: var(--radius);
	color: var(--ink-3);
}
a.page-numbers:hover { border-color: var(--ink); color: var(--ink); }
.page-numbers.current { background: var(--ink); border-color: var(--ink); color: var(--bg); }

.jm-empty {
	max-width: var(--maxw);
	margin-inline: auto;
	padding: var(--s-10) var(--gut) var(--s-11);
	text-align: center;
	color: var(--ink-2);
}
.jm-empty__hint {
	font-family: var(--mono);
	font-size: var(--t-200);
	line-height: var(--lh-loose);
	color: var(--ink-3);
	background: var(--surface);
	border-left: 2px solid var(--accent);
	padding: var(--s-4) var(--s-5);
	margin-top: var(--s-5);
	text-align: left;
}

.jm-404 {
	max-width: var(--maxw);
	margin-inline: auto;
	padding: var(--section-lg) var(--gut);
	text-align: center;
}
/* Large text still has to clear 3 : 1. The old ghost numeral in --line
   measured 1.35 and was reported as text by every scanner. */
.jm-404__code {
	font-family: var(--display);
	font-weight: 700;
	font-size: clamp(4.5rem, 14vw, 10.625rem);
	line-height: 1;
	color: var(--field);
	letter-spacing: -.04em;
	margin-bottom: var(--s-5);
}
.jm-404__title { font-size: var(--d-2); margin-bottom: var(--s-3); }
.jm-404__text { color: var(--ink-2); margin-bottom: var(--s-8); }
.jm-404__actions { display: flex; gap: var(--s-3); justify-content: center; flex-wrap: wrap; }

.jm-search { display: flex; gap: var(--s-2); }
.jm-search input { flex: 1 1 auto; min-width: 0; }

.jm-404__search,
.jm-empty__search {
	max-width: 380px;
	margin: var(--s-8) auto 0;
}

/* ============================================================
   14 · Footer
   ============================================================ */

.jm-footer {
	background: var(--ink);
	color: var(--bg);
}

.jm-footer__top {
	max-width: var(--maxw);
	margin-inline: auto;
	padding: var(--section) var(--gut) var(--s-9);
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
	gap: var(--s-11);
	align-items: start;
}

.jm-footer__brand .jm-logo-link { color: var(--bg); }
.jm-footer__brand .jm-logo-link:hover { color: var(--bg); }
.jm-footer__brand .jm-logo-link:hover .jm-rule { color: var(--muted); }

.jm-footer__note {
	font-family: var(--mono);
	font-size: var(--t-100);
	line-height: var(--lh-loose);
	letter-spacing: .04em;
	color: var(--muted);
	margin-top: var(--s-6);
	max-width: 34ch;
}

.jm-footer__cols {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--s-7);
}

.jm-footer__heading {
	font-family: var(--mono);
	font-size: var(--t-100);
	font-weight: 500;
	line-height: var(--lh-normal);
	letter-spacing: var(--track-label);
	text-transform: uppercase;
	color: var(--muted);
	margin-bottom: var(--s-3);
}

.jm-footer__list { list-style: none; margin: 0; padding: 0; }
.jm-footer__list li {
	font-size: var(--t-400);
	color: var(--ink-2-on-dark);
	padding-block: var(--s-2);
}
/* 44 px targets. As plain text these rows were 25 px tall. */
.jm-footer__list a {
	display: flex;
	align-items: center;
	min-height: var(--tap);
	margin-block: calc(var(--s-2) * -1);
	color: var(--ink-2-on-dark);
	overflow-wrap: anywhere;
}
.jm-footer__list a:hover { color: var(--bg); }

.jm-footer__legal {
	max-width: var(--maxw);
	margin-inline: auto;
	padding: 0 var(--gut) var(--s-5);
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-1) var(--s-6);
	font-family: var(--mono);
	font-size: var(--t-100);
	line-height: var(--lh-loose);
	letter-spacing: .02em;
	color: var(--muted);
}

.jm-footer__bottom {
	max-width: var(--maxw);
	margin-inline: auto;
	padding: var(--s-5) var(--gut) var(--s-7);
	border-top: 1px solid var(--line-dark);
	display: flex;
	justify-content: space-between;
	gap: var(--s-4);
	flex-wrap: wrap;
	font-family: var(--mono);
	font-size: var(--t-100);
	letter-spacing: .06em;
	color: var(--muted);
}

@media (max-width: 900px) {
	.jm-footer__top { grid-template-columns: 1fr; gap: var(--s-8); }
	.jm-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
	.jm-footer__cols { grid-template-columns: 1fr; gap: var(--s-6); }
}

/* ============================================================
   15 · Credentials, clients, quote, downloads, brief
   ============================================================ */

.jm-creds {
	margin-top: var(--section);
	background: var(--ink);
	color: var(--bg);
}

.jm-creds__inner {
	max-width: var(--maxw);
	margin-inline: auto;
	padding: var(--s-10) var(--gut) var(--s-9);
	display: grid;
	grid-template-columns: 220px minmax(0, 1fr);
	gap: var(--s-6) var(--s-11);
	align-items: start;
}

.jm-creds__label {
	font-family: var(--mono);
	font-size: var(--t-100);
	letter-spacing: var(--track-label);
	text-transform: uppercase;
	color: var(--muted);
	padding-top: var(--s-3);
}

/* Two columns of ruled lines rather than bordered tags. The rules read as a
   schedule on a drawing; the tags read as hashtags. Borders sit on the top of
   each item and the bottom of the list, so an odd number of credentials still
   closes with one continuous line. */
.jm-creds__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: var(--s-11);
	border-bottom: 1px solid var(--line-dark);
}

.jm-creds__list li {
	position: relative;
	font-size: var(--t-300);
	line-height: var(--lh-normal);
	color: var(--ink-on-dark);
	padding: var(--s-3) 0 var(--s-3) var(--s-5);
	border-top: 1px solid var(--line-dark);
	overflow-wrap: anywhere;
}

.jm-creds__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: calc(var(--s-3) + .72em);
	width: 9px;
	height: 1px;
	background: var(--field-dark);
}

.jm-creds__link {
	grid-column: 2;
	justify-self: start;
	display: inline-flex;
	align-items: center;
	min-height: var(--tap);
	font-family: var(--mono);
	font-size: var(--t-200);
	letter-spacing: .04em;
	color: var(--bg);
	box-shadow: inset 0 -1px 0 var(--field-dark);
	margin-top: var(--s-5);
	transition: box-shadow var(--dur-1) var(--ease);
}
.jm-creds__link:hover { color: var(--bg); box-shadow: inset 0 -1px 0 var(--bg); }
.jm-creds__link::after { content: "↓"; margin-left: .5em; }

@media (max-width: 900px) {
	.jm-creds__list { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
	.jm-creds__inner { grid-template-columns: 1fr; gap: var(--s-4); }
	.jm-creds__link { grid-column: 1; }
}

.jm-clients {
	max-width: var(--maxw);
	margin: var(--section) auto 0;
	padding-inline: var(--gut);
}

/* An even set of columns. Rules sit on the top of each item and the bottom of
   the list — an odd number of names still closes cleanly. */
.jm-clients__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	column-gap: var(--s-8);
	border-bottom: 1px solid var(--line);
}

.jm-clients__list li {
	font-family: var(--display);
	font-weight: 600;
	font-size: var(--t-400);
	letter-spacing: -.005em;
	color: var(--ink-2);
	border-top: 1px solid var(--line);
	overflow-wrap: anywhere;
}
.jm-clients__list li,
.jm-clients__list a {
	display: flex;
	align-items: center;
	min-height: var(--tap);
}
.jm-clients__list a { color: var(--ink-2); width: 100%; }
.jm-clients__list a:hover { color: var(--ink); }

/* The quote aligns with the project's text column rather than centring on the
   page — everything else on this template is left-aligned. */
.jm-quote {
	max-width: var(--maxw);
	margin: 0 auto var(--section);
	padding: var(--s-7) var(--gut) 0;
}

.jm-quote__text {
	font-family: var(--display);
	font-weight: 500;
	font-size: var(--d-1);
	line-height: var(--lh-snug);
	letter-spacing: var(--track-tight);
	color: var(--ink);
	max-width: 34ch;
	margin: 0 0 var(--s-3);
	padding-top: var(--s-6);
	border-top: 2px solid var(--ink);
	text-wrap: balance;
}
.jm-quote__text::before { content: "\201C"; }
.jm-quote__text::after  { content: "\201D"; }

.jm-quote__by {
	font-family: var(--mono);
	font-size: var(--t-200);
	letter-spacing: .04em;
	color: var(--ink-3);
}

.jm-downloads { margin-top: var(--s-7); }

.jm-downloads__list { list-style: none; margin: 0; padding: 0; }

.jm-downloads__list li { border-bottom: 1px solid var(--line); }

.jm-downloads__list a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-3);
	min-height: var(--tap);
	font-family: var(--mono);
	font-size: var(--t-200);
	color: var(--ink);
}
.jm-downloads__list a::after { content: "↓"; color: var(--ink-3); }
.jm-downloads__list a:hover { color: var(--accent); }

.jm-aside__cta { margin-top: var(--s-7); }
.jm-aside__cta .jm-btn { display: flex; width: 100%; text-align: center; }

.jm-proof__terms { margin-top: var(--s-7); max-width: 420px; }
.jm-proof__terms .jm-sheet__row:first-child { border-top: 1px solid var(--line); }

.jm-brief { margin-top: var(--s-7); }
.jm-brief__list { list-style: none; margin: 0; padding: 0; }
.jm-brief__list li {
	position: relative;
	padding: var(--s-3) 0 var(--s-3) var(--s-6);
	font-size: var(--t-400);
	line-height: var(--lh-normal);
	color: var(--ink-2);
	border-bottom: 1px solid var(--line);
}
/* The marker sits on the first line's optical centre. It used to be pinned to
   1.15em from the top of the box, which floated it above the text. */
.jm-brief__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: calc(var(--s-3) + (1em * var(--lh-normal)) / 2);
	width: 12px;
	height: 1px;
	background: var(--ink-3);
}
.jm-brief__list li:first-child { border-top: 1px solid var(--line); }

/* ============================================================
   16 · Process page
   ============================================================ */

.jm-process {
	max-width: var(--maxw);
	margin-inline: auto;
	padding: 0 var(--gut) var(--section);
	display: grid;
	grid-template-columns: minmax(0, var(--prose)) minmax(0, var(--aside));
	justify-content: space-between;
	gap: var(--s-12);
	align-items: start;
}

.jm-process__intro { margin-bottom: var(--s-8); }

.jm-process__steps { counter-reset: pstep; border-top: 2px solid var(--ink); }

.jm-process__step {
	counter-increment: pstep;
	display: grid;
	grid-template-columns: 52px minmax(0, 1fr);
	gap: var(--s-5);
	padding-block: var(--s-6);
	border-bottom: 1px solid var(--line);
}
.jm-process__step::before {
	content: counter(pstep, decimal-leading-zero);
	font-family: var(--mono);
	font-size: var(--t-200);
	color: var(--ink-3);
	padding-top: 5px;
}
.jm-process__step h2 { font-size: var(--t-800); margin-bottom: var(--s-2); }
.jm-process__step p { font-size: var(--t-400); line-height: var(--lh-loose); color: var(--ink-2); max-width: 58ch; }

.jm-process__aside { border-top: 2px solid var(--ink); padding-top: var(--s-5); }
.jm-process__aside > * + .jm-aside__heading { margin-top: var(--s-7); }

@media (max-width: 1000px) {
	.jm-process { grid-template-columns: 1fr; gap: var(--s-9); }
}
@media (max-width: 480px) {
	.jm-process__step { grid-template-columns: 1fr; gap: var(--s-1); }
	.jm-process__step::before { padding-top: 0; }
}

/* ============================================================
   17 · Comments and search
   ============================================================ */

.jm-comments {
	max-width: calc(var(--prose) + var(--gut) * 2);
	margin: var(--s-10) auto 0;
	padding: var(--s-7) var(--gut) 0;
	border-top: 1px solid var(--line);
}

.jm-comments__heading {
	font-family: var(--mono);
	font-size: var(--t-100);
	font-weight: 500;
	letter-spacing: var(--track-label);
	text-transform: uppercase;
	color: var(--ink-3);
	margin-bottom: var(--s-5);
}

.jm-comments__list { list-style: none; margin: 0 0 var(--s-7); padding: 0; }
.jm-comments__list .children { list-style: none; margin: 0 0 0 var(--s-6); padding: 0; }
.jm-comments__list li { padding-block: var(--s-4); border-bottom: 1px solid var(--line); }
.jm-comments__list .comment-meta { font-family: var(--mono); font-size: var(--t-100); color: var(--ink-3); margin-bottom: var(--s-2); }
.jm-comments__list .comment-content { font-size: var(--t-400); color: var(--ink-2); }

.comment-form p { margin-bottom: var(--s-4); }
.comment-reply-title { font-size: var(--t-800); margin-bottom: var(--s-3); }

/* ============================================================
   18 · Elementor coexistence
   ============================================================ */

.elementor-page .jm-main > .jm-prose { max-width: none; padding-inline: 0; }