/*
Theme Name:   comakers
Theme URI:    https://www.comakers.ca/
Template:     astra
Author:       comakers
Author URI:   https://www.comakers.ca/
Description:  Astra child theme for comakers — a Canadian makerspace and collaborative fabrication hub. Workshop-industrial but bright: graphite and concrete with a confident safety-orange primary and an electric-blue secondary that colour-codes digital fabrication against hand and heavy-trade work. Archivo and Barlow Condensed shop-drawing headings over Inter body copy, a two-tone "Co / makers" wordmark split on the brand seam, a filterable equipment inventory with availability status pills, membership tier cards, a workshop calendar, a process-led project gallery, a members' directory, and a sparing CSS-only blueprint-grid and exposed-fastener motif.
Version:      1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  comakers
Tags:         makerspace, education, community, orange, two-columns, custom-menu, featured-images, translation-ready, accessibility-ready
*/

/* ==========================================================================
   TABLE OF CONTENTS
   1.  Custom properties (palette, semantic tokens, type, spacing, motion)
   2.  Base & reset refinements
   3.  Typography
   4.  Utility & layout helpers
   5.  Textures — blueprint grid, exposed fasteners, measured rule
   6.  Header & navigation (sticky + shrink, two-tone wordmark)
   7.  Mobile navigation
   8.  Hero (+ stat strip)
   9.  Buttons
   10. Cards (generic)
   11. Equipment inventory — filters, tool cards, status pills
   12. Membership tiers
   13. Workshop / class calendar
   14. Project showcase gallery
   15. Members' directory
   16. Archive & blog layouts
   17. Single post
   18. Widgets & sidebar
   19. Footer
   20. Forms
   21. Scroll reveal & motion
   22. Accessibility & focus
   23. Responsive breakpoints (768px, 1024px)
   24. Reduced motion
   25. Print
   ========================================================================== */

/* ==========================================================================
   1. CUSTOM PROPERTIES
   ========================================================================== */

:root {
	/* --- Core palette --- */
	--cmk-graphite: #22262b;
	--cmk-graphite-deep: #14171a;
	--cmk-graphite-soft: #3a4149;
	--cmk-graphite-mist: #5c666f;
	--cmk-concrete: #e9ecef;
	--cmk-concrete-alt: #dce1e6;
	--cmk-concrete-deep: #ced5db;
	--cmk-orange: #ff6b35;
	--cmk-orange-bright: #ff8256;
	--cmk-orange-dark: #e24e17;
	/* Accessible orange for TEXT on light surfaces. #FF6B35 on #FFF is only
	   ~2.9:1 and fails WCAG AA for anything under 24px — never use the bright
	   orange for small copy. --cmk-orange-ink is ~4.8:1 on white. */
	--cmk-orange-ink: #c2431a;
	--cmk-orange-wash: #fff1eb;
	--cmk-blue: #1b9aaa;
	--cmk-blue-bright: #2fb4c4;
	--cmk-blue-dark: #147a87;
	/* Accessible blue for TEXT on light surfaces (~5.1:1 on white). */
	--cmk-blue-ink: #10646f;
	--cmk-blue-wash: #e6f4f6;
	--cmk-white: #ffffff;
	--cmk-border: #d3d9df;
	--cmk-border-strong: #b9c1c9;
	--cmk-border-hair: rgba(34, 38, 43, 0.12);

	/* --- Semantic tokens --- */
	--cmk-color-bg: var(--cmk-white);
	--cmk-color-bg-alt: var(--cmk-concrete);
	--cmk-color-body: #2b3138;
	--cmk-color-heading: var(--cmk-graphite);
	--cmk-color-muted: var(--cmk-graphite-mist);
	--cmk-color-link: var(--cmk-orange-ink);
	--cmk-color-link-hover: var(--cmk-graphite);
	--cmk-color-accent: var(--cmk-orange);
	--cmk-color-accent-2: var(--cmk-blue);
	--cmk-color-on-dark: #eef1f4;
	--cmk-color-on-dark-muted: rgba(238, 241, 244, 0.72);

	/* --- Availability status tokens (never colour alone — see §11) --- */
	--cmk-status-available: #1c7f47;
	--cmk-status-available-bg: #e6f4ec;
	--cmk-status-in-use: #a4620a;
	--cmk-status-in-use-bg: #fdf2e0;
	--cmk-status-training: var(--cmk-blue-ink);
	--cmk-status-training-bg: var(--cmk-blue-wash);
	--cmk-status-maintenance: #8e2f1a;
	--cmk-status-maintenance-bg: #fbeae5;

	/* --- Tool family accents. Hand / heavy trades = orange, digital fab = blue. --- */
	--cmk-tool-accent: var(--cmk-border-strong);
	--cmk-tool-accent-ink: var(--cmk-graphite);
	--cmk-tool-accent-wash: var(--cmk-concrete);

	/* --- Type families --- */
	--cmk-font-display: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
	--cmk-font-condensed: "Barlow Condensed", "Archivo Narrow", "Arial Narrow", Arial, sans-serif;
	--cmk-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--cmk-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

	/* --- Type scale (fluid above 1.125rem) --- */
	--cmk-fs-2xs: 0.6875rem;   /* 11px — tick labels, fastener captions */
	--cmk-fs-xs: 0.75rem;      /* 12px */
	--cmk-fs-sm: 0.875rem;     /* 14px */
	--cmk-fs-base: 1rem;       /* 16px */
	--cmk-fs-md: 1.125rem;     /* 18px */
	--cmk-fs-lg: clamp(1.25rem, 0.45vw + 1.16rem, 1.375rem);
	--cmk-fs-xl: clamp(1.5rem, 1vw + 1.25rem, 1.75rem);
	--cmk-fs-2xl: clamp(1.875rem, 1.6vw + 1.4rem, 2.25rem);
	--cmk-fs-3xl: clamp(2.25rem, 2.6vw + 1.5rem, 3rem);
	--cmk-fs-4xl: clamp(2.75rem, 4.6vw + 1.2rem, 4.25rem);

	/* --- Line heights & tracking --- */
	--cmk-lh-tight: 1.05;
	--cmk-lh-snug: 1.22;
	--cmk-lh-normal: 1.5;
	--cmk-lh-relaxed: 1.68;
	--cmk-ls-tight: -0.022em;
	--cmk-ls-normal: 0;
	--cmk-ls-wide: 0.06em;
	--cmk-ls-wider: 0.14em;
	--cmk-ls-widest: 0.22em;

	/* --- Weights --- */
	--cmk-fw-regular: 400;
	--cmk-fw-medium: 500;
	--cmk-fw-semibold: 600;
	--cmk-fw-bold: 700;
	--cmk-fw-black: 800;

	/* --- Spacing scale --- */
	--cmk-space-3xs: 0.25rem;
	--cmk-space-2xs: 0.5rem;
	--cmk-space-xs: 0.75rem;
	--cmk-space-sm: 1rem;
	--cmk-space-md: 1.5rem;
	--cmk-space-lg: 2rem;
	--cmk-space-xl: 3rem;
	--cmk-space-2xl: 4.5rem;
	--cmk-space-3xl: 6.5rem;

	/* --- Layout --- */
	--cmk-content-width: 760px;
	--cmk-wide-width: 1240px;
	--cmk-gutter: 1.25rem;

	/* --- Radii --- */
	--cmk-radius-sm: 2px;
	--cmk-radius: 4px;
	--cmk-radius-lg: 8px;
	--cmk-radius-pill: 999px;

	/* --- Shadows (cool graphite, low and crisp) --- */
	--cmk-shadow-sm: 0 1px 2px rgba(20, 23, 26, 0.07);
	--cmk-shadow: 0 4px 14px rgba(20, 23, 26, 0.09);
	--cmk-shadow-lg: 0 18px 44px rgba(20, 23, 26, 0.16);
	--cmk-shadow-orange: 0 10px 26px rgba(255, 107, 53, 0.24);

	/* --- Motion --- */
	--cmk-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--cmk-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--cmk-dur-fast: 150ms;
	--cmk-dur: 260ms;
	--cmk-dur-slow: 600ms;

	/* --- Header heights --- */
	--cmk-header-h: 84px;
	--cmk-header-h-shrunk: 60px;

	/* --- Motif knobs --- */
	--cmk-grid-size: 48px;
	--cmk-fastener-inset: 14px;
	--cmk-fastener-size: 9px;
}

/* ==========================================================================
   2. BASE & RESET REFINEMENTS
   ========================================================================== */

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

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

body {
	background-color: var(--cmk-color-bg);
	color: var(--cmk-color-body);
	font-family: var(--cmk-font-body);
	font-size: var(--cmk-fs-base);
	font-weight: var(--cmk-fw-regular);
	line-height: var(--cmk-lh-relaxed);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
	overflow-x: hidden;
}

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

img {
	display: block;
}

figure {
	margin: 0;
}

hr {
	border: 0;
	border-top: 1px solid var(--cmk-border);
	margin: var(--cmk-space-xl) 0;
}

/* Numeric data (specs, prices, seat counts) should line up in columns. */
.cmk-tool__spec dd,
.cmk-tier__price,
.cmk-class__date,
.cmk-class__seats,
.cmk-stat__value {
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
}

::selection {
	background: var(--cmk-orange);
	color: var(--cmk-white);
}

/* ==========================================================================
   3. TYPOGRAPHY
   ========================================================================== */

h1, h2, h3, h4, h5, h6,
.entry-title,
.widget-title {
	font-family: var(--cmk-font-display);
	color: var(--cmk-color-heading);
	font-weight: var(--cmk-fw-bold);
	line-height: var(--cmk-lh-snug);
	letter-spacing: var(--cmk-ls-tight);
	margin: 0 0 var(--cmk-space-sm);
	text-wrap: balance;
}

h1, .entry-title {
	font-size: var(--cmk-fs-3xl);
	font-weight: var(--cmk-fw-black);
	line-height: var(--cmk-lh-tight);
}

h2 {
	font-size: var(--cmk-fs-2xl);
	font-weight: var(--cmk-fw-bold);
}

h3 {
	font-size: var(--cmk-fs-xl);
}

h4 {
	font-size: var(--cmk-fs-lg);
	letter-spacing: var(--cmk-ls-normal);
}

h5 {
	font-size: var(--cmk-fs-md);
	letter-spacing: var(--cmk-ls-normal);
}

/* h6 reads as a shop-drawing label rather than a heading. */
h6 {
	font-family: var(--cmk-font-condensed);
	font-size: var(--cmk-fs-sm);
	font-weight: var(--cmk-fw-semibold);
	text-transform: uppercase;
	letter-spacing: var(--cmk-ls-wider);
	color: var(--cmk-orange-ink);
}

p {
	margin: 0 0 var(--cmk-space-md);
}

p:last-child {
	margin-bottom: 0;
}

a {
	color: var(--cmk-color-link);
	text-decoration: none;
	text-underline-offset: 0.18em;
	text-decoration-thickness: 1px;
	transition: color var(--cmk-dur-fast) var(--cmk-ease),
		text-decoration-color var(--cmk-dur-fast) var(--cmk-ease);
}

a:hover,
a:focus {
	color: var(--cmk-color-link-hover);
	text-decoration: underline;
}

.entry-content a:not(.cmk-button):not(.wp-block-button__link) {
	text-decoration: underline;
	text-decoration-color: rgba(255, 107, 53, 0.7);
}

.entry-content a:not(.cmk-button):not(.wp-block-button__link):hover {
	text-decoration-color: var(--cmk-graphite);
}

strong, b {
	font-weight: var(--cmk-fw-semibold);
	color: var(--cmk-graphite);
}

em {
	font-style: italic;
}

small {
	font-size: var(--cmk-fs-sm);
	color: var(--cmk-color-muted);
}

abbr[title] {
	text-decoration: underline dotted;
	text-decoration-color: var(--cmk-orange);
	cursor: help;
}

mark {
	background: var(--cmk-orange-wash);
	color: var(--cmk-graphite);
	padding: 0.05em 0.25em;
}

blockquote {
	margin: var(--cmk-space-lg) 0;
	padding: var(--cmk-space-md) var(--cmk-space-lg);
	border-left: 3px solid var(--cmk-orange);
	background: var(--cmk-concrete);
	font-family: var(--cmk-font-display);
	font-size: var(--cmk-fs-lg);
	font-weight: var(--cmk-fw-medium);
	line-height: var(--cmk-lh-snug);
	color: var(--cmk-graphite);
}

blockquote p:last-child {
	margin-bottom: 0;
}

blockquote cite {
	display: block;
	margin-top: var(--cmk-space-xs);
	font-family: var(--cmk-font-condensed);
	font-size: var(--cmk-fs-sm);
	font-style: normal;
	font-weight: var(--cmk-fw-medium);
	text-transform: uppercase;
	letter-spacing: var(--cmk-ls-wider);
	color: var(--cmk-color-muted);
}

code, kbd, pre, samp {
	font-family: var(--cmk-font-mono);
	font-size: 0.9em;
}

code {
	background: var(--cmk-concrete);
	padding: 0.15em 0.4em;
	border-radius: var(--cmk-radius-sm);
	color: var(--cmk-graphite-deep);
}

kbd {
	background: var(--cmk-graphite);
	color: var(--cmk-color-on-dark);
	padding: 0.15em 0.45em;
	border-radius: var(--cmk-radius-sm);
	font-size: 0.8em;
}

pre {
	background: var(--cmk-graphite-deep);
	color: var(--cmk-color-on-dark);
	padding: var(--cmk-space-md);
	border-radius: var(--cmk-radius);
	border-left: 3px solid var(--cmk-blue);
	overflow-x: auto;
	line-height: var(--cmk-lh-normal);
}

pre code {
	background: none;
	color: inherit;
	padding: 0;
}

ul, ol {
	padding-left: 1.35em;
	margin: 0 0 var(--cmk-space-md);
}

li + li {
	margin-top: var(--cmk-space-3xs);
}

.entry-content ul li::marker {
	color: var(--cmk-orange);
}

.entry-content ol li::marker {
	color: var(--cmk-blue-ink);
	font-family: var(--cmk-font-condensed);
	font-weight: var(--cmk-fw-bold);
}

dl {
	margin: 0 0 var(--cmk-space-md);
}

dt {
	font-family: var(--cmk-font-condensed);
	font-size: var(--cmk-fs-sm);
	font-weight: var(--cmk-fw-semibold);
	text-transform: uppercase;
	letter-spacing: var(--cmk-ls-wide);
	color: var(--cmk-color-muted);
}

dd {
	margin: 0 0 var(--cmk-space-2xs);
}

table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--cmk-fs-sm);
	margin-bottom: var(--cmk-space-md);
}

caption {
	font-family: var(--cmk-font-condensed);
	font-size: var(--cmk-fs-sm);
	text-transform: uppercase;
	letter-spacing: var(--cmk-ls-wide);
	color: var(--cmk-color-muted);
	text-align: left;
	padding-bottom: var(--cmk-space-2xs);
}

th, td {
	padding: var(--cmk-space-2xs) var(--cmk-space-xs);
	border-bottom: 1px solid var(--cmk-border);
	text-align: left;
	vertical-align: top;
}

/* Table headers get the Barlow Condensed shop-drawing treatment. */
th {
	font-family: var(--cmk-font-condensed);
	background: var(--cmk-concrete);
	color: var(--cmk-graphite);
	text-transform: uppercase;
	font-size: var(--cmk-fs-sm);
	font-weight: var(--cmk-fw-semibold);
	letter-spacing: var(--cmk-ls-wide);
	border-bottom: 1px solid var(--cmk-border-strong);
}

tbody tr:hover td {
	background: rgba(233, 236, 239, 0.55);
}

/* ==========================================================================
   4. UTILITY & LAYOUT HELPERS
   ========================================================================== */

.ast-container,
.ast-container-fluid,
.site-content .ast-container {
	max-width: var(--cmk-wide-width);
	padding-left: var(--cmk-gutter);
	padding-right: var(--cmk-gutter);
}

.cmk-section {
	padding-block: var(--cmk-space-2xl);
}

.cmk-section__inner {
	max-width: var(--cmk-wide-width);
	margin-inline: auto;
	padding-inline: var(--cmk-gutter);
}

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

.cmk-section--flush {
	padding-block: 0;
}

.cmk-section--concrete {
	background: var(--cmk-concrete);
}

.cmk-section--graphite {
	background: var(--cmk-graphite);
	color: var(--cmk-color-on-dark);
}

.cmk-section--graphite h1,
.cmk-section--graphite h2,
.cmk-section--graphite h3,
.cmk-section--graphite h4,
.cmk-section--graphite h5 {
	color: var(--cmk-white);
}

.cmk-section--graphite a {
	color: var(--cmk-orange-bright);
}

.cmk-section--graphite a:hover {
	color: var(--cmk-white);
}

.cmk-section--graphite .cmk-lede,
.cmk-section--graphite p {
	color: var(--cmk-color-on-dark-muted);
}

/* Hairline rules between stacked sections — crisp, never heavy. */
.cmk-section--ruled {
	border-top: 1px solid var(--cmk-border);
}

.cmk-section--ruled-bottom {
	border-bottom: 1px solid var(--cmk-border);
}

.cmk-eyebrow {
	display: inline-block;
	font-family: var(--cmk-font-condensed);
	font-size: var(--cmk-fs-sm);
	font-weight: var(--cmk-fw-semibold);
	text-transform: uppercase;
	letter-spacing: var(--cmk-ls-widest);
	color: var(--cmk-orange-ink);
	margin-bottom: var(--cmk-space-2xs);
}

.cmk-eyebrow--blue {
	color: var(--cmk-blue-ink);
}

.cmk-section--graphite .cmk-eyebrow {
	color: var(--cmk-orange-bright);
}

/* Eyebrow with a leading tick, like a dimension callout. */
.cmk-eyebrow--ticked::before {
	content: "";
	display: inline-block;
	width: 22px;
	height: 2px;
	margin-right: 0.6em;
	vertical-align: 0.28em;
	background: currentColor;
}

.cmk-section-heading {
	position: relative;
	padding-bottom: var(--cmk-space-sm);
	margin-bottom: var(--cmk-space-lg);
}

.cmk-section-heading::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 72px;
	height: 3px;
	background: linear-gradient(90deg, var(--cmk-orange) 0 66%, var(--cmk-blue) 66% 100%);
}

.cmk-lede {
	font-size: var(--cmk-fs-md);
	line-height: var(--cmk-lh-relaxed);
	color: var(--cmk-color-muted);
	max-width: 62ch;
}

.cmk-grid {
	display: grid;
	gap: var(--cmk-space-md);
	grid-template-columns: 1fr;
}

.cmk-grid--gap-lg {
	gap: var(--cmk-space-lg);
}

.cmk-measure {
	max-width: var(--cmk-content-width);
}

.cmk-center {
	margin-inline: auto;
	text-align: center;
}

.cmk-center .cmk-section-heading::after {
	left: 50%;
	transform: translateX(-50%);
}

.cmk-stack > * + * {
	margin-top: var(--cmk-space-sm);
}

.cmk-cluster {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cmk-space-2xs) var(--cmk-space-xs);
	align-items: center;
}

/* Small monospaced-feel data label, e.g. "SHOP 2 · BAY 04". */
.cmk-tag {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	font-family: var(--cmk-font-condensed);
	font-size: var(--cmk-fs-xs);
	font-weight: var(--cmk-fw-semibold);
	text-transform: uppercase;
	letter-spacing: var(--cmk-ls-wide);
	color: var(--cmk-graphite);
	background: var(--cmk-concrete);
	border: 1px solid var(--cmk-border);
	border-radius: var(--cmk-radius-sm);
	padding: 0.25em 0.55em;
	line-height: 1.3;
}

.cmk-tag--orange {
	color: var(--cmk-orange-ink);
	background: var(--cmk-orange-wash);
	border-color: rgba(255, 107, 53, 0.35);
}

.cmk-tag--blue {
	color: var(--cmk-blue-ink);
	background: var(--cmk-blue-wash);
	border-color: rgba(27, 154, 170, 0.35);
}

.cmk-link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	font-family: var(--cmk-font-condensed);
	font-size: var(--cmk-fs-sm);
	font-weight: var(--cmk-fw-semibold);
	text-transform: uppercase;
	letter-spacing: var(--cmk-ls-wide);
	color: var(--cmk-orange-ink);
	text-decoration: none;
}

.cmk-link-arrow::after {
	content: "\2192";
	transition: transform var(--cmk-dur-fast) var(--cmk-ease);
}

.cmk-link-arrow:hover {
	text-decoration: none;
	color: var(--cmk-graphite);
}

.cmk-link-arrow:hover::after {
	transform: translateX(4px);
}

/* ==========================================================================
   5. TEXTURES — blueprint grid, exposed fasteners, measured rule
   Pure CSS gradients. Used sparingly: one motif per screen, never stacked.
   ========================================================================== */

.cmk-texture-grid {
	position: relative;
	isolation: isolate;
}

/* Blueprint grid: a fine 1px lattice, masked so it fades out and never
   competes with the content sitting on top of it. */
.cmk-texture-grid::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background-image:
		linear-gradient(to right, rgba(34, 38, 43, 0.08) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(34, 38, 43, 0.08) 1px, transparent 1px),
		linear-gradient(to right, rgba(27, 154, 170, 0.12) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(27, 154, 170, 0.12) 1px, transparent 1px);
	background-size:
		var(--cmk-grid-size) var(--cmk-grid-size),
		var(--cmk-grid-size) var(--cmk-grid-size),
		calc(var(--cmk-grid-size) * 5) calc(var(--cmk-grid-size) * 5),
		calc(var(--cmk-grid-size) * 5) calc(var(--cmk-grid-size) * 5);
	mask-image: radial-gradient(ellipse 85% 75% at 50% 25%, #000 15%, transparent 80%);
	-webkit-mask-image: radial-gradient(ellipse 85% 75% at 50% 25%, #000 15%, transparent 80%);
}

/* Grid variant for dark panels — lines lighten instead of darkening. */
.cmk-section--graphite.cmk-texture-grid::before,
.cmk-texture-grid--inverse::before {
	background-image:
		linear-gradient(to right, rgba(255, 255, 255, 0.07) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(255, 255, 255, 0.07) 1px, transparent 1px),
		linear-gradient(to right, rgba(255, 107, 53, 0.22) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(255, 107, 53, 0.22) 1px, transparent 1px);
}

/* Left-anchored grid for hero-style asymmetric layouts. */
.cmk-texture-grid--edge::before {
	mask-image: linear-gradient(100deg, #000 0%, rgba(0, 0, 0, 0.4) 42%, transparent 72%);
	-webkit-mask-image: linear-gradient(100deg, #000 0%, rgba(0, 0, 0, 0.4) 42%, transparent 72%);
}

/* --- Exposed fasteners -----------------------------------------------------
   Four "screw heads" pinned to the corners of a panel. Two pseudo-elements,
   each drawing two radial gradients placed with background-position — so a
   single element carries all four rivets without extra markup or images. */

.cmk-fasteners {
	position: relative;
}

.cmk-fasteners::before,
.cmk-fasteners::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-repeat: no-repeat;
	background-size: var(--cmk-fastener-size) var(--cmk-fastener-size);
}

/* Top pair. A dark ring with a lighter dome and a slotted highlight. */
.cmk-fasteners::before {
	background-image:
		radial-gradient(circle at 50% 42%, #f4f6f8 0 22%, var(--cmk-border-strong) 24% 62%, var(--cmk-graphite-soft) 64% 100%),
		radial-gradient(circle at 50% 42%, #f4f6f8 0 22%, var(--cmk-border-strong) 24% 62%, var(--cmk-graphite-soft) 64% 100%);
	background-position:
		var(--cmk-fastener-inset) var(--cmk-fastener-inset),
		calc(100% - var(--cmk-fastener-inset)) var(--cmk-fastener-inset);
}

/* Bottom pair. */
.cmk-fasteners::after {
	background-image:
		radial-gradient(circle at 50% 42%, #f4f6f8 0 22%, var(--cmk-border-strong) 24% 62%, var(--cmk-graphite-soft) 64% 100%),
		radial-gradient(circle at 50% 42%, #f4f6f8 0 22%, var(--cmk-border-strong) 24% 62%, var(--cmk-graphite-soft) 64% 100%);
	background-position:
		var(--cmk-fastener-inset) calc(100% - var(--cmk-fastener-inset)),
		calc(100% - var(--cmk-fastener-inset)) calc(100% - var(--cmk-fastener-inset));
}

/* Fasteners on a dark panel — brushed steel on graphite. */
.cmk-section--graphite.cmk-fasteners::before,
.cmk-section--graphite.cmk-fasteners::after,
.cmk-fasteners--inverse::before,
.cmk-fasteners--inverse::after {
	background-image:
		radial-gradient(circle at 50% 42%, #8b959e 0 24%, #5c666f 26% 62%, #14171a 64% 100%),
		radial-gradient(circle at 50% 42%, #8b959e 0 24%, #5c666f 26% 62%, #14171a 64% 100%);
}

/* Orange anodised variant for the featured membership tier. */
.cmk-fasteners--orange::before,
.cmk-fasteners--orange::after {
	background-image:
		radial-gradient(circle at 50% 42%, #ffd0be 0 24%, var(--cmk-orange) 26% 62%, var(--cmk-orange-dark) 64% 100%),
		radial-gradient(circle at 50% 42%, #ffd0be 0 24%, var(--cmk-orange) 26% 62%, var(--cmk-orange-dark) 64% 100%);
}

.cmk-fasteners--sm {
	--cmk-fastener-size: 7px;
	--cmk-fastener-inset: 10px;
}

.cmk-fasteners--lg {
	--cmk-fastener-size: 12px;
	--cmk-fastener-inset: 18px;
}

/* --- Measured rule — a ruler / tick scale divider ------------------------- */

.cmk-rule--measured {
	position: relative;
	height: 18px;
	border: 0;
	margin: var(--cmk-space-xl) 0;
	background-image:
		/* major ticks every 80px, full height */
		repeating-linear-gradient(
			to right,
			var(--cmk-graphite-soft) 0 1px,
			transparent 1px 80px
		),
		/* minor ticks every 16px, half height */
		repeating-linear-gradient(
			to right,
			var(--cmk-border-strong) 0 1px,
			transparent 1px 16px
		),
		/* the baseline the ticks hang from */
		linear-gradient(to bottom, var(--cmk-graphite) 0 1px, transparent 1px);
	background-size: 100% 100%, 100% 50%, 100% 1px;
	background-position: 0 0, 0 0, 0 0;
	background-repeat: repeat-x;
}

/* Orange datum mark at the origin of the scale. */
.cmk-rule--measured::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 3px;
	height: 100%;
	background: var(--cmk-orange);
}

.cmk-rule--measured.cmk-rule--centered {
	mask-image: linear-gradient(to right, transparent, #000 22%, #000 78%, transparent);
	-webkit-mask-image: linear-gradient(to right, transparent, #000 22%, #000 78%, transparent);
}

.cmk-section--graphite .cmk-rule--measured {
	background-image:
		repeating-linear-gradient(to right, rgba(255, 255, 255, 0.5) 0 1px, transparent 1px 80px),
		repeating-linear-gradient(to right, rgba(255, 255, 255, 0.24) 0 1px, transparent 1px 16px),
		linear-gradient(to bottom, rgba(255, 255, 255, 0.4) 0 1px, transparent 1px);
}

/* ==========================================================================
   6. HEADER & NAVIGATION — sticky, shrinks on scroll
   ========================================================================== */

.site-header,
.ast-primary-header-bar {
	background: rgba(255, 255, 255, 0.96);
	-webkit-backdrop-filter: saturate(140%) blur(10px);
	backdrop-filter: saturate(140%) blur(10px);
	border-bottom: 1px solid var(--cmk-border);
	transition: box-shadow var(--cmk-dur) var(--cmk-ease),
		background-color var(--cmk-dur) var(--cmk-ease);
}

.site-header {
	position: sticky;
	top: 0;
	z-index: 900;
}

.ast-primary-header-bar,
.site-header .site-branding {
	min-height: var(--cmk-header-h);
	transition: min-height var(--cmk-dur) var(--cmk-ease);
}

/* Shrink state — the body class is toggled by assets/js/theme.js. */
body.cmk-header-shrunk .ast-primary-header-bar,
body.cmk-header-shrunk .site-header .site-branding {
	min-height: var(--cmk-header-h-shrunk);
}

body.cmk-header-shrunk .site-header,
body.cmk-header-shrunk .ast-primary-header-bar {
	box-shadow: var(--cmk-shadow);
	background: rgba(255, 255, 255, 0.985);
}

body.cmk-header-shrunk .site-title,
body.cmk-header-shrunk .site-title a,
body.cmk-header-shrunk .cmk-wordmark {
	font-size: var(--cmk-fs-lg);
}

body.cmk-header-shrunk .site-description {
	display: none;
}

/* --- The two-tone wordmark ------------------------------------------------
   Brand idea: the seam between "Co" and "makers". The canonical markup wraps
   each half in a span so the two halves can differ in BOTH weight and colour:

     <span class="cmk-wordmark"><span class="cmk-wordmark__co">Co</span
       ><span class="cmk-wordmark__makers">makers</span></span>

   Below that, a fallback for the plain Astra `.site-title` (which has no
   spans) splits the colour with a hard-stopped gradient clipped to the text.
   Colour splits cleanly there; weight cannot, so prefer the span markup. */

.cmk-wordmark,
.site-title,
.site-title a {
	font-family: var(--cmk-font-display);
	font-size: var(--cmk-fs-xl);
	line-height: 1;
	letter-spacing: -0.035em;
	margin: 0;
	text-decoration: none;
	transition: font-size var(--cmk-dur) var(--cmk-ease);
}

.cmk-wordmark {
	display: inline-block;
	font-weight: var(--cmk-fw-regular);
	color: var(--cmk-graphite);
	white-space: nowrap;
}

.cmk-wordmark__co {
	font-weight: var(--cmk-fw-black);
	color: var(--cmk-orange);
}

.cmk-wordmark__makers {
	font-weight: var(--cmk-fw-regular);
	color: var(--cmk-graphite);
}

.site-title a:hover .cmk-wordmark__co,
.cmk-wordmark:hover .cmk-wordmark__co {
	color: var(--cmk-orange-dark);
}

.site-title a:hover .cmk-wordmark__makers,
.cmk-wordmark:hover .cmk-wordmark__makers {
	color: var(--cmk-graphite-soft);
}

/* On dark panels the graphite half flips to paper white. */
.cmk-section--graphite .cmk-wordmark__makers,
.site-footer .cmk-wordmark__makers,
.cmk-wordmark--inverse .cmk-wordmark__makers {
	color: var(--cmk-white);
}

/* Larger lockup for the footer / hero. */
.cmk-wordmark--lg {
	font-size: var(--cmk-fs-2xl);
}

/* Fallback: no spans available (plain Astra site title). Graphite at a light
   weight, then a clipped gradient hands the first two characters to orange. */
.site-title,
.site-title a {
	font-weight: var(--cmk-fw-regular);
	color: var(--cmk-graphite);
}

@supports (-webkit-background-clip: text) or (background-clip: text) {
	body.cmk-theme .site-title a:not(:has(.cmk-wordmark)) {
		background-image: linear-gradient(
			90deg,
			var(--cmk-orange) 0 1.92ch,
			var(--cmk-graphite) 1.92ch 100%
		);
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
	}

	body.cmk-theme .site-title a:not(:has(.cmk-wordmark)):hover {
		background-image: linear-gradient(
			90deg,
			var(--cmk-orange-dark) 0 1.92ch,
			var(--cmk-graphite-soft) 1.92ch 100%
		);
	}
}

.site-description {
	font-family: var(--cmk-font-condensed);
	font-size: var(--cmk-fs-sm);
	font-weight: var(--cmk-fw-medium);
	text-transform: uppercase;
	letter-spacing: var(--cmk-ls-wider);
	color: var(--cmk-color-muted);
	margin-top: 0.35em;
}

/* --- Primary navigation — condensed tab treatment ------------------------ */

.main-header-menu,
.ast-nav-menu {
	font-family: var(--cmk-font-condensed);
	font-size: var(--cmk-fs-md);
	font-weight: var(--cmk-fw-medium);
}

.main-header-menu > li > a,
.ast-nav-menu > li > a {
	position: relative;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding-inline: var(--cmk-space-xs);
	color: var(--cmk-graphite);
	font-size: var(--cmk-fs-sm);
	text-transform: uppercase;
	letter-spacing: var(--cmk-ls-wider);
	transition: color var(--cmk-dur-fast) var(--cmk-ease);
}

/* Underline that grows from the left, like a tab being selected. */
.main-header-menu > li > a::after,
.ast-nav-menu > li > a::after {
	content: "";
	position: absolute;
	left: var(--cmk-space-xs);
	right: var(--cmk-space-xs);
	bottom: 0.5em;
	height: 2px;
	background: var(--cmk-orange);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform var(--cmk-dur) var(--cmk-ease);
}

.main-header-menu > li > a:hover::after,
.main-header-menu > li > a:focus::after,
.main-header-menu > li.current-menu-item > a::after,
.main-header-menu > li.current-menu-ancestor > a::after,
.ast-nav-menu > li.current-menu-item > a::after {
	transform: scaleX(1);
}

.main-header-menu > li > a:hover,
.main-header-menu > li.current-menu-item > a,
.main-header-menu > li.current-menu-ancestor > a {
	color: var(--cmk-orange-ink);
	text-decoration: none;
}

/* Dropdowns */
.main-header-menu .sub-menu,
.ast-nav-menu .sub-menu {
	background: var(--cmk-white);
	border: 1px solid var(--cmk-border);
	border-top: 3px solid var(--cmk-orange);
	box-shadow: var(--cmk-shadow);
	border-radius: 0 0 var(--cmk-radius) var(--cmk-radius);
	padding-block: var(--cmk-space-2xs);
	min-width: 240px;
}

.main-header-menu .sub-menu a {
	font-family: var(--cmk-font-body);
	font-size: var(--cmk-fs-sm);
	text-transform: none;
	letter-spacing: 0;
	color: var(--cmk-color-body);
	padding: 0.6em var(--cmk-space-sm);
	min-height: 44px;
}

.main-header-menu .sub-menu a:hover {
	background: var(--cmk-concrete);
	color: var(--cmk-graphite);
	text-decoration: none;
}

.main-header-menu .sub-menu a::after {
	display: none;
}

/* Header CTA pill — "Book a tour". */
.main-header-menu > li.cmk-nav-cta > a,
.ast-header-button-1 .ast-custom-button {
	background: var(--cmk-orange);
	color: var(--cmk-white);
	border-radius: var(--cmk-radius-pill);
	padding: 0.6em 1.35em;
	font-family: var(--cmk-font-condensed);
	font-weight: var(--cmk-fw-bold);
	letter-spacing: var(--cmk-ls-wide);
}

.main-header-menu > li.cmk-nav-cta > a::after {
	display: none;
}

.main-header-menu > li.cmk-nav-cta > a:hover,
.ast-header-button-1 .ast-custom-button:hover {
	background: var(--cmk-graphite);
	color: var(--cmk-white);
}

/* Utility bar above the primary header. */
.cmk-utility-bar {
	background: var(--cmk-graphite);
	color: var(--cmk-color-on-dark-muted);
	font-family: var(--cmk-font-condensed);
	font-size: var(--cmk-fs-sm);
	letter-spacing: var(--cmk-ls-wide);
	text-transform: uppercase;
}

.cmk-utility-bar__inner {
	max-width: var(--cmk-wide-width);
	margin-inline: auto;
	padding: var(--cmk-space-3xs) var(--cmk-gutter);
	display: flex;
	flex-wrap: wrap;
	gap: var(--cmk-space-sm);
	align-items: center;
	justify-content: space-between;
	min-height: 34px;
}

.cmk-utility-bar a {
	color: var(--cmk-color-on-dark);
}

.cmk-utility-bar a:hover {
	color: var(--cmk-orange-bright);
}

/* ==========================================================================
   7. MOBILE NAVIGATION
   ========================================================================== */

.cmk-nav-toggle,
.ast-mobile-menu-trigger-minimal {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	background: transparent;
	border: 1px solid var(--cmk-border-strong);
	border-radius: var(--cmk-radius);
	color: var(--cmk-graphite);
	cursor: pointer;
	transition: background-color var(--cmk-dur-fast) var(--cmk-ease),
		border-color var(--cmk-dur-fast) var(--cmk-ease),
		color var(--cmk-dur-fast) var(--cmk-ease);
}

.cmk-nav-toggle:hover {
	background: var(--cmk-concrete);
	border-color: var(--cmk-orange);
	color: var(--cmk-orange-ink);
	transform: none;
	box-shadow: none;
}

.cmk-nav-toggle__bars {
	position: relative;
	display: block;
	width: 20px;
	height: 2px;
	background: currentColor;
	transition: background-color var(--cmk-dur-fast) var(--cmk-ease);
}

.cmk-nav-toggle__bars::before,
.cmk-nav-toggle__bars::after {
	content: "";
	position: absolute;
	left: 0;
	width: 20px;
	height: 2px;
	background: currentColor;
	transition: transform var(--cmk-dur) var(--cmk-ease),
		top var(--cmk-dur) var(--cmk-ease);
}

.cmk-nav-toggle__bars::before { top: -6px; }
.cmk-nav-toggle__bars::after  { top: 6px; }

.cmk-nav-toggle[aria-expanded="true"] .cmk-nav-toggle__bars {
	background: transparent;
}

.cmk-nav-toggle[aria-expanded="true"] .cmk-nav-toggle__bars::before {
	top: 0;
	transform: rotate(45deg);
}

.cmk-nav-toggle[aria-expanded="true"] .cmk-nav-toggle__bars::after {
	top: 0;
	transform: rotate(-45deg);
}

/* Panel revealed by the toggle. `hidden` is managed in JS so it also leaves
   the accessibility tree; the class only drives the animation. */
.cmk-mobile-nav {
	display: none;
	border-top: 1px solid var(--cmk-border);
	background: var(--cmk-white);
}

.cmk-mobile-nav[hidden] {
	display: none !important;
}

.cmk-mobile-nav.is-open,
.ast-mobile-header-content.is-open {
	display: block;
	animation: cmk-slide-down var(--cmk-dur) var(--cmk-ease) both;
}

.cmk-mobile-nav ul {
	list-style: none;
	margin: 0;
	padding: var(--cmk-space-2xs) 0 var(--cmk-space-md);
}

.cmk-mobile-nav li + li {
	margin-top: 0;
	border-top: 1px solid var(--cmk-concrete-alt);
}

.cmk-mobile-nav a {
	display: block;
	padding: 0.9em var(--cmk-gutter);
	min-height: 44px;
	font-family: var(--cmk-font-condensed);
	font-size: var(--cmk-fs-md);
	text-transform: uppercase;
	letter-spacing: var(--cmk-ls-wide);
	color: var(--cmk-graphite);
}

.cmk-mobile-nav a:hover {
	background: var(--cmk-concrete);
	color: var(--cmk-orange-ink);
	text-decoration: none;
}

.cmk-mobile-nav .cmk-nav-cta a,
.cmk-mobile-nav__cta {
	margin: var(--cmk-space-sm) var(--cmk-gutter) 0;
	background: var(--cmk-orange);
	color: var(--cmk-white);
	border-radius: var(--cmk-radius-pill);
	text-align: center;
	font-weight: var(--cmk-fw-bold);
}

.cmk-mobile-nav .cmk-nav-cta a:hover,
.cmk-mobile-nav__cta:hover {
	background: var(--cmk-graphite);
	color: var(--cmk-white);
}

/* Lock scroll behind the open panel. */
body.cmk-nav-open {
	overflow: hidden;
}

@keyframes cmk-slide-down {
	from { opacity: 0; transform: translateY(-8px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   8. HERO
   ========================================================================== */

.cmk-hero {
	position: relative;
	padding-block: var(--cmk-space-2xl);
	background: linear-gradient(180deg, var(--cmk-white) 0%, var(--cmk-concrete) 100%);
	color: var(--cmk-color-body);
	overflow: hidden;
	isolation: isolate;
	border-bottom: 1px solid var(--cmk-border);
}

/* Bright workshop light, not a grim shop floor: a warm orange wash top-left
   and a cool blue wash bottom-right, both very low opacity. */
.cmk-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -2;
	pointer-events: none;
	background:
		radial-gradient(ellipse 70% 60% at 8% 0%, rgba(255, 107, 53, 0.16) 0%, transparent 65%),
		radial-gradient(ellipse 60% 70% at 98% 100%, rgba(27, 154, 170, 0.14) 0%, transparent 62%);
}

.cmk-hero__inner {
	position: relative;
	max-width: var(--cmk-wide-width);
	margin-inline: auto;
	padding-inline: var(--cmk-gutter);
}

.cmk-hero__eyebrow {
	font-family: var(--cmk-font-condensed);
	font-size: var(--cmk-fs-md);
	font-weight: var(--cmk-fw-semibold);
	text-transform: uppercase;
	letter-spacing: var(--cmk-ls-widest);
	color: var(--cmk-orange-ink);
	margin-bottom: var(--cmk-space-sm);
}

.cmk-hero__title,
.cmk-hero h1 {
	font-family: var(--cmk-font-display);
	font-size: var(--cmk-fs-4xl);
	font-weight: var(--cmk-fw-black);
	line-height: 0.96;
	letter-spacing: -0.038em;
	color: var(--cmk-graphite);
	margin-bottom: var(--cmk-space-md);
	max-width: 20ch;
}

.cmk-hero__title em {
	font-style: normal;
	color: var(--cmk-orange-ink);
}

/* The signature orange rule under the hero headline. */
.cmk-hero__rule {
	width: 120px;
	height: 4px;
	border: 0;
	margin: 0 0 var(--cmk-space-md);
	background: linear-gradient(90deg, var(--cmk-orange) 0 70%, var(--cmk-blue) 70% 100%);
}

.cmk-hero__deck {
	font-size: var(--cmk-fs-md);
	line-height: var(--cmk-lh-relaxed);
	color: var(--cmk-graphite-soft);
	max-width: 52ch;
	margin-bottom: var(--cmk-space-lg);
}

.cmk-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cmk-space-sm);
	align-items: center;
}

.cmk-hero__aside {
	margin-top: var(--cmk-space-xl);
}

/* --- Stat strip ---------------------------------------------------------- */

.cmk-stats {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1px;
	margin-top: var(--cmk-space-xl);
	background: var(--cmk-border);
	border: 1px solid var(--cmk-border);
}

.cmk-stat {
	background: var(--cmk-white);
	padding: var(--cmk-space-md) var(--cmk-space-sm);
}

.cmk-stat__value {
	display: block;
	font-family: var(--cmk-font-display);
	font-size: var(--cmk-fs-2xl);
	font-weight: var(--cmk-fw-black);
	line-height: 1;
	letter-spacing: -0.03em;
	color: var(--cmk-graphite);
}

.cmk-stat__value em {
	font-style: normal;
	color: var(--cmk-orange);
}

.cmk-stat__label {
	display: block;
	margin-top: var(--cmk-space-3xs);
	font-family: var(--cmk-font-condensed);
	font-size: var(--cmk-fs-sm);
	font-weight: var(--cmk-fw-medium);
	text-transform: uppercase;
	letter-spacing: var(--cmk-ls-wide);
	color: var(--cmk-color-muted);
}

.cmk-stats--graphite {
	background: rgba(255, 255, 255, 0.14);
	border-color: rgba(255, 255, 255, 0.14);
}

.cmk-stats--graphite .cmk-stat {
	background: var(--cmk-graphite);
}

.cmk-stats--graphite .cmk-stat__value {
	color: var(--cmk-white);
}

.cmk-stats--graphite .cmk-stat__label {
	color: var(--cmk-color-on-dark-muted);
}

/* Interior page hero / archive header. */
.cmk-page-hero,
.ast-archive-description {
	background: var(--cmk-concrete);
	border-bottom: 1px solid var(--cmk-border);
	padding-block: var(--cmk-space-xl);
	margin-bottom: var(--cmk-space-xl);
}

.ast-archive-description .ast-archive-title,
.cmk-page-hero h1 {
	font-size: var(--cmk-fs-2xl);
	color: var(--cmk-graphite);
}

.cmk-page-hero p {
	color: var(--cmk-graphite-soft);
	max-width: 62ch;
}

/* ==========================================================================
   9. BUTTONS
   ========================================================================== */

.cmk-button,
.wp-block-button__link,
.ast-button,
button,
input[type="submit"],
input[type="button"],
input[type="reset"],
.ast-custom-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--cmk-space-2xs);
	font-family: var(--cmk-font-condensed);
	font-size: var(--cmk-fs-md);
	font-weight: var(--cmk-fw-bold);
	text-transform: uppercase;
	letter-spacing: var(--cmk-ls-wide);
	line-height: 1.2;
	padding: 0.7em 1.5em;
	min-height: 44px;
	border: 2px solid transparent;
	border-radius: var(--cmk-radius);
	background: var(--cmk-graphite);
	color: var(--cmk-white);
	cursor: pointer;
	text-decoration: none;
	transition: background-color var(--cmk-dur-fast) var(--cmk-ease),
		color var(--cmk-dur-fast) var(--cmk-ease),
		border-color var(--cmk-dur-fast) var(--cmk-ease),
		transform var(--cmk-dur-fast) var(--cmk-ease),
		box-shadow var(--cmk-dur-fast) var(--cmk-ease);
}

.cmk-button:hover,
.wp-block-button__link:hover,
.ast-button:hover,
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
.ast-custom-button:hover {
	background: var(--cmk-graphite-deep);
	color: var(--cmk-white);
	text-decoration: none;
	transform: translateY(-2px);
	box-shadow: var(--cmk-shadow);
}

.cmk-button:active,
.wp-block-button__link:active,
button:active,
input[type="submit"]:active {
	transform: translateY(0);
	box-shadow: none;
}

/* Primary — safety orange. The default CTA everywhere. */
.cmk-button--primary,
.wp-block-button.is-style-fill .wp-block-button__link {
	background: var(--cmk-orange);
	color: var(--cmk-white);
}

.cmk-button--primary:hover,
.wp-block-button.is-style-fill .wp-block-button__link:hover {
	background: var(--cmk-orange-dark);
	color: var(--cmk-white);
	box-shadow: var(--cmk-shadow-orange);
}

/* Secondary — electric blue, used for digital-fab actions. */
.cmk-button--secondary {
	background: var(--cmk-blue);
	color: var(--cmk-white);
}

.cmk-button--secondary:hover {
	background: var(--cmk-blue-dark);
	color: var(--cmk-white);
}

/* Ghost — hairline outline. Works on concrete and on graphite. */
.cmk-button--ghost,
.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--cmk-graphite);
	border-color: var(--cmk-border-strong);
}

.cmk-button--ghost:hover,
.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--cmk-graphite);
	color: var(--cmk-white);
	border-color: var(--cmk-graphite);
	box-shadow: var(--cmk-shadow);
}

.cmk-section--graphite .cmk-button--ghost,
.site-footer .cmk-button--ghost {
	color: var(--cmk-white);
	border-color: rgba(255, 255, 255, 0.5);
}

.cmk-section--graphite .cmk-button--ghost:hover,
.site-footer .cmk-button--ghost:hover {
	background: var(--cmk-white);
	color: var(--cmk-graphite);
	border-color: var(--cmk-white);
}

/* Sizes */
.cmk-button--sm {
	font-size: var(--cmk-fs-sm);
	padding: 0.45em 1em;
	min-height: 36px;
}

.cmk-button--lg {
	font-size: var(--cmk-fs-lg);
	padding: 0.8em 1.9em;
	min-height: 52px;
}

.cmk-button--block {
	width: 100%;
}

/* Disabled / busy */
.cmk-button[disabled],
.cmk-button.is-disabled,
button[disabled],
input[type="submit"][disabled] {
	background: var(--cmk-concrete-alt);
	color: var(--cmk-graphite-mist);
	border-color: transparent;
	cursor: not-allowed;
	box-shadow: none;
	transform: none;
	opacity: 1;
}

.cmk-button[disabled]:hover,
.cmk-button.is-disabled:hover,
button[disabled]:hover {
	background: var(--cmk-concrete-alt);
	color: var(--cmk-graphite-mist);
	transform: none;
	box-shadow: none;
}

/* Astra block button container fixes. */
.wp-block-buttons {
	gap: var(--cmk-space-sm);
}

.wp-block-button__link {
	border-radius: var(--cmk-radius);
}

/* ==========================================================================
   10. CARDS (generic)
   ========================================================================== */

.cmk-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--cmk-white);
	border: 1px solid var(--cmk-border);
	border-radius: var(--cmk-radius);
	overflow: hidden;
	transition: border-color var(--cmk-dur) var(--cmk-ease),
		box-shadow var(--cmk-dur) var(--cmk-ease),
		transform var(--cmk-dur) var(--cmk-ease);
}

.cmk-card:hover {
	border-color: var(--cmk-border-strong);
	box-shadow: var(--cmk-shadow);
	transform: translateY(-3px);
}

.cmk-card__media {
	position: relative;
	overflow: hidden;
	background: var(--cmk-concrete);
	aspect-ratio: 4 / 3;
}

.cmk-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cmk-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--cmk-space-2xs);
	padding: var(--cmk-space-md);
	flex: 1 1 auto;
}

.cmk-card__title {
	font-size: var(--cmk-fs-lg);
	margin: 0;
}

.cmk-card__title a {
	color: inherit;
	text-decoration: none;
}

.cmk-card__title a:hover {
	color: var(--cmk-orange-ink);
}

.cmk-card__excerpt {
	color: var(--cmk-graphite-soft);
	font-size: var(--cmk-fs-sm);
	margin: 0;
}

.cmk-card__footer {
	margin-top: auto;
	padding: var(--cmk-space-sm) var(--cmk-space-md);
	border-top: 1px solid var(--cmk-border);
	display: flex;
	flex-wrap: wrap;
	gap: var(--cmk-space-2xs) var(--cmk-space-sm);
	align-items: center;
	justify-content: space-between;
	background: rgba(233, 236, 239, 0.4);
}

/* A card whose top edge carries the accent colour. */
.cmk-card--capped::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 3px;
	background: var(--cmk-orange);
}

.cmk-card--flat:hover {
	transform: none;
	box-shadow: none;
}

/* ==========================================================================
   11. EQUIPMENT INVENTORY — filters, tool cards, status pills
   ========================================================================== */

.cmk-equipment {
	position: relative;
}

/* --- Filter pill row ----------------------------------------------------- */

.cmk-equipment__filters {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cmk-space-2xs);
	margin-bottom: var(--cmk-space-sm);
	padding: 0;
	list-style: none;
}

.cmk-filter {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	min-height: 44px;
	padding: 0.4em 1.05em;
	font-family: var(--cmk-font-condensed);
	font-size: var(--cmk-fs-sm);
	font-weight: var(--cmk-fw-semibold);
	text-transform: uppercase;
	letter-spacing: var(--cmk-ls-wide);
	color: var(--cmk-graphite);
	background: var(--cmk-white);
	border: 1px solid var(--cmk-border-strong);
	border-radius: var(--cmk-radius-pill);
	cursor: pointer;
	transition: background-color var(--cmk-dur-fast) var(--cmk-ease),
		border-color var(--cmk-dur-fast) var(--cmk-ease),
		color var(--cmk-dur-fast) var(--cmk-ease);
}

.cmk-filter:hover {
	background: var(--cmk-orange-wash);
	border-color: var(--cmk-orange);
	color: var(--cmk-orange-ink);
	transform: none;
	box-shadow: none;
}

/* Pressed state carries colour AND a leading tick, so the active filter is
   not signalled by colour alone. */
.cmk-filter[aria-pressed="true"] {
	background: var(--cmk-orange);
	border-color: var(--cmk-orange);
	color: var(--cmk-white);
}

.cmk-filter[aria-pressed="true"]::before {
	content: "\2713";
	font-size: 0.95em;
	line-height: 1;
}

.cmk-filter[aria-pressed="true"]:hover {
	background: var(--cmk-orange-dark);
	border-color: var(--cmk-orange-dark);
	color: var(--cmk-white);
}

/* Digital-fab filters read blue when pressed. */
.cmk-filter[data-filter="laser"][aria-pressed="true"],
.cmk-filter[data-filter="cnc"][aria-pressed="true"],
.cmk-filter[data-filter="3d-printing"][aria-pressed="true"],
.cmk-filter[data-filter="digital"][aria-pressed="true"],
.cmk-filter[data-filter="electronics"][aria-pressed="true"] {
	background: var(--cmk-blue);
	border-color: var(--cmk-blue);
}

.cmk-filter[data-filter="laser"][aria-pressed="true"]:hover,
.cmk-filter[data-filter="cnc"][aria-pressed="true"]:hover,
.cmk-filter[data-filter="3d-printing"][aria-pressed="true"]:hover,
.cmk-filter[data-filter="digital"][aria-pressed="true"]:hover,
.cmk-filter[data-filter="electronics"][aria-pressed="true"]:hover {
	background: var(--cmk-blue-dark);
	border-color: var(--cmk-blue-dark);
}

/* Live region announcing "Showing 6 of 18 — Woodshop". */
.cmk-equipment__count {
	font-family: var(--cmk-font-condensed);
	font-size: var(--cmk-fs-sm);
	font-weight: var(--cmk-fw-medium);
	text-transform: uppercase;
	letter-spacing: var(--cmk-ls-wide);
	color: var(--cmk-color-muted);
	margin-bottom: var(--cmk-space-md);
	min-height: 1.4em;
}

.cmk-equipment__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--cmk-space-md);
}

.cmk-equipment__empty {
	padding: var(--cmk-space-xl) var(--cmk-space-md);
	border: 1px dashed var(--cmk-border-strong);
	border-radius: var(--cmk-radius);
	background: var(--cmk-concrete);
	text-align: center;
	color: var(--cmk-graphite-soft);
}

.cmk-equipment__empty[hidden] {
	display: none;
}

/* --- Tool card ----------------------------------------------------------- */

.cmk-tool {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--cmk-white);
	border: 1px solid var(--cmk-border);
	border-radius: var(--cmk-radius);
	overflow: hidden;
	transition: border-color var(--cmk-dur) var(--cmk-ease),
		box-shadow var(--cmk-dur) var(--cmk-ease),
		transform var(--cmk-dur) var(--cmk-ease),
		opacity var(--cmk-dur) var(--cmk-ease);
}

/* Category colour is carried on the card's top edge. */
.cmk-tool::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 3px;
	background: var(--cmk-tool-accent);
	z-index: 2;
}

.cmk-tool:hover {
	border-color: var(--cmk-border-strong);
	box-shadow: var(--cmk-shadow);
	transform: translateY(-3px);
}

.cmk-tool__media {
	position: relative;
	aspect-ratio: 4 / 3;
	background: var(--cmk-concrete);
	overflow: hidden;
}

.cmk-tool__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--cmk-dur-slow) var(--cmk-ease-out);
}

.cmk-tool:hover .cmk-tool__media img {
	transform: scale(1.03);
}

/* Category chip sitting over the photo. */
.cmk-tool__category {
	position: absolute;
	left: var(--cmk-space-2xs);
	bottom: var(--cmk-space-2xs);
	z-index: 2;
	font-family: var(--cmk-font-condensed);
	font-size: var(--cmk-fs-xs);
	font-weight: var(--cmk-fw-semibold);
	text-transform: uppercase;
	letter-spacing: var(--cmk-ls-wide);
	color: var(--cmk-white);
	background: var(--cmk-tool-accent);
	padding: 0.25em 0.6em;
	border-radius: var(--cmk-radius-sm);
}

.cmk-tool__body {
	display: flex;
	flex-direction: column;
	gap: var(--cmk-space-2xs);
	padding: var(--cmk-space-md);
	flex: 1 1 auto;
}

.cmk-tool__title {
	font-family: var(--cmk-font-display);
	font-size: var(--cmk-fs-lg);
	font-weight: var(--cmk-fw-bold);
	letter-spacing: var(--cmk-ls-tight);
	color: var(--cmk-graphite);
	margin: 0;
}

.cmk-tool__title a {
	color: inherit;
}

.cmk-tool__title a:hover {
	color: var(--cmk-tool-accent-ink);
	text-decoration: none;
}

.cmk-tool__model {
	font-family: var(--cmk-font-condensed);
	font-size: var(--cmk-fs-sm);
	text-transform: uppercase;
	letter-spacing: var(--cmk-ls-wide);
	color: var(--cmk-color-muted);
	margin: 0;
}

.cmk-tool__summary {
	font-size: var(--cmk-fs-sm);
	color: var(--cmk-graphite-soft);
	margin: 0;
}

/* Spec definition list — two columns of label/value, hairline separated. */
.cmk-tool__spec {
	display: grid;
	grid-template-columns: minmax(0, auto) minmax(0, 1fr);
	gap: 0;
	margin: var(--cmk-space-2xs) 0 0;
	border-top: 1px solid var(--cmk-border);
	font-size: var(--cmk-fs-sm);
}

.cmk-tool__spec dt {
	grid-column: 1;
	padding: 0.45em var(--cmk-space-sm) 0.45em 0;
	border-bottom: 1px solid var(--cmk-border);
	font-family: var(--cmk-font-condensed);
	font-size: var(--cmk-fs-sm);
	font-weight: var(--cmk-fw-semibold);
	text-transform: uppercase;
	letter-spacing: var(--cmk-ls-wide);
	color: var(--cmk-color-muted);
	white-space: nowrap;
}

.cmk-tool__spec dd {
	grid-column: 2;
	margin: 0;
	padding: 0.45em 0;
	border-bottom: 1px solid var(--cmk-border);
	color: var(--cmk-graphite);
	text-align: right;
}

.cmk-tool__spec dt:last-of-type,
.cmk-tool__spec dd:last-of-type {
	border-bottom: 0;
}

.cmk-tool__footer {
	margin-top: auto;
	display: flex;
	flex-wrap: wrap;
	gap: var(--cmk-space-2xs) var(--cmk-space-sm);
	align-items: center;
	justify-content: space-between;
	padding: var(--cmk-space-sm) var(--cmk-space-md);
	border-top: 1px solid var(--cmk-border);
	background: rgba(233, 236, 239, 0.45);
}

/* --- Category colour coding ---------------------------------------------
   Hand and heavy-trade work is keyed to safety orange; digital fabrication
   is keyed to electric blue. Both the BEM modifier and the data attribute
   are supported so the JS filter and static markup can agree. */

.cmk-tool--hand,
.cmk-tool[data-category="hand"],
.cmk-tool[data-category="hand-tools"],
.cmk-tool--wood,
.cmk-tool[data-category="wood"],
.cmk-tool[data-category="woodshop"],
.cmk-tool--metal,
.cmk-tool[data-category="metal"],
.cmk-tool--textile,
.cmk-tool[data-category="textile"] {
	--cmk-tool-accent: var(--cmk-orange);
	--cmk-tool-accent-ink: var(--cmk-orange-ink);
	--cmk-tool-accent-wash: var(--cmk-orange-wash);
}

.cmk-tool--digital,
.cmk-tool[data-category="digital"],
.cmk-tool[data-category="laser"],
.cmk-tool[data-category="cnc"],
.cmk-tool[data-category="3d-printing"],
.cmk-tool--electronics,
.cmk-tool[data-category="electronics"] {
	--cmk-tool-accent: var(--cmk-blue);
	--cmk-tool-accent-ink: var(--cmk-blue-ink);
	--cmk-tool-accent-wash: var(--cmk-blue-wash);
}

/* Metal reads slightly deeper than the woodshop orange so the two heavy
   trades are still distinguishable side by side. */
.cmk-tool--metal,
.cmk-tool[data-category="metal"] {
	--cmk-tool-accent: var(--cmk-orange-dark);
}

/* Textile sits between the families — orange family, lighter tint. */
.cmk-tool--textile,
.cmk-tool[data-category="textile"] {
	--cmk-tool-accent: var(--cmk-orange-bright);
}

/* Electronics is the quietest of the digital family. */
.cmk-tool--electronics,
.cmk-tool[data-category="electronics"] {
	--cmk-tool-accent: var(--cmk-blue-dark);
}

/* A category strip down the left edge as a second, non-colour cue. */
.cmk-tool__body::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 0;
}

/* --- Filter states ------------------------------------------------------ */

/* The JS applies BOTH the class and the hidden attribute: the class carries
   the transition, the attribute removes the card from the a11y tree. */
.cmk-tool.is-filtered-out {
	display: none;
}

.cmk-tool[hidden],
.cmk-project[hidden],
.cmk-member[hidden] {
	display: none !important;
}

/* Cards entering after a filter change get a short fade-up. */
.cmk-tool.is-filtered-in {
	animation: cmk-card-in var(--cmk-dur) var(--cmk-ease-out) both;
}

@keyframes cmk-card-in {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: none; }
}

/* --- Availability status pills -----------------------------------------
   Colour + a dot + a text label, always. Never colour alone. The sr-only
   prefix ("Availability:") is emitted by comakers_status_pill(). */

.cmk-status {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	font-family: var(--cmk-font-condensed);
	font-size: var(--cmk-fs-sm);
	font-weight: var(--cmk-fw-semibold);
	text-transform: uppercase;
	letter-spacing: var(--cmk-ls-wide);
	line-height: 1.3;
	padding: 0.3em 0.7em 0.3em 0.6em;
	border-radius: var(--cmk-radius-pill);
	border: 1px solid currentColor;
	background: var(--cmk-concrete);
	color: var(--cmk-graphite);
	white-space: nowrap;
}

.cmk-status__dot {
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: currentColor;
}

.cmk-status--available {
	color: var(--cmk-status-available);
	background: var(--cmk-status-available-bg);
}

.cmk-status--in-use {
	color: var(--cmk-status-in-use);
	background: var(--cmk-status-in-use-bg);
}

/* In use: the dot is hollow, so the state is legible in greyscale too. */
.cmk-status--in-use .cmk-status__dot {
	background: transparent;
	box-shadow: inset 0 0 0 2px currentColor;
}

.cmk-status--training-required {
	color: var(--cmk-status-training);
	background: var(--cmk-status-training-bg);
}

/* Training required: a square "keyed" indicator. */
.cmk-status--training-required .cmk-status__dot {
	border-radius: 1px;
	transform: rotate(45deg);
}

.cmk-status--maintenance {
	color: var(--cmk-status-maintenance);
	background: var(--cmk-status-maintenance-bg);
}

/* Maintenance: a barred indicator. */
.cmk-status--maintenance .cmk-status__dot {
	border-radius: 1px;
	height: 3px;
	width: 10px;
}

.cmk-status--sm {
	font-size: var(--cmk-fs-xs);
	padding: 0.2em 0.55em;
}

/* Status pills on dark panels keep their hue but lift the surface. */
.cmk-section--graphite .cmk-status {
	background: rgba(255, 255, 255, 0.1);
}

.cmk-section--graphite .cmk-status--available { color: #6fd39b; }
.cmk-section--graphite .cmk-status--in-use { color: #f0bd6a; }
.cmk-section--graphite .cmk-status--training-required { color: #6fd0dc; }
.cmk-section--graphite .cmk-status--maintenance { color: #f09b83; }

/* ==========================================================================
   12. MEMBERSHIP TIERS
   ========================================================================== */

.cmk-tiers {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--cmk-space-md);
	align-items: stretch;
}

.cmk-tier {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: var(--cmk-space-lg) var(--cmk-space-md) var(--cmk-space-md);
	background: var(--cmk-white);
	border: 1px solid var(--cmk-border);
	border-radius: var(--cmk-radius);
	transition: border-color var(--cmk-dur) var(--cmk-ease),
		box-shadow var(--cmk-dur) var(--cmk-ease),
		transform var(--cmk-dur) var(--cmk-ease);
}

.cmk-tier:hover {
	border-color: var(--cmk-border-strong);
	box-shadow: var(--cmk-shadow);
}

.cmk-tier__name {
	font-family: var(--cmk-font-condensed);
	font-size: var(--cmk-fs-lg);
	font-weight: var(--cmk-fw-bold);
	text-transform: uppercase;
	letter-spacing: var(--cmk-ls-wider);
	color: var(--cmk-graphite);
	margin: 0 0 var(--cmk-space-3xs);
}

.cmk-tier__blurb {
	font-size: var(--cmk-fs-sm);
	color: var(--cmk-color-muted);
	margin: 0 0 var(--cmk-space-md);
	min-height: 2.8em;
}

.cmk-tier__price {
	display: flex;
	align-items: flex-start;
	gap: 0.15em;
	font-family: var(--cmk-font-display);
	font-size: var(--cmk-fs-3xl);
	font-weight: var(--cmk-fw-black);
	line-height: 1;
	letter-spacing: -0.035em;
	color: var(--cmk-graphite);
	margin: 0 0 var(--cmk-space-xs);
}

.cmk-tier__currency {
	font-size: 0.42em;
	font-weight: var(--cmk-fw-bold);
	line-height: 1.6;
	letter-spacing: 0;
	color: var(--cmk-color-muted);
	transform: translateY(0.15em);
}

.cmk-tier__period {
	align-self: flex-end;
	font-family: var(--cmk-font-condensed);
	font-size: 0.3em;
	font-weight: var(--cmk-fw-semibold);
	text-transform: uppercase;
	letter-spacing: var(--cmk-ls-wide);
	color: var(--cmk-color-muted);
	margin-left: 0.35em;
	padding-bottom: 0.35em;
}

.cmk-tier__note {
	font-family: var(--cmk-font-condensed);
	font-size: var(--cmk-fs-sm);
	text-transform: uppercase;
	letter-spacing: var(--cmk-ls-wide);
	color: var(--cmk-color-muted);
	margin: 0 0 var(--cmk-space-md);
}

/* Feature list with custom orange check markers. */
.cmk-tier__features {
	list-style: none;
	margin: 0 0 var(--cmk-space-lg);
	padding: var(--cmk-space-md) 0 0;
	border-top: 1px solid var(--cmk-border);
	font-size: var(--cmk-fs-sm);
	flex: 1 1 auto;
}

.cmk-tier__features li {
	position: relative;
	padding-left: 1.75em;
	margin-top: var(--cmk-space-2xs);
	color: var(--cmk-graphite-soft);
}

.cmk-tier__features li:first-child {
	margin-top: 0;
}

.cmk-tier__features li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.42em;
	width: 11px;
	height: 6px;
	border-left: 2px solid var(--cmk-orange);
	border-bottom: 2px solid var(--cmk-orange);
	transform: rotate(-45deg);
}

/* Excluded features get a hairline dash instead of a tick. */
.cmk-tier__features li.is-excluded {
	color: var(--cmk-graphite-mist);
}

.cmk-tier__features li.is-excluded::before {
	top: 0.7em;
	width: 11px;
	height: 0;
	border-left: 0;
	border-bottom: 2px solid var(--cmk-border-strong);
	transform: none;
}

.cmk-tier__cta {
	width: 100%;
}

/* Featured tier — orange-topped and slightly raised. */
.cmk-tier--featured {
	border-color: var(--cmk-orange);
	box-shadow: var(--cmk-shadow);
	z-index: 1;
}

.cmk-tier--featured::before {
	content: "";
	position: absolute;
	inset: -1px -1px auto -1px;
	height: 5px;
	background: var(--cmk-orange);
	border-radius: var(--cmk-radius) var(--cmk-radius) 0 0;
}

.cmk-tier--featured:hover {
	border-color: var(--cmk-orange-dark);
	box-shadow: var(--cmk-shadow-lg);
}

.cmk-tier__flag {
	position: absolute;
	top: 0;
	right: var(--cmk-space-md);
	transform: translateY(-50%);
	font-family: var(--cmk-font-condensed);
	font-size: var(--cmk-fs-xs);
	font-weight: var(--cmk-fw-bold);
	text-transform: uppercase;
	letter-spacing: var(--cmk-ls-wider);
	color: var(--cmk-white);
	background: var(--cmk-orange);
	padding: 0.3em 0.75em;
	border-radius: var(--cmk-radius-pill);
	white-space: nowrap;
}

/* Blue-keyed tier for digital-fab-only memberships. */
.cmk-tier--digital .cmk-tier__features li::before {
	border-color: var(--cmk-blue);
}

.cmk-tier--digital .cmk-tier__name {
	color: var(--cmk-blue-ink);
}

/* ==========================================================================
   13. WORKSHOP / CLASS CALENDAR
   ========================================================================== */

.cmk-calendar {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--cmk-border);
}

.cmk-class {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	grid-template-areas:
		"date body"
		"date meta"
		"seats seats"
		"cta cta";
	gap: var(--cmk-space-2xs) var(--cmk-space-md);
	align-items: start;
	padding: var(--cmk-space-md) 0;
	margin: 0;
	border-bottom: 1px solid var(--cmk-border);
	transition: background-color var(--cmk-dur-fast) var(--cmk-ease);
}

.cmk-class:hover {
	background: rgba(233, 236, 239, 0.5);
}

/* Bold day/month stack, like a torn-off shop calendar page. */
.cmk-class__date {
	grid-area: date;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-width: 68px;
	padding: var(--cmk-space-2xs);
	background: var(--cmk-concrete);
	border: 1px solid var(--cmk-border);
	border-top: 3px solid var(--cmk-orange);
	border-radius: var(--cmk-radius-sm);
	text-align: center;
	line-height: 1;
}

.cmk-class__day {
	font-family: var(--cmk-font-display);
	font-size: var(--cmk-fs-xl);
	font-weight: var(--cmk-fw-black);
	letter-spacing: -0.03em;
	color: var(--cmk-graphite);
}

.cmk-class__month {
	margin-top: 0.2em;
	font-family: var(--cmk-font-condensed);
	font-size: var(--cmk-fs-sm);
	font-weight: var(--cmk-fw-semibold);
	text-transform: uppercase;
	letter-spacing: var(--cmk-ls-wide);
	color: var(--cmk-orange-ink);
}

.cmk-class__weekday {
	margin-top: 0.25em;
	font-family: var(--cmk-font-condensed);
	font-size: var(--cmk-fs-xs);
	text-transform: uppercase;
	letter-spacing: var(--cmk-ls-wide);
	color: var(--cmk-color-muted);
}

.cmk-class__body {
	grid-area: body;
	min-width: 0;
}

.cmk-class__title {
	font-family: var(--cmk-font-display);
	font-size: var(--cmk-fs-lg);
	font-weight: var(--cmk-fw-bold);
	letter-spacing: var(--cmk-ls-tight);
	color: var(--cmk-graphite);
	margin: 0 0 var(--cmk-space-3xs);
}

.cmk-class__title a {
	color: inherit;
}

.cmk-class__title a:hover {
	color: var(--cmk-orange-ink);
	text-decoration: none;
}

.cmk-class__summary {
	font-size: var(--cmk-fs-sm);
	color: var(--cmk-graphite-soft);
	margin: 0;
}

/* Duration · instructor · skill level, in the condensed shop face. */
.cmk-class__meta {
	grid-area: meta;
	display: flex;
	flex-wrap: wrap;
	gap: var(--cmk-space-3xs) var(--cmk-space-sm);
	margin: var(--cmk-space-2xs) 0 0;
	padding: 0;
	list-style: none;
	font-family: var(--cmk-font-condensed);
	font-size: var(--cmk-fs-sm);
	text-transform: uppercase;
	letter-spacing: var(--cmk-ls-wide);
	color: var(--cmk-color-muted);
}

.cmk-class__meta li {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	margin: 0;
}

.cmk-class__meta li + li::before {
	content: "";
	width: 1px;
	height: 0.9em;
	background: var(--cmk-border-strong);
	margin-right: 0.5em;
}

.cmk-class__meta strong {
	font-weight: var(--cmk-fw-semibold);
	color: var(--cmk-graphite);
}

/* Skill level pills. */
.cmk-class__level {
	font-family: var(--cmk-font-condensed);
	font-size: var(--cmk-fs-xs);
	font-weight: var(--cmk-fw-semibold);
	text-transform: uppercase;
	letter-spacing: var(--cmk-ls-wide);
	padding: 0.2em 0.55em;
	border-radius: var(--cmk-radius-sm);
	background: var(--cmk-concrete);
	color: var(--cmk-graphite);
	border: 1px solid var(--cmk-border);
}

.cmk-class__level--intro {
	background: var(--cmk-blue-wash);
	color: var(--cmk-blue-ink);
	border-color: rgba(27, 154, 170, 0.35);
}

.cmk-class__level--advanced {
	background: var(--cmk-orange-wash);
	color: var(--cmk-orange-ink);
	border-color: rgba(255, 107, 53, 0.35);
}

.cmk-class__seats {
	grid-area: seats;
	font-family: var(--cmk-font-condensed);
	font-size: var(--cmk-fs-sm);
	font-weight: var(--cmk-fw-semibold);
	text-transform: uppercase;
	letter-spacing: var(--cmk-ls-wide);
	color: var(--cmk-graphite-soft);
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
}

.cmk-class__seats::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--cmk-status-available);
}

/* Low-seats warning — colour plus a label change, never colour alone. */
.cmk-class__seats--low {
	color: var(--cmk-status-in-use);
}

.cmk-class__seats--low::before {
	background: var(--cmk-status-in-use);
	animation: cmk-pulse 2.4s var(--cmk-ease) infinite;
}

.cmk-class__seats--full {
	color: var(--cmk-status-maintenance);
}

.cmk-class__seats--full::before {
	background: var(--cmk-status-maintenance);
	border-radius: 1px;
	height: 3px;
	width: 10px;
}

@keyframes cmk-pulse {
	0%, 100% { opacity: 1; }
	50%      { opacity: 0.35; }
}

.cmk-class__cta {
	grid-area: cta;
	justify-self: start;
}

/* Cancelled / past classes read back. */
.cmk-class--past {
	opacity: 0.6;
}

.cmk-class--past .cmk-class__date {
	border-top-color: var(--cmk-border-strong);
}

/* ==========================================================================
   14. PROJECT SHOWCASE GALLERY
   ========================================================================== */

.cmk-projects {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--cmk-space-md);
}

.cmk-project {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--cmk-white);
	border: 1px solid var(--cmk-border);
	border-radius: var(--cmk-radius);
	overflow: hidden;
	transition: border-color var(--cmk-dur) var(--cmk-ease),
		box-shadow var(--cmk-dur) var(--cmk-ease),
		transform var(--cmk-dur) var(--cmk-ease);
}

.cmk-project:hover,
.cmk-project:focus-within {
	border-color: var(--cmk-border-strong);
	box-shadow: var(--cmk-shadow);
	transform: translateY(-3px);
}

/* Orange corner tick — a registration mark on the top-right corner. */
.cmk-project::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	width: 30px;
	height: 30px;
	z-index: 3;
	pointer-events: none;
	background:
		linear-gradient(to left, var(--cmk-orange) 0 3px, transparent 3px),
		linear-gradient(to bottom, var(--cmk-orange) 0 3px, transparent 3px);
	transition: width var(--cmk-dur) var(--cmk-ease), height var(--cmk-dur) var(--cmk-ease);
}

.cmk-project:hover::after,
.cmk-project:focus-within::after {
	width: 46px;
	height: 46px;
}

/* Process-led image treatment: the shot arrives desaturated (a work in
   progress) and resolves to full colour on hover. */
.cmk-project__media {
	position: relative;
	aspect-ratio: 4 / 3;
	background: var(--cmk-concrete);
	overflow: hidden;
}

.cmk-project__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(100%) contrast(1.04);
	transform: scale(1.01);
	transition: filter var(--cmk-dur-slow) var(--cmk-ease),
		transform var(--cmk-dur-slow) var(--cmk-ease-out);
}

.cmk-project:hover .cmk-project__media img,
.cmk-project:focus-within .cmk-project__media img {
	filter: grayscale(0%) contrast(1);
	transform: scale(1.04);
}

/* Keyboard and reduced-motion users get full colour with no dependency on
   hover — see also the reduce block in §24. */
@media (hover: none) {
	.cmk-project__media img {
		filter: none;
		transform: none;
	}
}

.cmk-project__body {
	display: flex;
	flex-direction: column;
	gap: var(--cmk-space-2xs);
	padding: var(--cmk-space-md);
	flex: 1 1 auto;
}

.cmk-project__title {
	font-family: var(--cmk-font-display);
	font-size: var(--cmk-fs-lg);
	font-weight: var(--cmk-fw-bold);
	letter-spacing: var(--cmk-ls-tight);
	color: var(--cmk-graphite);
	margin: 0;
}

.cmk-project__title a {
	color: inherit;
}

.cmk-project__title a:hover {
	color: var(--cmk-orange-ink);
	text-decoration: none;
}

.cmk-project__maker {
	font-family: var(--cmk-font-condensed);
	font-size: var(--cmk-fs-sm);
	text-transform: uppercase;
	letter-spacing: var(--cmk-ls-wide);
	color: var(--cmk-color-muted);
	margin: 0;
}

.cmk-project__excerpt {
	font-size: var(--cmk-fs-sm);
	color: var(--cmk-graphite-soft);
	margin: 0;
}

/* Process caption — the machines the project actually went through. */
.cmk-project__process {
	margin: var(--cmk-space-2xs) 0 0;
	padding: var(--cmk-space-2xs) 0 0;
	border-top: 1px dashed var(--cmk-border);
	font-family: var(--cmk-font-condensed);
	font-size: var(--cmk-fs-xs);
	text-transform: uppercase;
	letter-spacing: var(--cmk-ls-wide);
	color: var(--cmk-color-muted);
}

.cmk-project__process ul,
.cmk-project__chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cmk-space-3xs);
	list-style: none;
	margin: var(--cmk-space-3xs) 0 0;
	padding: 0;
}

.cmk-project__process li,
.cmk-project__chip {
	display: inline-flex;
	align-items: center;
	margin: 0;
	padding: 0.2em 0.5em;
	background: var(--cmk-concrete);
	border: 1px solid var(--cmk-border);
	border-radius: var(--cmk-radius-sm);
	font-weight: var(--cmk-fw-semibold);
	color: var(--cmk-graphite);
	line-height: 1.35;
}

/* Digital-fab machines chip blue, hand/heavy trades chip orange. */
.cmk-project__chip--digital,
.cmk-project__process li[data-family="digital"] {
	background: var(--cmk-blue-wash);
	border-color: rgba(27, 154, 170, 0.35);
	color: var(--cmk-blue-ink);
}

.cmk-project__chip--hand,
.cmk-project__process li[data-family="hand"] {
	background: var(--cmk-orange-wash);
	border-color: rgba(255, 107, 53, 0.35);
	color: var(--cmk-orange-ink);
}

/* Masonry-ish emphasis: one in five projects spans two columns. */
.cmk-project--wide {
	grid-column: span 1;
}

.cmk-project--tall .cmk-project__media {
	aspect-ratio: 3 / 4;
}

/* ==========================================================================
   15. MEMBERS' DIRECTORY
   ========================================================================== */

.cmk-members {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--cmk-space-md);
	list-style: none;
	margin: 0;
	padding: 0;
}

.cmk-member {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--cmk-space-2xs);
	margin: 0;
	padding: var(--cmk-space-md);
	background: var(--cmk-white);
	border: 1px solid var(--cmk-border);
	border-radius: var(--cmk-radius);
	transition: border-color var(--cmk-dur) var(--cmk-ease),
		box-shadow var(--cmk-dur) var(--cmk-ease);
}

.cmk-member:hover {
	border-color: var(--cmk-border-strong);
	box-shadow: var(--cmk-shadow-sm);
}

.cmk-member__avatar {
	position: relative;
	width: 72px;
	height: 72px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--cmk-concrete);
	border: 2px solid var(--cmk-white);
	box-shadow: 0 0 0 1px var(--cmk-border);
}

.cmk-member__avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Fallback initials when there is no portrait. */
.cmk-member__avatar[data-initials]::after {
	content: attr(data-initials);
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	font-family: var(--cmk-font-display);
	font-size: var(--cmk-fs-lg);
	font-weight: var(--cmk-fw-bold);
	color: var(--cmk-graphite-mist);
}

.cmk-member__avatar:has(img)::after {
	content: none;
}

.cmk-member__name {
	font-family: var(--cmk-font-display);
	font-size: var(--cmk-fs-md);
	font-weight: var(--cmk-fw-bold);
	letter-spacing: var(--cmk-ls-tight);
	color: var(--cmk-graphite);
	margin: var(--cmk-space-2xs) 0 0;
}

.cmk-member__name a {
	color: inherit;
}

.cmk-member__name a:hover {
	color: var(--cmk-orange-ink);
	text-decoration: none;
}

.cmk-member__discipline {
	font-family: var(--cmk-font-condensed);
	font-size: var(--cmk-fs-sm);
	font-weight: var(--cmk-fw-medium);
	text-transform: uppercase;
	letter-spacing: var(--cmk-ls-wide);
	color: var(--cmk-orange-ink);
	margin: 0;
}

.cmk-member__bio {
	font-size: var(--cmk-fs-sm);
	color: var(--cmk-graphite-soft);
	margin: 0;
}

.cmk-member__skills {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cmk-space-3xs);
	list-style: none;
	margin: var(--cmk-space-2xs) 0 0;
	padding: 0;
	font-family: var(--cmk-font-condensed);
	font-size: var(--cmk-fs-xs);
	text-transform: uppercase;
	letter-spacing: var(--cmk-ls-wide);
}

.cmk-member__skills li {
	margin: 0;
	padding: 0.2em 0.5em;
	background: var(--cmk-concrete);
	border: 1px solid var(--cmk-border);
	border-radius: var(--cmk-radius-sm);
	color: var(--cmk-graphite);
	font-weight: var(--cmk-fw-semibold);
	line-height: 1.35;
}

.cmk-member__skills li[data-family="digital"] {
	background: var(--cmk-blue-wash);
	border-color: rgba(27, 154, 170, 0.35);
	color: var(--cmk-blue-ink);
}

.cmk-member__skills li[data-family="hand"] {
	background: var(--cmk-orange-wash);
	border-color: rgba(255, 107, 53, 0.35);
	color: var(--cmk-orange-ink);
}

/* Shop-lead / instructor flag. */
.cmk-member--lead {
	border-color: var(--cmk-orange);
}

.cmk-member__flag {
	font-family: var(--cmk-font-condensed);
	font-size: var(--cmk-fs-2xs);
	font-weight: var(--cmk-fw-bold);
	text-transform: uppercase;
	letter-spacing: var(--cmk-ls-wider);
	color: var(--cmk-white);
	background: var(--cmk-orange);
	padding: 0.2em 0.5em;
	border-radius: var(--cmk-radius-sm);
}

/* ==========================================================================
   16. ARCHIVE & BLOG LAYOUTS
   ========================================================================== */

.blog .site-main > .ast-row,
.archive .site-main > .ast-row,
.search .site-main > .ast-row {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--cmk-space-md);
	margin: 0;
}

.blog .ast-article-post,
.archive .ast-article-post,
.search .ast-article-post {
	display: flex;
	flex-direction: column;
	width: 100%;
	padding: 0;
	margin: 0;
	background: var(--cmk-white);
	border: 1px solid var(--cmk-border);
	border-radius: var(--cmk-radius);
	overflow: hidden;
	transition: border-color var(--cmk-dur) var(--cmk-ease),
		box-shadow var(--cmk-dur) var(--cmk-ease),
		transform var(--cmk-dur) var(--cmk-ease);
}

.blog .ast-article-post:hover,
.archive .ast-article-post:hover {
	border-color: var(--cmk-border-strong);
	box-shadow: var(--cmk-shadow);
	transform: translateY(-3px);
}

.ast-article-post .post-thumb,
.ast-article-post .ast-blog-featured-section {
	margin: 0;
	background: var(--cmk-concrete);
	aspect-ratio: 4 / 3;
	overflow: hidden;
}

.ast-article-post .post-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--cmk-dur-slow) var(--cmk-ease-out);
}

.ast-article-post:hover .post-thumb img {
	transform: scale(1.03);
}

.ast-article-post .ast-blog-single-element,
.ast-article-post .entry-content,
.ast-article-post .entry-header {
	padding-inline: var(--cmk-space-md);
}

.ast-article-post .entry-header {
	padding-top: var(--cmk-space-md);
}

.ast-article-post .entry-title {
	font-size: var(--cmk-fs-lg);
	margin-bottom: var(--cmk-space-2xs);
}

.ast-article-post .entry-title a {
	color: var(--cmk-graphite);
}

.ast-article-post .entry-title a:hover {
	color: var(--cmk-orange-ink);
	text-decoration: none;
}

.ast-article-post .entry-content {
	padding-bottom: var(--cmk-space-md);
	font-size: var(--cmk-fs-sm);
	color: var(--cmk-graphite-soft);
}

/* Entry meta — condensed, hairline separated. */
.entry-meta,
.ast-blog-meta-container,
.post-meta {
	font-family: var(--cmk-font-condensed);
	font-size: var(--cmk-fs-sm);
	text-transform: uppercase;
	letter-spacing: var(--cmk-ls-wide);
	color: var(--cmk-color-muted);
}

.entry-meta a,
.ast-blog-meta-container a {
	color: var(--cmk-color-muted);
}

.entry-meta a:hover {
	color: var(--cmk-orange-ink);
}

.entry-meta .cmk-reading-time::before {
	content: "";
	display: inline-block;
	width: 1px;
	height: 0.85em;
	margin: 0 0.6em 0 0.35em;
	vertical-align: -0.05em;
	background: var(--cmk-border-strong);
}

.cmk-reading-time {
	white-space: nowrap;
}

/* Category tag row. */
.ast-terms-link a,
.cat-links a,
.tags-links a {
	display: inline-block;
	font-family: var(--cmk-font-condensed);
	font-size: var(--cmk-fs-xs);
	font-weight: var(--cmk-fw-semibold);
	text-transform: uppercase;
	letter-spacing: var(--cmk-ls-wide);
	color: var(--cmk-orange-ink);
	background: var(--cmk-orange-wash);
	border: 1px solid rgba(255, 107, 53, 0.3);
	border-radius: var(--cmk-radius-sm);
	padding: 0.18em 0.5em;
	margin: 0 0.25em 0.25em 0;
}

.ast-terms-link a:hover {
	background: var(--cmk-orange);
	border-color: var(--cmk-orange);
	color: var(--cmk-white);
	text-decoration: none;
}

/* Read-more link. */
.ast-blog-single-element .ast-button,
.read-more a,
.more-link {
	font-family: var(--cmk-font-condensed);
	font-size: var(--cmk-fs-sm);
	font-weight: var(--cmk-fw-semibold);
	text-transform: uppercase;
	letter-spacing: var(--cmk-ls-wide);
}

/* --- Pagination --------------------------------------------------------- */

.ast-pagination,
.navigation.pagination,
.paging-navigation {
	margin-top: var(--cmk-space-xl);
	padding-top: var(--cmk-space-md);
	border-top: 1px solid var(--cmk-border);
}

.ast-pagination .nav-links,
.navigation.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cmk-space-2xs);
	align-items: center;
	justify-content: center;
}

.ast-pagination .page-numbers,
.navigation.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 0.6em;
	font-family: var(--cmk-font-condensed);
	font-size: var(--cmk-fs-md);
	font-weight: var(--cmk-fw-semibold);
	color: var(--cmk-graphite);
	background: var(--cmk-white);
	border: 1px solid var(--cmk-border);
	border-radius: var(--cmk-radius);
	text-decoration: none;
	transition: background-color var(--cmk-dur-fast) var(--cmk-ease),
		border-color var(--cmk-dur-fast) var(--cmk-ease),
		color var(--cmk-dur-fast) var(--cmk-ease);
}

.ast-pagination .page-numbers:hover,
.navigation.pagination .page-numbers:hover {
	background: var(--cmk-orange-wash);
	border-color: var(--cmk-orange);
	color: var(--cmk-orange-ink);
}

.ast-pagination .page-numbers.current,
.navigation.pagination .page-numbers.current {
	background: var(--cmk-orange);
	border-color: var(--cmk-orange);
	color: var(--cmk-white);
}

.ast-pagination .page-numbers.dots {
	border-color: transparent;
	background: transparent;
	min-width: 24px;
}

/* No-results / search-empty state. */
.no-results .page-content {
	padding: var(--cmk-space-xl) var(--cmk-space-md);
	background: var(--cmk-concrete);
	border: 1px dashed var(--cmk-border-strong);
	border-radius: var(--cmk-radius);
	text-align: center;
}

/* ==========================================================================
   17. SINGLE POST
   ========================================================================== */

.single .entry-header,
.page .entry-header {
	margin-bottom: var(--cmk-space-lg);
	padding-bottom: var(--cmk-space-md);
	border-bottom: 1px solid var(--cmk-border);
}

.single .entry-title {
	font-size: var(--cmk-fs-3xl);
	max-width: 26ch;
}

.single .post-thumb,
.single .ast-single-post-featured-section img {
	margin-bottom: var(--cmk-space-lg);
	border-radius: var(--cmk-radius);
	overflow: hidden;
}

/* Keep long-form copy on a comfortable measure. */
.single .entry-content > *:not(.alignwide):not(.alignfull):not(.wp-block-cover),
.page .entry-content > *:not(.alignwide):not(.alignfull):not(.wp-block-cover) {
	max-width: var(--cmk-content-width);
	margin-inline: auto;
}

.single .entry-content,
.page .entry-content {
	font-size: var(--cmk-fs-md);
	line-height: var(--cmk-lh-relaxed);
}

.single .entry-content > h2,
.page .entry-content > h2 {
	margin-top: var(--cmk-space-xl);
}

.single .entry-content > h3,
.page .entry-content > h3 {
	margin-top: var(--cmk-space-lg);
}

/* Figures & captions */
.wp-block-image,
.wp-block-embed,
.wp-block-gallery {
	margin-block: var(--cmk-space-lg);
}

.wp-block-image img {
	border-radius: var(--cmk-radius);
}

.wp-block-image figcaption,
.wp-caption-text,
figcaption {
	font-family: var(--cmk-font-condensed);
	font-size: var(--cmk-fs-sm);
	text-transform: uppercase;
	letter-spacing: var(--cmk-ls-wide);
	color: var(--cmk-color-muted);
	margin-top: var(--cmk-space-2xs);
	padding-left: var(--cmk-space-2xs);
	border-left: 2px solid var(--cmk-orange);
	text-align: left;
}

.wp-block-pullquote {
	border-top: 3px solid var(--cmk-orange);
	border-bottom: 3px solid var(--cmk-orange);
	padding-block: var(--cmk-space-md);
	background: transparent;
}

.wp-block-pullquote blockquote {
	border: 0;
	background: transparent;
	padding: 0;
	text-align: left;
}

.wp-block-separator {
	border: 0;
	border-top: 1px solid var(--cmk-border);
	max-width: 100%;
}

.wp-block-separator.is-style-wide {
	border-top-width: 1px;
}

.wp-block-table th {
	background: var(--cmk-concrete);
}

/* Post navigation */
.post-navigation,
.ast-single-post-navigation {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--cmk-space-sm);
	margin-top: var(--cmk-space-2xl);
	padding-top: var(--cmk-space-md);
	border-top: 1px solid var(--cmk-border);
}

.post-navigation .nav-previous,
.post-navigation .nav-next {
	padding: var(--cmk-space-sm) var(--cmk-space-md);
	background: var(--cmk-concrete);
	border: 1px solid var(--cmk-border);
	border-radius: var(--cmk-radius);
	transition: border-color var(--cmk-dur-fast) var(--cmk-ease),
		background-color var(--cmk-dur-fast) var(--cmk-ease);
}

.post-navigation .nav-previous:hover,
.post-navigation .nav-next:hover {
	border-color: var(--cmk-orange);
	background: var(--cmk-orange-wash);
}

.post-navigation a {
	display: block;
	font-family: var(--cmk-font-display);
	font-weight: var(--cmk-fw-semibold);
	color: var(--cmk-graphite);
	text-decoration: none;
}

.post-navigation .nav-previous a::before {
	content: "\2190 ";
	color: var(--cmk-orange);
}

.post-navigation .nav-next {
	text-align: right;
}

.post-navigation .nav-next a::after {
	content: " \2192";
	color: var(--cmk-orange);
}

/* Author box */
.cmk-author-box,
.ast-author-box {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cmk-space-md);
	align-items: flex-start;
	margin-top: var(--cmk-space-xl);
	padding: var(--cmk-space-md);
	background: var(--cmk-concrete);
	border-left: 3px solid var(--cmk-orange);
	border-radius: 0 var(--cmk-radius) var(--cmk-radius) 0;
}

/* --- Comments ----------------------------------------------------------- */

.comments-area {
	margin-top: var(--cmk-space-2xl);
	padding-top: var(--cmk-space-lg);
	border-top: 1px solid var(--cmk-border);
}

.comments-title,
.comment-reply-title {
	font-size: var(--cmk-fs-xl);
	margin-bottom: var(--cmk-space-md);
}

.comment-list {
	list-style: none;
	margin: 0 0 var(--cmk-space-lg);
	padding: 0;
}

.comment-list li {
	margin-top: var(--cmk-space-md);
}

.comment-body {
	padding: var(--cmk-space-md);
	background: var(--cmk-white);
	border: 1px solid var(--cmk-border);
	border-radius: var(--cmk-radius);
}

.comment-list .children {
	list-style: none;
	margin-left: var(--cmk-space-md);
	padding-left: var(--cmk-space-md);
	border-left: 1px solid var(--cmk-border);
}

.comment-author .fn {
	font-family: var(--cmk-font-display);
	font-weight: var(--cmk-fw-semibold);
	color: var(--cmk-graphite);
}

.comment-author .fn a {
	color: inherit;
}

.comment-metadata,
.comment-meta {
	font-family: var(--cmk-font-condensed);
	font-size: var(--cmk-fs-sm);
	text-transform: uppercase;
	letter-spacing: var(--cmk-ls-wide);
	color: var(--cmk-color-muted);
}

.comment-metadata a {
	color: var(--cmk-color-muted);
}

.reply a {
	font-family: var(--cmk-font-condensed);
	font-size: var(--cmk-fs-sm);
	font-weight: var(--cmk-fw-semibold);
	text-transform: uppercase;
	letter-spacing: var(--cmk-ls-wide);
	color: var(--cmk-orange-ink);
}

.bypostauthor > .comment-body {
	border-color: var(--cmk-orange);
	background: var(--cmk-orange-wash);
}

/* ==========================================================================
   18. WIDGETS & SIDEBAR
   ========================================================================== */

.widget {
	margin-bottom: var(--cmk-space-lg);
	padding: 0;
	background: transparent;
}

.sidebar-main .widget {
	padding: var(--cmk-space-md);
	background: var(--cmk-white);
	border: 1px solid var(--cmk-border);
	border-radius: var(--cmk-radius);
}

.widget-title,
.widget .wp-block-heading {
	font-family: var(--cmk-font-condensed);
	font-size: var(--cmk-fs-md);
	font-weight: var(--cmk-fw-semibold);
	text-transform: uppercase;
	letter-spacing: var(--cmk-ls-wider);
	color: var(--cmk-graphite);
	margin-bottom: var(--cmk-space-sm);
	padding-bottom: var(--cmk-space-2xs);
	border-bottom: 1px solid var(--cmk-border);
}

.widget ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.widget li {
	margin: 0;
	padding: var(--cmk-space-2xs) 0;
	border-bottom: 1px solid var(--cmk-border);
	font-size: var(--cmk-fs-sm);
}

.widget li:last-child {
	border-bottom: 0;
}

.widget li a {
	color: var(--cmk-graphite-soft);
	text-decoration: none;
}

.widget li a:hover {
	color: var(--cmk-orange-ink);
}

.widget_tag_cloud a,
.wp-block-tag-cloud a {
	display: inline-block;
	font-family: var(--cmk-font-condensed) !important;
	font-size: var(--cmk-fs-sm) !important;
	text-transform: uppercase;
	letter-spacing: var(--cmk-ls-wide);
	padding: 0.2em 0.55em;
	margin: 0 0.25em 0.35em 0;
	background: var(--cmk-concrete);
	border: 1px solid var(--cmk-border);
	border-radius: var(--cmk-radius-sm);
	color: var(--cmk-graphite);
	text-decoration: none;
}

.widget_tag_cloud a:hover {
	background: var(--cmk-orange);
	border-color: var(--cmk-orange);
	color: var(--cmk-white);
}

.widget_calendar table {
	font-size: var(--cmk-fs-sm);
}

.widget_calendar td#today {
	background: var(--cmk-orange);
	color: var(--cmk-white);
	font-weight: var(--cmk-fw-bold);
}

.sidebar-main {
	font-size: var(--cmk-fs-sm);
}

/* ==========================================================================
   19. FOOTER
   ========================================================================== */

.site-footer,
.ast-small-footer,
.site-below-footer-wrap,
.site-primary-footer-wrap {
	background: var(--cmk-graphite);
	color: var(--cmk-color-on-dark-muted);
	border-top: 3px solid var(--cmk-orange);
}

.site-footer h2,
.site-footer h3,
.site-footer h4,
.site-footer .widget-title {
	color: var(--cmk-white);
}

.site-footer a,
.ast-small-footer a {
	color: var(--cmk-orange-bright);
}

.site-footer a:hover,
.ast-small-footer a:hover {
	color: var(--cmk-white);
}

.cmk-footer-widgets {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--cmk-space-lg);
	max-width: var(--cmk-wide-width);
	margin-inline: auto;
	padding-block: var(--cmk-space-2xl) var(--cmk-space-xl);
	padding-inline: var(--cmk-gutter);
}

.cmk-footer-widgets .widget {
	background: transparent;
	border: 0;
	padding: 0;
	margin: 0;
}

.cmk-footer-widgets .widget-title {
	color: var(--cmk-white);
	border-bottom-color: rgba(255, 255, 255, 0.16);
}

.cmk-footer-widgets .widget li {
	border-bottom-color: rgba(255, 255, 255, 0.1);
}

.cmk-footer-widgets .widget li a,
.cmk-footer-widgets p {
	color: rgba(238, 241, 244, 0.82);
}

.cmk-footer-widgets .widget li a:hover {
	color: var(--cmk-orange-bright);
}

.cmk-footer-brand .cmk-wordmark {
	font-size: var(--cmk-fs-xl);
	margin-bottom: var(--cmk-space-2xs);
}

.cmk-footer-brand p {
	font-size: var(--cmk-fs-sm);
	max-width: 34ch;
}

/* Social row */
.cmk-footer-social,
.cmk-social {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cmk-space-2xs);
	list-style: none;
	margin: var(--cmk-space-sm) 0 0;
	padding: 0;
}

.cmk-social li {
	margin: 0;
	padding: 0;
	border: 0;
}

.cmk-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 0.75em;
	font-family: var(--cmk-font-condensed);
	font-size: var(--cmk-fs-sm);
	font-weight: var(--cmk-fw-semibold);
	text-transform: uppercase;
	letter-spacing: var(--cmk-ls-wide);
	color: var(--cmk-color-on-dark);
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: var(--cmk-radius);
	text-decoration: none;
	transition: background-color var(--cmk-dur-fast) var(--cmk-ease),
		border-color var(--cmk-dur-fast) var(--cmk-ease);
}

.cmk-social a:hover {
	background: var(--cmk-orange);
	border-color: var(--cmk-orange);
	color: var(--cmk-white);
}

/* Copyright bar */
.cmk-footer-bottom,
.ast-small-footer {
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	font-family: var(--cmk-font-condensed);
	font-size: var(--cmk-fs-sm);
	letter-spacing: var(--cmk-ls-wide);
	text-transform: uppercase;
	color: rgba(238, 241, 244, 0.62);
}

.cmk-footer-bottom__inner {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cmk-space-2xs) var(--cmk-space-md);
	align-items: center;
	justify-content: space-between;
	max-width: var(--cmk-wide-width);
	margin-inline: auto;
	padding: var(--cmk-space-md) var(--cmk-gutter);
}

.cmk-footer-bottom ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cmk-space-sm);
	list-style: none;
	margin: 0;
	padding: 0;
}

/* When no footer widgets are active, tighten the copyright bar. */
body.cmk-no-footer-widgets .cmk-footer-bottom__inner {
	padding-block: var(--cmk-space-lg);
}

/* ==========================================================================
   20. FORMS
   ========================================================================== */

label,
.wpforms-field-label,
.gfield_label,
.wpcf7-form label {
	display: block;
	font-family: var(--cmk-font-condensed);
	font-size: var(--cmk-fs-sm);
	font-weight: var(--cmk-fw-semibold);
	text-transform: uppercase;
	letter-spacing: var(--cmk-ls-wide);
	color: var(--cmk-graphite);
	margin-bottom: var(--cmk-space-3xs);
}

.required,
.gfield_required,
.wpforms-required-label {
	color: var(--cmk-orange-ink);
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="date"],
input[type="time"],
select,
textarea,
.wpforms-field input,
.wpforms-field textarea,
.wpforms-field select,
.wpcf7-form-control:not(.wpcf7-submit):not([type="checkbox"]):not([type="radio"]),
.gform_wrapper input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.gform_wrapper textarea,
.gform_wrapper select {
	width: 100%;
	min-height: 44px;
	padding: 0.65em 0.85em;
	font-family: var(--cmk-font-body);
	font-size: var(--cmk-fs-base);
	line-height: var(--cmk-lh-normal);
	color: var(--cmk-color-body);
	background: var(--cmk-white);
	border: 1px solid var(--cmk-border-strong);
	border-radius: var(--cmk-radius);
	transition: border-color var(--cmk-dur-fast) var(--cmk-ease),
		box-shadow var(--cmk-dur-fast) var(--cmk-ease);
}

textarea,
.wpforms-field textarea,
.gform_wrapper textarea {
	min-height: 150px;
	resize: vertical;
}

select {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 2.2em;
	background-image:
		linear-gradient(45deg, transparent 50%, var(--cmk-graphite) 50%),
		linear-gradient(135deg, var(--cmk-graphite) 50%, transparent 50%);
	background-position:
		calc(100% - 1.15em) 50%,
		calc(100% - 0.8em) 50%;
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
}

input:focus,
select:focus,
textarea:focus {
	outline: none;
	border-color: var(--cmk-orange);
	box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.22);
}

input::placeholder,
textarea::placeholder {
	color: #8b949d;
	opacity: 1;
}

input[aria-invalid="true"],
.wpforms-error,
.gfield_error input,
.wpcf7-not-valid {
	border-color: var(--cmk-status-maintenance);
	box-shadow: 0 0 0 3px rgba(142, 47, 26, 0.14);
}

/* Checkbox & radio — square graphite boxes with an orange fill. */
input[type="checkbox"],
input[type="radio"] {
	appearance: none;
	-webkit-appearance: none;
	width: 20px;
	height: 20px;
	min-height: 20px;
	margin: 0 0.5em 0 0;
	padding: 0;
	vertical-align: -0.25em;
	background: var(--cmk-white);
	border: 1px solid var(--cmk-border-strong);
	border-radius: var(--cmk-radius-sm);
	cursor: pointer;
	transition: background-color var(--cmk-dur-fast) var(--cmk-ease),
		border-color var(--cmk-dur-fast) var(--cmk-ease);
}

input[type="radio"] {
	border-radius: 50%;
}

input[type="checkbox"]:checked,
input[type="radio"]:checked {
	background: var(--cmk-orange);
	border-color: var(--cmk-orange);
}

input[type="checkbox"]:checked::after {
	content: "";
	display: block;
	width: 10px;
	height: 5px;
	margin: 4px auto 0;
	border-left: 2px solid var(--cmk-white);
	border-bottom: 2px solid var(--cmk-white);
	transform: rotate(-45deg);
}

input[type="radio"]:checked::after {
	content: "";
	display: block;
	width: 8px;
	height: 8px;
	margin: 5px auto;
	border-radius: 50%;
	background: var(--cmk-white);
}

/* Inline checkbox / radio labels are not shop labels — keep them readable. */
.wpforms-field-checkbox label,
.wpforms-field-radio label,
.gfield_checkbox label,
.gfield_radio label,
.wpcf7-list-item-label,
.comment-form-cookies-consent label {
	display: inline;
	font-family: var(--cmk-font-body);
	font-size: var(--cmk-fs-sm);
	font-weight: var(--cmk-fw-regular);
	text-transform: none;
	letter-spacing: 0;
	color: var(--cmk-color-body);
}

.cmk-form-row {
	display: grid;
	gap: var(--cmk-space-sm);
	margin-bottom: var(--cmk-space-sm);
}

.cmk-form-note,
.comment-notes,
.wpforms-field-description,
.gfield_description,
.form-submit + p {
	font-size: var(--cmk-fs-sm);
	color: var(--cmk-color-muted);
}

/* Third-party form wrappers get our spacing rhythm. */
.wpforms-container .wpforms-field,
.gform_wrapper .gfield,
.wpcf7-form p {
	margin-bottom: var(--cmk-space-sm);
}

.wpforms-submit-container,
.gform_footer,
.wpcf7-form .wpcf7-submit {
	margin-top: var(--cmk-space-md);
}

.wpforms-submit,
.gform_button,
.wpcf7-submit {
	background: var(--cmk-orange) !important;
	color: var(--cmk-white) !important;
	border-radius: var(--cmk-radius) !important;
}

.wpforms-submit:hover,
.gform_button:hover,
.wpcf7-submit:hover {
	background: var(--cmk-orange-dark) !important;
}

.wpcf7-response-output {
	border: 1px solid var(--cmk-border-strong) !important;
	border-left: 3px solid var(--cmk-orange) !important;
	border-radius: var(--cmk-radius);
	background: var(--cmk-concrete);
	font-size: var(--cmk-fs-sm);
	padding: var(--cmk-space-sm) var(--cmk-space-md) !important;
	margin: var(--cmk-space-md) 0 0 !important;
}

/* Search form */
.search-form,
.wp-block-search__inside-wrapper {
	display: flex;
	gap: var(--cmk-space-2xs);
	align-items: stretch;
}

.search-form label,
.wp-block-search__label {
	flex: 1 1 auto;
	margin: 0;
}

.search-form .search-field,
.wp-block-search__input {
	border-radius: var(--cmk-radius);
}

.search-form input[type="submit"],
.wp-block-search__button {
	flex: 0 0 auto;
	margin: 0;
}

/* Newsletter sign-up strip. */
.cmk-signup {
	display: grid;
	gap: var(--cmk-space-sm);
	padding: var(--cmk-space-lg);
	background: var(--cmk-concrete);
	border: 1px solid var(--cmk-border);
	border-radius: var(--cmk-radius);
}

/* ==========================================================================
   21. SCROLL REVEAL & MOTION
   ========================================================================== */

.cmk-reveal {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity var(--cmk-dur-slow) var(--cmk-ease),
		transform var(--cmk-dur-slow) var(--cmk-ease);
	will-change: opacity, transform;
}

.cmk-reveal.is-visible {
	opacity: 1;
	transform: none;
}

.cmk-reveal--delay-1 { transition-delay: 80ms; }
.cmk-reveal--delay-2 { transition-delay: 160ms; }
.cmk-reveal--delay-3 { transition-delay: 240ms; }
.cmk-reveal--delay-4 { transition-delay: 320ms; }

/* Horizontal variants for side-by-side layouts. */
.cmk-reveal--left {
	transform: translateX(-24px);
}

.cmk-reveal--right {
	transform: translateX(24px);
}

.cmk-reveal--left.is-visible,
.cmk-reveal--right.is-visible {
	transform: none;
}

/* If JS never runs, content must never stay hidden. */
.no-js .cmk-reveal,
html:not(.js) .cmk-reveal {
	opacity: 1;
	transform: none;
}

/* ==========================================================================
   22. ACCESSIBILITY & FOCUS
   ========================================================================== */

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

.skip-link:focus,
.screen-reader-text:focus {
	position: fixed !important;
	top: var(--cmk-space-2xs);
	left: var(--cmk-space-2xs);
	z-index: 100000;
	width: auto;
	height: auto;
	clip: auto;
	clip-path: none;
	padding: var(--cmk-space-2xs) var(--cmk-space-sm);
	background: var(--cmk-orange);
	color: var(--cmk-white);
	font-family: var(--cmk-font-condensed);
	font-size: var(--cmk-fs-md);
	font-weight: var(--cmk-fw-bold);
	text-transform: uppercase;
	letter-spacing: var(--cmk-ls-wide);
	border-radius: var(--cmk-radius);
	text-decoration: none;
}

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

/* On orange surfaces the ring flips to graphite so it stays visible. */
.cmk-button--primary:focus-visible,
.cmk-filter[aria-pressed="true"]:focus-visible,
.main-header-menu > li.cmk-nav-cta > a:focus-visible,
.skip-link:focus-visible {
	outline-color: var(--cmk-graphite);
}

.cmk-section--graphite :focus-visible,
.site-footer :focus-visible {
	outline-color: var(--cmk-orange-bright);
}

/* Never remove focus rings for keyboard users. */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
input:focus:not(:focus-visible) {
	outline: none;
}

/* All interactive targets clear 44 × 44. */
.cmk-button,
.cmk-filter,
.cmk-nav-toggle,
.cmk-social a,
.ast-pagination .page-numbers {
	min-height: 44px;
}

/* Honour forced-colours / high-contrast mode. */
@media (forced-colors: active) {
	.cmk-status,
	.cmk-filter,
	.cmk-tag,
	.cmk-tool,
	.cmk-tier,
	.cmk-project {
		border: 1px solid CanvasText;
	}

	.cmk-status__dot {
		background: CanvasText;
	}

	.cmk-project::after,
	.cmk-tool::before {
		forced-color-adjust: none;
	}
}

/* ==========================================================================
   23. RESPONSIVE BREAKPOINTS — mobile-first
   ========================================================================== */

/* --- 768px and up: tablet ------------------------------------------------ */
@media (min-width: 768px) {
	:root {
		--cmk-gutter: 2rem;
		--cmk-grid-size: 56px;
	}

	.cmk-section {
		padding-block: var(--cmk-space-3xl);
	}

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

	.cmk-hero {
		padding-block: var(--cmk-space-3xl);
	}

	.cmk-grid--2,
	.cmk-equipment__grid,
	.cmk-projects,
	.blog .site-main > .ast-row,
	.archive .site-main > .ast-row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.cmk-tiers {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.cmk-stats {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

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

	/* Calendar becomes a table-like row: date · body · meta · seats · CTA. */
	.cmk-class {
		grid-template-columns: auto minmax(0, 1fr) auto;
		grid-template-areas:
			"date body seats"
			"date meta cta";
		align-items: center;
		gap: var(--cmk-space-2xs) var(--cmk-space-lg);
		padding-block: var(--cmk-space-md);
	}

	.cmk-class__seats {
		justify-self: end;
	}

	.cmk-class__cta {
		grid-area: cta;
		justify-self: end;
	}

	.cmk-class__date {
		min-width: 80px;
		padding: var(--cmk-space-xs);
	}

	.cmk-form-row--2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.cmk-footer-widgets {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--cmk-space-xl);
	}

	.post-navigation,
	.ast-single-post-navigation {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.cmk-member {
		align-items: center;
		text-align: center;
	}

	.cmk-member__skills {
		justify-content: center;
	}

	.cmk-signup {
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: end;
	}

	.cmk-nav-toggle {
		display: inline-flex;
	}
}

/* --- 1024px and up: desktop --------------------------------------------- */
@media (min-width: 1024px) {
	:root {
		--cmk-header-h: 92px;
	}

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

	.cmk-grid--4,
	.cmk-members {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

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

	/* Featured tier lifts clear of its neighbours. */
	.cmk-tier--featured {
		transform: translateY(-14px);
		padding-bottom: calc(var(--cmk-space-md) + 14px);
	}

	.cmk-tier--featured:hover {
		transform: translateY(-18px);
	}

	/* Masonry-ish emphasis on the project grid. */
	.cmk-project--wide {
		grid-column: span 2;
	}

	.cmk-project--wide .cmk-project__media {
		aspect-ratio: 16 / 9;
	}

	.cmk-hero__inner {
		display: grid;
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
		gap: var(--cmk-space-2xl);
		align-items: center;
	}

	.cmk-hero--stacked .cmk-hero__inner {
		display: block;
	}

	.cmk-hero__aside {
		margin-top: 0;
	}

	/* Filters sit alongside the live count on wide screens. */
	.cmk-equipment__toolbar {
		display: flex;
		flex-wrap: wrap;
		gap: var(--cmk-space-md);
		align-items: center;
		justify-content: space-between;
		padding-bottom: var(--cmk-space-md);
		margin-bottom: var(--cmk-space-lg);
		border-bottom: 1px solid var(--cmk-border);
	}

	.cmk-equipment__filters,
	.cmk-equipment__count {
		margin-bottom: 0;
	}

	/* Calendar gains a dedicated meta column. */
	.cmk-class {
		grid-template-columns: auto minmax(0, 2.2fr) minmax(0, 1.4fr) auto auto;
		grid-template-areas: "date body meta seats cta";
		gap: var(--cmk-space-lg);
	}

	.cmk-class__meta {
		margin-top: 0;
		flex-direction: column;
		align-items: flex-start;
		gap: var(--cmk-space-3xs);
	}

	.cmk-class__meta li + li::before {
		display: none;
	}

	.cmk-footer-widgets {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.cmk-tool__spec {
		font-size: var(--cmk-fs-sm);
	}

	.sidebar-main {
		position: sticky;
		top: calc(var(--cmk-header-h-shrunk) + var(--cmk-space-md));
	}

	/* Hide the mobile affordances once the full menu fits. */
	.cmk-nav-toggle {
		display: none;
	}

	.cmk-mobile-nav {
		display: none !important;
	}
}

/* --- 1280px and up: comfortable gutters --------------------------------- */
@media (min-width: 1280px) {
	:root {
		--cmk-gutter: 2.5rem;
	}

	.cmk-hero__title {
		max-width: 18ch;
	}
}

/* --- Small phones ------------------------------------------------------- */
@media (max-width: 400px) {
	:root {
		--cmk-gutter: 1rem;
		--cmk-grid-size: 40px;
	}

	.cmk-stats {
		grid-template-columns: 1fr;
	}

	.cmk-members {
		grid-template-columns: 1fr;
	}

	.cmk-filter {
		font-size: var(--cmk-fs-xs);
		padding-inline: 0.8em;
	}

	.cmk-class__date {
		min-width: 60px;
	}
}

/* ==========================================================================
   24. REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	.cmk-reveal {
		opacity: 1 !important;
		transform: none !important;
	}

	/* No hover lifts or zooms. */
	.cmk-card:hover,
	.cmk-tool:hover,
	.cmk-tier:hover,
	.cmk-project:hover,
	.cmk-button:hover,
	.blog .ast-article-post:hover,
	.archive .ast-article-post:hover {
		transform: none !important;
	}

	.cmk-tool:hover .cmk-tool__media img,
	.ast-article-post:hover .post-thumb img {
		transform: none !important;
	}

	/* Project shots resolve to full colour immediately — no motion cue. */
	.cmk-project__media img {
		filter: none !important;
		transform: none !important;
	}

	.cmk-project::after,
	.cmk-project:hover::after {
		width: 30px !important;
		height: 30px !important;
	}

	.cmk-class__seats--low::before {
		animation: none !important;
	}

	.cmk-tier--featured {
		transform: none !important;
	}
}

/* ==========================================================================
   25. PRINT
   ========================================================================== */

@media print {
	.site-header,
	.site-footer,
	.sidebar-main,
	.cmk-nav-toggle,
	.cmk-mobile-nav,
	.cmk-utility-bar,
	.cmk-equipment__filters,
	.cmk-equipment__count,
	.comments-area,
	.cmk-hero::before,
	.post-navigation {
		display: none !important;
	}

	body {
		color: #000;
		background: #fff;
		font-size: 11pt;
		line-height: 1.45;
	}

	h1, h2, h3, h4 {
		color: #000;
		page-break-after: avoid;
	}

	a {
		color: #000;
		text-decoration: underline;
	}

	a[href^="http"]::after {
		content: " (" attr(href) ")";
		font-size: 8.5pt;
		word-break: break-all;
	}

	/* Keep the inventory readable on paper: statuses print as labelled text
	   with a hairline box, and cards never split across pages. */
	.cmk-tool,
	.cmk-tier,
	.cmk-project,
	.cmk-class,
	.cmk-member {
		break-inside: avoid;
		page-break-inside: avoid;
		border: 1px solid #999 !important;
		box-shadow: none !important;
		transform: none !important;
	}

	.cmk-status {
		border: 1px solid #000 !important;
		background: none !important;
		color: #000 !important;
	}

	.cmk-status__dot {
		background: #000 !important;
	}

	.cmk-project__media img {
		filter: none !important;
	}

	.cmk-equipment__grid,
	.cmk-projects,
	.cmk-members,
	.cmk-tiers {
		display: block !important;
	}

	.cmk-texture-grid::before,
	.cmk-fasteners::before,
	.cmk-fasteners::after {
		display: none !important;
	}

	.cmk-reveal {
		opacity: 1 !important;
		transform: none !important;
	}
}