/* =========================================================================
   The Mitesh — Design System v1
   -------------------------------------------------------------------------
   The approved design is drawn on an 1800px canvas. Rather than freeze it at
   one width, the root font-size is set to 16/1800 of the viewport (see
   mitesh_canvas_scale() in functions.php), so 1rem === 1/16th of a canvas
   unit. Every value below is the design's px figure divided by 16, which
   means the page is pixel-identical to the design at 1800px and scales in
   exact proportion at every width down to 1024px. Below that the root
   returns to 16px and the responsive block at the end of this file takes
   over with the rules the design system specifies for mobile.
   ========================================================================= */

/* Product listing images use square corners at every viewport. */
body.mitesh .m-tilecard .m-tile--listing,
body.mitesh .m-card .m-card__crop,
body.mitesh .m-card .m-tile--card {
	border-radius: 0;
	overflow: hidden;
}

/* ---------- 01 · Fonts ---------------------------------------------------- */

@font-face {
	font-family: 'Jost';
	font-style: normal;
	font-weight: 300 500;
	font-display: swap;
	src: url('../fonts/jost-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Jost';
	font-style: normal;
	font-weight: 300 500;
	font-display: swap;
	src: url('../fonts/jost-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'Jost';
	font-style: italic;
	font-weight: 300 500;
	font-display: swap;
	src: url('../fonts/jost-italic-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Jost';
	font-style: italic;
	font-weight: 300 500;
	font-display: swap;
	src: url('../fonts/jost-italic-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/*
 * Fraunces, the one serif on the site, and only for the closing band. Served
 * from assets/fonts like everything else — no third-party request. Variable on
 * the optical-size axis, so at 44px it resolves to the display cut rather than
 * a text face scaled up. SIL Open Font License.
 */
/*
 * DM Sans, for the footer and the drawer. Wider apertures and a taller x-height
 * than Jost, so at the same size it reads noticeably larger — which is the
 * point down here, where the type is small and the light is low.
 * SIL Open Font License.
 */
@font-face {
	font-family: 'DM Sans';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url('../fonts/dmsans-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'DM Sans';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url('../fonts/dmsans-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'Fraunces';
	font-style: normal;
	font-weight: 200 300;
	font-display: swap;
	src: url('../fonts/fraunces-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Fraunces';
	font-style: normal;
	font-weight: 200 300;
	font-display: swap;
	src: url('../fonts/fraunces-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'Tiro Devanagari Hindi';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/tiro-devanagari.woff2') format('woff2');
	unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}

/* ---------- 02 · Tokens --------------------------------------------------- */

:root {
	/* Light surface — the default. Black and white, no warmth. */
	--m-ground: #ffffff;
	--m-ink: #000000;
	--m-body: #000000;
	--m-label: #808080;
	--m-hairline: #e5e5e5;
	--m-hairline-soft: #d9d9d9;

	/* Dark surface — story blocks and footer. */
	--m-dark: #000000;
	--m-dark-head: #ffffff;
	--m-dark-body: #b3b3b3;
	--m-dark-label: #808080;
	--m-dark-hairline: #333333;
	--m-dark-tile: #1a1a1a;
	--m-dark-link: #e5e5e5;

	/* Image placeholders — neutral greys. */
	--m-tint: #f2f2f2;
	--m-tint-ink: #999999;
	--m-band: #8c8c8c;
	--m-band-ink: #d9d9d9;
	--m-field-ink: #999999;

	/* Every portrait crop is 2:3. */
	--m-crop: 2 / 3;

	--m-sans: 'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--m-display: 'Fraunces', Georgia, 'Times New Roman', serif;
	--m-text-sans: 'DM Sans', 'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--m-script: 'Jost';
	--m-deva: 'Tiro Devanagari Hindi', Georgia, serif;

	--m-gutter: 4rem;          /* 64px */
	--m-header-h: 7.6875rem;   /* 123px — JS refines this to the measured value */
	--m-ease: cubic-bezier(.2, .7, .2, 1);
}

/* ---------- 03 · Base ----------------------------------------------------- */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

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

body {
	margin: 0;
	background: var(--m-ground);
	color: var(--m-ink);
	font: 400 1rem/1.75 var(--m-sans);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

a {
	color: inherit;
	text-decoration: none;
}

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

h1, h2, h3, h4, h5, h6, p, figure, blockquote {
	margin: 0;
}

ul, ol {
	margin: 0;
}

button {
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
}

input,
textarea,
select {
	font: inherit;
	color: inherit;
}

/*
 * Chrome paints its own clear button inside a type="search" field as soon as
 * there is text in it — a blue cross that duplicates the theme's close control
 * and is the only piece of colour on the page. The design has no accent colour
 * and no second cross, so suppress it everywhere.
 */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
	-webkit-appearance: none;
	appearance: none;
	display: none;
}

:focus-visible {
	outline: 1px solid var(--m-ink);
	outline-offset: 3px;
}

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

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	background: var(--m-ink);
	color: var(--m-ground);
	padding: 1rem 1.5rem;
	font: 500 .78125rem/1 var(--m-sans);
	letter-spacing: .26em;
	text-transform: uppercase;
}

.skip-link:focus {
	left: 0;
}

/* The page wrapper clips the oversized footer wordmark. `clip` rather than
   `hidden` so it never creates a scroll container. */
.m-page {
	overflow-x: clip;
	max-width: var(--m-canvas, 1800px);
	margin: 0 auto;
	background: var(--m-ground);
}

/* ---------- 04 · Type utilities ------------------------------------------- */

.m-eyebrow {
	font: 500 .75rem/1 var(--m-sans);
	letter-spacing: .3em;
	text-transform: uppercase;
	color: var(--m-label);
	margin-bottom: 1.25rem;
}

.m-eyebrow--lg {
	font-size: .8125rem;
}

.m-h2 {
	margin: 0;
	font: 300 2.75rem/1.1 var(--m-sans);
	letter-spacing: .01em;
	color: var(--m-ink);
}

.m-h3 {
	margin: 0;
	font: 400 1.4375rem/1.2 var(--m-sans);
}

.m-script {
	font-family: var(--m-script);
	font-weight: 400;
	line-height: .9;
}

.m-copy {
	font: 400 1.125rem/1.75 var(--m-sans);
	color: var(--m-body);
	max-width: 35rem;
	text-wrap: pretty;
}

/* Underlined caps — the default link on desktop. */
.m-link {
	display: inline-block;
	font: 500 .78125rem/1 var(--m-sans);
	letter-spacing: .26em;
	text-transform: uppercase;
	color: var(--m-label);
	border-bottom: 1px solid var(--m-hairline-soft);
	padding-bottom: .4375rem;
	transition: color .3s, border-color .3s;
	white-space: nowrap;
}

.m-link:hover,
.m-link:focus-visible {
	color: var(--m-ink);
	border-color: var(--m-ink);
}

.m-link--lg {
	font-size: .8125rem;
}

.m-cta {
	display: inline-block;
	font: 500 .78125rem/1 var(--m-sans);
	letter-spacing: .26em;
	text-transform: uppercase;
	color: var(--m-ink);
	border-bottom: 1px solid var(--m-ink);
	padding-bottom: .375rem;
	white-space: nowrap;
	cursor: pointer;
	transition: opacity .3s;
}

.m-cta:hover {
	opacity: .62;
}

.m-cta--muted {
	color: var(--m-label);
	border-color: var(--m-hairline-soft);
}

/* Filled and outlined blocks — the dark story band and mobile. */
.m-btn {
	display: inline-block;
	background: var(--m-ink);
	color: var(--m-ground);
	padding: 1rem 1.75rem;
	font: 500 .78125rem/1 var(--m-sans);
	letter-spacing: .26em;
	text-transform: uppercase;
}

.m-btn--ghost {
	background: none;
	border: 1px solid var(--m-hairline-soft);
	color: var(--m-ink);
	transition: border-color .3s;
}

.m-btn--ghost:hover {
	border-color: var(--m-ink);
}

.m-rule {
	flex: 1;
	height: 1px;
	background: var(--m-hairline);
}

/* ---------- 05 · Section header ------------------------------------------- */

.m-sechead {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 3.5rem;
	border-top: 1px solid var(--m-hairline);
	padding-top: 2.125rem;
	margin-bottom: 3.5rem;
}

.m-sechead--norule {
	border-top: 0;
	padding-top: 0;
	margin-bottom: 3.25rem;
}

.m-sechead__lead .m-eyebrow {
	margin-bottom: 1.25rem;
}

.m-sechead__aside {
	font: 400 1.125rem/1.75 var(--m-sans);
	color: var(--m-body);
	max-width: 18.125rem;
	text-align: right;
}

.m-sechead--centre {
	display: block;
	text-align: center;
	border-top: 0;
	padding-top: 0;
	margin-bottom: 3.375rem;
}

.m-sechead__note {
	margin: 1.25rem auto 0;
	font: 400 1.125rem/1.75 var(--m-sans);
	color: var(--m-body);
	max-width: 26.25rem;
}

/* ---------- 06 · Spec list ------------------------------------------------ */

.m-spec {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: .875rem 1.75rem;
	font: 400 1.125rem/1.55 var(--m-sans);
	color: var(--m-ink);
}

.m-spec__k {
	font-size: .75rem;
	font-weight: 500;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--m-label);
	padding-top: .125rem;
}

/* ---------- 07 · Image tile ----------------------------------------------- */

.m-tile {
	overflow: hidden;
	background: var(--m-tint);
	position: relative;
}

.m-tile__inner {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .8s var(--m-ease);
}

.m-tile__inner--empty {
	display: flex;
	align-items: center;
	justify-content: center;
}

.m-tile__label {
	font: 500 .78125rem/1 var(--m-sans);
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--m-tint-ink);
	text-align: center;
	padding: 1rem;
}

[data-hover]:hover .m-tile__inner {
	transform: scale(1.045);
}

@media (prefers-reduced-motion: reduce) {
	[data-hover]:hover .m-tile__inner {
		transform: none;
	}
}

/* ---------- 08 · Header --------------------------------------------------- */

.m-header {
	position: sticky;
	top: 0;
	z-index: 30;
	color: var(--m-ink);
	/*
	 * Opaque, not .94. The closing band is 35px display serif and it passes
	 * under this header on the way to the footer; at any transparency the
	 * letters ghost through and read as the two things colliding.
	 */
	background: var(--m-ground);
	backdrop-filter: saturate(140%) blur(10px);
	border-bottom: 1px solid var(--m-hairline);
	transition: background-color .45s ease, color .45s ease, border-color .45s ease, backdrop-filter .45s ease;
}

.has-overlay-header .m-header {
	position: fixed;
	left: 0;
	right: 0;
	color: #fff;
	background: transparent;
	backdrop-filter: none;
	border-bottom-color: rgba(255, 255, 255, .22);
}

.has-overlay-header .m-header.is-solid {
	color: var(--m-ink);
	background: var(--m-ground);
	backdrop-filter: saturate(140%) blur(10px);
	border-bottom-color: var(--m-hairline);
}

/*
 * Pages without the hero have no point to collapse the announcement at, so it
 * scrolls away instead: the header sticks with its top pulled up by exactly
 * the announcement's height (measured in mitesh.js), leaving the nav row on
 * the edge of the screen. Collapsing it in place would shrink an in-flow
 * header and jerk the page up by the same amount; this moves nothing. Without
 * script the variable is unset and the header sticks whole, as before.
 */
body:not(.has-overlay-header) .m-header {
	top: calc(-1 * var(--m-announce-h, 0px));
}

.m-announce {
	overflow: hidden;
	text-align: center;
	padding: .8125rem 0;
	font: 500 .75rem/1 var(--m-sans);
	letter-spacing: .3em;
	text-transform: uppercase;
	color: inherit;
	opacity: .72;
	max-height: 2.625rem;
	/*
	 * A hairline between the announcement and the nav row, drawn as a
	 * background rather than a border so it can stop short of the edges: it
	 * runs the width of the nav row's content, the start of the first
	 * category to the end of the bag icon, by taking the same gutter off each
	 * side that the row pads in by. Mixed from currentColor so it follows the
	 * header — faint grey under ink text, faint white while the header floats
	 * over the homepage hero — with a fixed grey for browsers without
	 * color-mix(). When the bar collapses to zero height the line goes with
	 * it; a background has nowhere to paint in an empty box.
	 */
	background-image: linear-gradient(var(--m-hairline), var(--m-hairline));
	background-image: linear-gradient(
		color-mix(in srgb, currentColor 16%, transparent),
		color-mix(in srgb, currentColor 16%, transparent)
	);
	background-repeat: no-repeat;
	background-position: center bottom;
	background-size: calc(100% - 2 * var(--m-gutter)) 1px;
	transition: max-height .45s ease, opacity .35s ease, padding .45s ease;
}

.m-header.is-solid .m-announce {
	max-height: 0;
	padding-top: 0;
	padding-bottom: 0;
	opacity: 0;
}

/* The bar itself is full-bleed, but its contents stay on the canvas so the
   nav keeps the same gutters as the page above 1800px. */
.m-announce,
.m-header__row {
	max-width: var(--m-canvas, 1800px);
	margin-left: auto;
	margin-right: auto;
}

.m-header__row {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	padding: 1.625rem var(--m-gutter) 1.5rem;
	color: inherit;
}

.m-nav__list {
	display: flex;
	gap: 2.125rem;
	list-style: none;
	margin: 0;
	padding: 0;
	font: 500 .78125rem/1 var(--m-sans);
	letter-spacing: .24em;
	text-transform: uppercase;
	color: inherit;
}

.m-nav__list a {
	transition: opacity .3s;
}

.m-nav__list a:hover {
	opacity: .62;
}

.m-wordmark {
	text-align: center;
	font: 300 1.45rem/1 var(--m-sans);
	letter-spacing: .44em;
	/* letter-spacing also applies after the last glyph, which would push the
	   wordmark off true centre; take that trailing space back out. */
	margin-right: -.44em;
	text-transform: uppercase;
	color: inherit;
	white-space: nowrap;
}

.m-wordmark img {
	display: inline-block;
	max-height: 2rem;
	width: auto;
}

.m-utils {
	display: flex;
	gap: 1.375rem;
	justify-content: flex-end;
	align-items: center;
	color: inherit;
}

.m-utils__item {
	display: grid;
	width: 2.125rem;
	height: 2.125rem;
	place-items: center;
	color: inherit;
	position: relative;
}

.m-utils svg {
	width: 1.3125rem;
	height: 1.3125rem;
}

/* No boxes anywhere, so the count is set type, not a badge. */
.m-cart-count {
	position: absolute;
	right: -.375rem;
	top: 0;
	font: 500 .625rem/1 var(--m-sans);
	letter-spacing: .02em;
	color: inherit;
}

.m-cart-count.is-empty {
	display: none;
}

.m-burger {
	display: none;
	position: relative;
	width: 1.5rem;
	height: 1.5rem;
}

.m-burger span {
	position: absolute;
	left: .1875rem;
	width: 1.3125rem;
	height: 1px;
	background: currentColor;
	transition: transform .3s ease, opacity .3s ease;
}

.m-burger span:first-child {
	top: .5rem;
}

.m-burger span:last-child {
	top: .9375rem;
}

/* ---------- 09 · Search overlay & mobile drawer --------------------------- */

.m-overlay__close {
	align-self: flex-end;
	display: grid;
	width: 2.75rem;
	height: 2.75rem;
	place-items: center;
}

.m-overlay__close svg {
	width: 1.5rem;
	height: 1.5rem;
}

/* ---------- 10 · Hero ----------------------------------------------------- */

.m-hero {
	position: relative;
	height: 100vh;
	min-height: 20rem;
	background: var(--m-band);
	overflow: hidden;
}

.m-hero__media,
.m-hero__media img,
.m-hero__media video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.m-hero__ph {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: flex-end;
	padding: 1.375rem;
	font: 500 .78125rem/1 var(--m-sans);
	letter-spacing: .26em;
	text-transform: uppercase;
	color: var(--m-band-ink);
}

.m-hero__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, rgba(20, 19, 17, .34), rgba(20, 19, 17, .02) 26%, rgba(20, 19, 17, .06) 55%, rgba(20, 19, 17, .46));
}

.m-hero__copy {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 4.625rem;
	text-align: center;
	color: #fff;
	padding: 0 var(--m-gutter);
}

.m-hero__eyebrow {
	font: 500 .75rem/1 var(--m-sans);
	letter-spacing: .34em;
	text-transform: uppercase;
	opacity: .85;
	margin-bottom: 1.625rem;
}

.m-hero__title {
	font: 300 70px var(--m-script);
	letter-spacing: .01em;
}

.m-hero__cta {
	display: inline-block;
	margin-top: 2.125rem;
	font: 500 .78125rem/1 var(--m-sans);
	letter-spacing: .28em;
	text-transform: uppercase;
	color: #fff;
	border-bottom: 1px solid rgba(255, 255, 255, .6);
	padding-bottom: .4375rem;
	transition: border-color .3s;
}

.m-hero__cta:hover {
	border-color: #fff;
}

/* ---------- 11 · Marquee -------------------------------------------------- */

.m-marquee {
	min-width: 0;
	overflow: hidden;
	padding: 1.375rem 0;
	border-bottom: 1px solid var(--m-hairline);
}

.m-marquee__track {
	display: flex;
	white-space: nowrap;
	animation: m-mq 90s linear infinite;
	font: 500 .75rem/1 var(--m-sans);
	letter-spacing: .36em;
	text-transform: uppercase;
	color: var(--m-label);
}

@keyframes m-mq {
	to {
		transform: translateX(-50%);
	}
}

@media (prefers-reduced-motion: reduce) {
	.m-marquee__track {
		animation: none;
	}
}

/* ---------- 12 · 01 Collections rail -------------------------------------- */

.m-collections {
	padding: 6.5rem 0 6rem;
}

.m-collections .m-sechead {
	padding-left: var(--m-gutter);
	padding-right: var(--m-gutter);
}

.m-rail {
	display: flex;
	gap: 2.5rem;
	overflow-x: auto;
	padding: 0 var(--m-gutter) .625rem;
	cursor: grab;
	scrollbar-width: none;
	scroll-snap-type: x proximity;
}

.m-rail::-webkit-scrollbar {
	display: none;
}

.m-rail.is-dragging {
	cursor: grabbing;
	scroll-snap-type: none;
}

.m-rail__item {
	flex: none;
	width: 18.5rem;
	scroll-snap-align: start;
}

.m-rail__item .m-tile {
	height: auto;
	aspect-ratio: var(--m-crop);
}

.m-rail__meta {
	padding-top: 1.25rem;
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
}

.m-rail__name {
	font: 400 .75rem/1 var(--m-sans);
	letter-spacing: .24em;
	text-transform: uppercase;
}

.m-rail__count {
	font: 300 .8125rem/1 var(--m-sans);
	letter-spacing: .2em;
	color: var(--m-label);
}

/* ---------- 13 · 02 New arrivals ------------------------------------------ */

.m-new {
	padding: 0 var(--m-gutter) 6.875rem;
}

.m-pair {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4.5rem;
	align-items: start;
}

/* Second column offset downward on editorial pairs. */
.m-pair > :nth-child(2) {
	padding-top: 6.5rem;
}

.m-card__crop {
	display: block;
}

.m-pair > :nth-child(1) .m-tile--card {
	height: auto;
	aspect-ratio: var(--m-crop);
}

.m-pair > :nth-child(2) .m-tile--card {
	height: auto;
	aspect-ratio: var(--m-crop);
}

.m-card__head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1.5rem;
	padding-top: 1.5rem;
}

.m-card__name {
	display: block;
	font: 400 1.4375rem/1 var(--m-sans);
	letter-spacing: .02em;
}

.m-card__material {
	font: 500 .75rem/1 var(--m-sans);
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--m-label);
	margin-top: .75rem;
}

.m-card__price {
	font: 400 1.125rem/1 var(--m-sans);
	letter-spacing: .08em;
	white-space: nowrap;
}

.m-card__price del {
	color: var(--m-label);
	margin-right: .5rem;
}

.m-card__price ins {
	text-decoration: none;
}

.m-card__note {
	margin: 1.5rem 0 0;
	font: 400 1.125rem/1.85 var(--m-sans);
	color: var(--m-body);
	max-width: 23.75rem;
}

.m-card__foot {
	display: flex;
	align-items: center;
	gap: 1.375rem;
	margin-top: 1.5rem;
}

.m-sizes {
	display: flex;
	gap: 1.125rem;
	font: 500 .9375rem/1 var(--m-sans);
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--m-label);
}

.m-sizes__item {
	cursor: pointer;
	padding-bottom: .3125rem;
	border-bottom: 1px solid transparent;
	transition: color .25s, border-color .25s;
}

.m-sizes__item:hover {
	color: var(--m-ink);
	border-color: var(--m-ink);
}

/* ---------- 14 · Featured piece ------------------------------------------- */

.m-band {
	position: relative;
	height: 43.75rem;
	background: var(--m-band);
	overflow: hidden;
}

.m-band__media,
.m-band__media img,
.m-band__media video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.m-band__ph {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
	padding: 1.375rem;
	font: 500 .78125rem/1 var(--m-sans);
	letter-spacing: .26em;
	text-transform: uppercase;
	color: var(--m-band-ink);
}

.m-band__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(20, 19, 17, .45), rgba(20, 19, 17, .04) 58%);
}

.m-band__copy {
	position: absolute;
	left: var(--m-gutter);
	bottom: var(--m-gutter);
	color: #fff;
}

.m-band__eyebrow {
	font: 500 .8125rem/1 var(--m-sans);
	letter-spacing: .32em;
	text-transform: uppercase;
	opacity: .85;
	margin-bottom: 1.375rem;
}

.m-band__title {
	font: 300 3.25rem/1.1 var(--m-sans);
}

.m-detail {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 4.5rem;
	padding: var(--m-gutter) var(--m-gutter) 6.875rem;
	align-items: start;
}

.m-detail .m-tile {
	height: auto;
	aspect-ratio: var(--m-crop);
}

.m-detail__col {
	padding-top: .375rem;
}

.m-detail__title {
	font: 400 1.625rem/1.15 var(--m-sans);
}

.m-detail__col .m-spec {
	margin-top: 1.75rem;
}

.m-detail__buy {
	border-top: 1px solid var(--m-hairline);
	margin-top: 2rem;
	padding-top: 1.375rem;
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1.5rem;
}

.m-detail__price {
	font: 400 1.25rem/1 var(--m-sans);
	letter-spacing: .08em;
}

.m-detail__buy .m-cta {
	font-size: .8125rem;
}

/* ---------- 15 · The making of -------------------------------------------- */

.m-making {
	position: relative;
	height: 41.25rem;
	overflow: hidden;
}

.m-making__media {
	position: absolute;
	inset: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
}

.m-making__half {
	position: relative;
	overflow: hidden;
	background: var(--m-band);
	display: flex;
	align-items: flex-end;
	padding: 1.375rem;
	font: 500 .78125rem/1 var(--m-sans);
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--m-band-ink);
}

.m-making__half:last-child {
	background: #7a7a7a;
	justify-content: flex-end;
	color: #cccccc;
}

.m-making__half img,
.m-making__half video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.m-making__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(20, 19, 17, .4), rgba(20, 19, 17, .12));
}

.m-making__copy {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	color: #fff;
	pointer-events: none;
	padding: 0 var(--m-gutter);
}

.m-making__eyebrow {
	font: 500 .8125rem/1 var(--m-sans);
	letter-spacing: .34em;
	text-transform: uppercase;
	margin-bottom: 1.625rem;
	opacity: .85;
}

.m-making__title {
	font: 300 7rem/.86 var(--m-sans);
	white-space: pre-line;
}

.m-making__foot {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 3.5rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.125rem;
}

.m-making__foot .m-hero__cta {
	margin-top: 0;
}

/* ---------- 16 · Cloth banners -------------------------------------------- */

.m-cloth {
	padding: 0 0 5rem;
}

.m-cloth .m-tile {
	height: 26.25rem;
}

.m-cloth__captions {
	display: flex;
	justify-content: center;
	gap: 3.5rem;
	padding: 1.625rem var(--m-gutter);
	font: 500 .875rem/1 var(--m-sans);
	letter-spacing: .28em;
	text-transform: uppercase;
	color: var(--m-label);
}

/* ---------- 17 · 03 Plates ------------------------------------------------ */

.m-plates {
	padding: 0 var(--m-gutter) 6.875rem;
}

.m-plates__grid {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 3.5rem;
	align-items: start;
}


.m-plates__grid > :nth-child(1) .m-tile {
	height: auto;
	aspect-ratio: var(--m-crop);
}

.m-plates__grid > :nth-child(2) .m-tile {
	height: auto;
	aspect-ratio: var(--m-crop);
}

.m-plates__grid > :nth-child(3) .m-tile {
	height: auto;
	aspect-ratio: var(--m-crop);
}

.m-plate__caption {
	margin: 1.25rem 0 0;
	font: 400 1.125rem/1.75 var(--m-sans);
	color: var(--m-body);
}

.m-plate__n {
	letter-spacing: .2em;
	color: var(--m-label);
}

/* ---------- 18 · 04 Celeb diaries ----------------------------------------- */

.m-diaries {
	padding: 0 var(--m-gutter) 7.25rem;
}

.m-diaries__grid {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 3.5rem;
}

.m-diaries__grid .m-tile {
	height: auto;
	aspect-ratio: var(--m-crop);
}

.m-diary {
	cursor: pointer;
	display: block;
}

.m-diary__name {
	text-align: center;
	padding-top: 1.25rem;
	font: 500 .875rem/1 var(--m-sans);
	letter-spacing: .26em;
	text-transform: uppercase;
}

/* ---------- 19 · Stat row ------------------------------------------------- */

.m-stats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 3.5rem;
	padding: 3.25rem var(--m-gutter) 3.5rem;
	border-top: 1px solid var(--m-hairline);
	border-bottom: 1px solid var(--m-hairline);
}

.m-stat__figure {
	font: 300 2.125rem/1 var(--m-sans);
	letter-spacing: .02em;
}

.m-stat__text {
	margin: 1rem 0 0;
	font: 400 1.125rem/1.75 var(--m-sans);
	color: var(--m-body);
}

/* ---------- 20 · Who we are (dark) ---------------------------------------- */

.m-about {
	background: var(--m-dark);
	color: var(--m-dark-head);
	padding: 7.25rem var(--m-gutter) 6.5rem;
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	gap: 5.5rem;
	align-items: start;
}

.m-about .m-eyebrow {
	color: var(--m-dark-label);
	margin-bottom: 1.75rem;
}

.m-about__title {
	margin: 0 0 1.875rem;
	font: 300 4.375rem/.92 var(--m-sans);
	color: var(--m-dark-head);
	max-width: 41.25rem;
}

.m-about__body {
	margin: 0;
	font: 400 1.25rem/1.9 var(--m-sans);
	color: var(--m-dark-body);
	max-width: 33.75rem;
	text-wrap: pretty;
}

.m-about__links {
	display: flex;
	gap: 2.5rem;
	margin-top: 2.75rem;
	flex-wrap: wrap;
}

.m-about__links a {
	font: 500 .78125rem/1 var(--m-sans);
	letter-spacing: .28em;
	text-transform: uppercase;
	color: var(--m-dark-head);
	border-bottom: 1px solid rgba(255, 255, 255, .5);
	padding-bottom: .4375rem;
	transition: border-color .3s, color .3s;
}

.m-about__links a:hover {
	border-color: var(--m-dark-head);
}

.m-about__links a + a {
	color: var(--m-dark-label);
	border-bottom-color: transparent;
}

.m-about__links a + a:hover {
	color: var(--m-dark-head);
	border-bottom-color: var(--m-dark-head);
}

.m-about .m-tile {
	height: 21.25rem;
	background: var(--m-dark-tile);
}

.m-about .m-tile__label {
	color: #666666;
}

.m-about .m-spec {
	border-top: 1px solid var(--m-dark-hairline);
	margin-top: 2.125rem;
	padding-top: 1.625rem;
	gap: 1.125rem 2rem;
	color: var(--m-dark-head);
}

.m-about .m-spec__k {
	color: var(--m-dark-label);
}

/* ---------- 21 · Press ---------------------------------------------------- */

.m-press {
	padding: 7.25rem var(--m-gutter) 6.5rem;
	text-align: center;
}

/* Back to back, the two section paddings stack into one oversized gap. */
.m-diaries + .m-press {
	padding-top: 0;
}

.m-press__quote {
	margin: 0 auto;
	font: 300 italic 2.0625rem/1.5 var(--m-sans);
	color: var(--m-ink);
	max-width: 53.75rem;
	text-wrap: pretty;
}

.m-press__meta {
	display: flex;
	justify-content: center;
	gap: 1.25rem;
	align-items: center;
	margin-top: 2.125rem;
	font: 500 .75rem/1 var(--m-sans);
	letter-spacing: .28em;
	text-transform: uppercase;
	color: var(--m-label);
}

.m-press__meta strong {
	font-weight: 500;
	color: var(--m-ink);
}

.m-press__dash {
	width: 1.75rem;
	height: 1px;
	background: var(--m-hairline-soft);
}

/* Quotes stack in one cell, so the block holds the tallest and never jumps. */
.m-press__slides {
	display: grid;
}

.m-press__slide {
	grid-area: 1 / 1;
	margin: 0;
}

[data-press] .m-press__slide {
	opacity: 0;
	visibility: hidden;
	transform: translateY(.875rem);
	transition: opacity .6s ease, transform .6s ease, visibility 0s linear .6s;
}

[data-press] .m-press__slide.is-active {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition: opacity .6s ease .15s, transform .6s ease .15s, visibility 0s;
}

.m-press__dots {
	display: flex;
	justify-content: center;
	gap: .75rem;
	margin-top: 2.75rem;
}

.m-press__dot {
	width: 1.75rem;
	height: 1.25rem;
	padding: 0;
	border: 0;
	background: linear-gradient(var(--m-hairline-soft), var(--m-hairline-soft)) center / 100% 1px no-repeat;
	cursor: pointer;
	transition: background-size .4s;
}

.m-press__dot.is-active {
	background-image: linear-gradient(var(--m-ink), var(--m-ink));
}

@media (prefers-reduced-motion: reduce) {
	[data-press] .m-press__slide,
	[data-press] .m-press__slide.is-active {
		transform: none;
		transition: none;
	}
}

.m-press__logos {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 3.25rem;
	margin-top: 4rem;
	padding-top: 2.125rem;
	border-top: 1px solid var(--m-hairline);
	font: 500 .75rem/1 var(--m-sans);
	letter-spacing: .28em;
	text-transform: uppercase;
	color: var(--m-label);
}

/* ---------- 22 · Newsletter ----------------------------------------------- */

.m-newsletter {
	padding: 0 var(--m-gutter) 7.25rem;
}

.m-newsletter__inner {
	border-top: 1px solid var(--m-hairline);
	padding-top: 3.75rem;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 5.5rem;
	align-items: end;
}

.m-newsletter__title {
	margin: 0;
	font: 300 4.75rem/.92 var(--m-sans);
}

.m-newsletter__body {
	margin: 1.25rem 0 0;
	font: 400 1.125rem/1.75 var(--m-sans);
	color: var(--m-body);
	max-width: 26.25rem;
}

.m-subscribe {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	border-bottom: 1px solid var(--m-ink);
	padding-bottom: 1rem;
}

.m-subscribe input[type="email"] {
	flex: 1;
	min-width: 0;
	border: 0;
	background: none;
	font: 400 1.125rem/1 var(--m-sans);
	letter-spacing: .06em;
	padding: 0;
}

.m-subscribe input[type="email"]::placeholder {
	color: var(--m-field-ink);
	opacity: 1;
}

.m-subscribe input[type="email"]:focus {
	outline: none;
}

.m-subscribe button {
	font: 500 .78125rem/1 var(--m-sans);
	letter-spacing: .28em;
	text-transform: uppercase;
	white-space: nowrap;
}

.m-subscribe__msg {
	margin: 1rem 0 0;
	font: 500 .75rem/1.6 var(--m-sans);
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--m-label);
}

/* ---------- 23 · Footer --------------------------------------------------- */

/*
 * DM Sans throughout the footer. The wordmark and the label under it stay on
 * Jost — they are the mark, not body copy — and the Devanagari and the band
 * keep their own faces. Everything else inherits from here rather than being
 * re-declared rule by rule.
 */
.m-footer,
.m-footer input,
.m-footer button,
.m-footer select {
	font-family: var(--m-text-sans);
}

.m-footer__wordmark,
.m-footer__vintage {
	font-family: var(--m-sans);
}

.m-footer {
	background: var(--m-dark);
	color: var(--m-dark-head);
	/* No top padding: the closing band is flush to the edge of the footer. */
	padding: 0 var(--m-gutter) 2.125rem;
	display: flex;
	flex-direction: column;
	/*
	 * The surplus goes to the column block rather than being shared out by
	 * space-between, which used to leave a hundred-odd pixels of nothing under
	 * the lookbook. The block grows, the lookbook is pinned to its foot, and
	 * the air opens above it instead.
	 */
	justify-content: flex-start;
	/*
	 * Header and footer together make exactly one screen: scroll to the bottom
	 * and the footer fills what the header does not. --m-header-h starts at the
	 * design's value and the script replaces it with the measured one, so the
	 * sum stays right whatever the announcement bar is doing. space-between
	 * then opens the surplus between the band, the columns and the bar rather
	 * than leaving it dead at the foot.
	 */
	min-height: calc(100svh - var(--m-header-h));
}

/* Reading size, at the head of its own column — the oversized wordmark that
   spanned the gutters is gone, so nothing here has to be measured to fit. */
.m-footer__wordmark {
	font: 300 1.4375rem/1 var(--m-sans);
	letter-spacing: .28em;
	text-transform: uppercase;
	color: var(--m-dark-head);
	white-space: nowrap;
}

/* Wordmark, label and Devanagari read as one lockup, so the three sit close
   enough to group by eye — the gap above the label stays the larger of the
   two so the label belongs to the word beneath it, not the one above. */
.m-footer__vintage {
	font: 500 .75rem/1 var(--m-sans);
	letter-spacing: .3em;
	text-transform: uppercase;
	color: var(--m-dark-label);
	margin: .875rem 0 .25rem;
}

/* Tiro Devanagari Hindi appears once on the whole site, here. Sized to anchor
   the brand column now that the wordmark above it reads at nav size. */
.m-footer__deva {
	font: 400 2.25rem/1.15 var(--m-deva);
	color: var(--m-dark-head);
}


/*
 * The lockup absorbs the footer's surplus: margin-bottom:auto eats whatever is
 * left over after the band, the columns and the bar have taken their heights,
 * so the air opens here, high in the footer, instead of under the lookbook or
 * shared out between every row. padding-bottom keeps a floor for the case
 * where the content is tall enough that there is no surplus to take.
 */
.m-footer__brand {
	margin-bottom: auto;
	padding-bottom: clamp(2rem, 3.5vw, 3rem);
}

/*
 * Following the reference: four equal link columns grouped by intent, and the
 * signup panel holding a little under a third. Four differently-sized link
 * columns read as an accident rather than a set, so they are kept equal.
 */
.m-footer__cols {
	display: grid;
	/*
	 * The signup track is sized to the form rather than the other way round.
	 * Left it wider and the form ended short of the gutter, which read as more
	 * air on the right of the footer than on the left even though the padding
	 * is symmetric. Fixed at the form's width, the last thing in the row ends
	 * exactly where the first thing in it begins, mirrored.
	 */
	grid-template-columns: repeat(4, minmax(0, 1fr)) 24rem;
	gap: 2.75rem;
	align-items: start;
}

/*
 * The social column only exists once an account is set, so the panel is
 * pinned to the last track rather than left to fall into whichever one is
 * next — otherwise removing a social link drags the signup a column left and
 * opens a hole at the end of the row.
 */
.m-footer__letter {
	grid-column: -2 / -1;
}

/* --- The closing band ---------------------------------------------------
   The loud twin of the marquee under the header. That one is a hairline of
   tracked caps; this one is the season's own words at display size, so the
   page has two matching edges rather than one. Full-bleed, so it cancels the
   footer's gutter, and it reuses the marquee's keyframe and its data-mq hook —
   the speed slider in the Customizer drives both.
   ----------------------------------------------------------------------- */

.m-footer__band {
	margin: 0 calc(-1 * var(--m-gutter)) clamp(3rem, 5vw, 4.25rem);
	padding: 1.5rem 0;
	overflow: hidden;
	border-bottom: 1px solid var(--m-dark-hairline);
	/* Words enter and leave rather than being sliced at the gutter. */
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}

.m-footer__bandTrack {
	display: flex;
	width: max-content;
	white-space: nowrap;
	animation: m-mq 68s linear infinite;
	/* The one place the serif appears. Optical sizing left to the browser, so
	   the 44px setting picks up the display cut's thin hairlines. */
	font: 200 clamp(1.75rem, 3.4vw, 2.75rem)/1.15 var(--m-display);
	font-optical-sizing: auto;
	color: var(--m-dark-head);
	--band-gap: clamp(1.75rem, 3.4vw, 3.5rem);
}

/*
 * Word and separator are each a flex item, so the air between them is set
 * once rather than typed as spaces. The trailing padding matches the gap and
 * the outer track has none, which keeps the two copies exactly half the
 * track apart — otherwise the -50% translate lands half a gap short and the
 * loop visibly ticks once a cycle.
 */
.m-footer__bandTrack > span {
	display: inline-flex;
	align-items: baseline;
	gap: var(--band-gap);
	padding-right: var(--band-gap);
}

.m-footer__bandTrack b {
	font-weight: inherit;
}

/* The separators sit back so the words carry the line. */
.m-footer__bandTrack i {
	font-style: normal;
	color: var(--m-dark-label);
}

@media (prefers-reduced-motion: reduce) {
	.m-footer__bandTrack {
		animation: none;
	}
}

/* --- The letter, in the column the lookbook used to hold ---------------- */

.m-footer__letter {
	min-width: 0;
	scroll-margin-top: 6rem;
}

.m-footer__letterHead {
	margin: 0 0 .625rem;
	font: 500 1.3125rem/1.25 var(--m-text-sans);
	color: var(--m-dark-head);
}

.m-footer__letterBody {
	margin: 0 0 1.375rem;
	font: 400 .9375rem/1.7 var(--m-text-sans);
	color: var(--m-dark-body);
	max-width: 32ch;
}

/*
 * A bordered field and a filled button, as on the reference — the underline
 * treatment the homepage uses disappears against this much copy, and the
 * panel needs one object with a visible edge to read as a form.
 */
/* Width comes from the column track above; the mobile cap is in §27. */
.m-footer__sub {
	display: flex;
	align-items: stretch;
	gap: 0;
	border: 0;
	padding: 0;
}

.m-footer__sub input {
	flex: 1;
	min-width: 0;
	background: none;
	border: 1px solid var(--m-dark-hairline);
	border-right: 0;
	border-radius: 0;
	padding: .9375rem 1.125rem;
	color: var(--m-dark-head);
	font: 400 .9375rem/1.2 var(--m-text-sans);
	-webkit-appearance: none;
	appearance: none;
	transition: border-color .3s;
}

.m-footer__sub input::placeholder {
	color: var(--m-dark-label);
	opacity: 1;
}

.m-footer__sub input:focus {
	outline: none;
	border-color: var(--m-dark-head);
}

.m-footer__sub button {
	flex: none;
	background: var(--m-dark-head);
	color: var(--m-dark);
	border: 0;
	border-radius: 0;
	cursor: pointer;
	padding: .9375rem 1.375rem;
	font: 500 .75rem/1.2 var(--m-text-sans);
	letter-spacing: .18em;
	text-transform: uppercase;
	white-space: nowrap;
	transition: opacity .3s;
}

.m-footer__sub button:hover {
	opacity: .82;
}

/* The compliance line the reference carries and this footer did not. */
.m-footer__consent {
	margin: .9375rem 0 0;
	max-width: 34ch;
	font: 400 .8125rem/1.65 var(--m-text-sans);
	color: var(--m-dark-label);
}

.m-footer__consent a {
	color: var(--m-dark-link);
	border-bottom: 1px solid var(--m-dark-hairline);
	transition: color .3s, border-color .3s;
}

.m-footer__consent a:hover {
	color: var(--m-dark-head);
	border-color: var(--m-dark-head);
}

/*
 * The lookbook. The only display-scale type in the column, and the only place
 * besides the band where the serif appears.
 */
.m-footer__lookbook {
	display: block;
	margin: 0 0 2rem;
	font: 200 clamp(1.5rem, 2.6vw, 2.125rem)/1.2 var(--m-display);
	font-optical-sizing: auto;
	color: var(--m-dark-head);
	transition: opacity .3s;
}

.m-footer__lookbook:hover {
	opacity: .7;
}

/* The subscribe reply. One step below the links, on the same scale. */
.m-footer__msg {
	margin: .875rem 0 0;
	font: 400 .875rem/1.65 var(--m-text-sans);
	color: var(--m-dark-head);
}

/* Line-height matches the font size and caps carry no descender, so without a
   margin here the label sits straight on top of the first link. */
.m-footer__head {
	font: 500 .875rem/1 var(--m-text-sans);
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--m-dark-label);
	margin-bottom: 1.375rem;
}

/* Narrower columns than before, so the links come down to the reference's
   size and sit on a tighter pitch. Sentence case, as there. */
.m-linklist {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	/*
	 * The gap travels with the type at roughly four fifths of the size, so the
	 * rows keep the same rhythm whatever the setting: closer than that and the
	 * column reads as a block rather than a list.
	 */
	gap: .875rem;
	font: 400 1.125rem/1.35 var(--m-text-sans);
	color: var(--m-dark-link);
}

.m-linklist a {
	transition: color .3s;
}

.m-linklist a:hover {
	color: var(--m-dark-head);
}

.m-footer__social {
	display: flex;
	gap: 1.375rem;
	/* Sits in the bottom bar now, so no column-edge correction is needed. */
	margin: 0 -.4375rem 0 0;
	color: var(--m-dark-head);
}

/* Set as words rather than glyphs: at this size the icons read as smudges,
   and the bar is already a line of tracked caps. */
.m-footer__social a {
	color: var(--m-dark-label);
	transition: color .3s;
}

.m-footer__social a:hover {
	color: var(--m-dark-head);
}

.m-footer__bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-top: 1px solid var(--m-dark-hairline);
	margin-top: 3rem;
	padding-top: 1.625rem;
	font: 500 .8125rem/1 var(--m-text-sans);
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--m-dark-label);
	white-space: nowrap;
}



/* ---------- 24 · Reveal --------------------------------------------------- */

.mitesh-anim [data-reveal] {
	opacity: 0;
	transform: translateY(.875rem);
	transition: opacity 1s ease, transform 1s var(--m-ease);
}

.mitesh-anim [data-reveal].is-in {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.mitesh-anim [data-reveal] {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* ---------- 25 · Inner pages ---------------------------------------------- */

.m-main {
	padding: 0 var(--m-gutter);
}

.m-pagehead {
	position: relative;
	height: 26.25rem;
	background: var(--m-band);
	overflow: hidden;
	margin: 0 calc(-1 * var(--m-gutter)) 4.5rem;
}

.m-pagehead img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.m-pagehead__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(20, 19, 17, .5), rgba(20, 19, 17, .04) 62%);
}

.m-pagehead__copy {
	position: absolute;
	left: var(--m-gutter);
	bottom: 2rem;
	color: #fff;
}

.m-pagehead__copy .m-eyebrow {
	color: rgba(255, 255, 255, .88);
	margin-bottom: 1rem;
}

.m-pagehead__title {
	font: 300 2.5rem/1.1 var(--m-sans);
	margin: 0;
}

.m-entry {
	max-width: 40rem;
	margin: 0 auto;
	padding: 6.5rem 0;
	font: 400 1.125rem/1.85 var(--m-sans);
	color: var(--m-body);
}

.m-entry > * + * {
	margin-top: 1.75rem;
}

.m-entry h1,
.m-entry h2,
.m-entry h3,
.m-entry h4 {
	color: var(--m-ink);
	font-weight: 300;
	line-height: 1.15;
	margin-top: 3rem;
}

.m-entry h1 { font-size: 2.75rem; }
.m-entry h2 { font-size: 2.125rem; }
.m-entry h3 { font-size: 1.625rem; }
.m-entry h4 { font-size: 1.25rem; }

.m-entry a {
	border-bottom: 1px solid var(--m-hairline-soft);
	transition: border-color .3s;
}

.m-entry a:hover {
	border-color: var(--m-ink);
}

.m-entry blockquote {
	font: 300 italic 1.625rem/1.5 var(--m-sans);
	color: var(--m-ink);
	padding-left: 1.75rem;
	border-left: 1px solid var(--m-hairline);
}

.m-entry ul,
.m-entry ol {
	padding-left: 1.25rem;
	line-height: 1.9;
}

.m-entry img {
	margin-top: 2.5rem;
	margin-bottom: 2.5rem;
}

.m-entry figcaption,
.m-entry .wp-caption-text {
	font: 500 .75rem/1.6 var(--m-sans);
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--m-label);
	margin-top: .875rem;
}

.m-entry .alignwide,
.m-entry .alignfull {
	max-width: none;
	width: auto;
	margin-left: calc(-1 * var(--m-gutter));
	margin-right: calc(-1 * var(--m-gutter));
}

.m-entry code,
.m-entry pre {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: .9375rem;
	background: #f2f2f2;
}

.m-entry pre {
	padding: 1.5rem;
	overflow-x: auto;
}

/* Journal index — a hairline-separated list. */
.m-journal {
	padding: 6.5rem 0 7.25rem;
	border-top: 1px solid var(--m-hairline);
}

.m-journal__item {
	display: grid;
	grid-template-columns: 10rem 1fr 15rem;
	gap: 2.5rem;
	align-items: center;
	padding: 2.75rem 0;
	border-bottom: 1px solid var(--m-hairline);
}

.m-journal__date {
	font: 500 .75rem/1 var(--m-sans);
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--m-label);
}

.m-journal__title {
	font: 300 2.125rem/1.15 var(--m-sans);
	color: var(--m-ink);
}

.m-journal__item .m-tile {
	height: auto;
	aspect-ratio: var(--m-crop);
}

.m-pagination {
	display: flex;
	justify-content: center;
	gap: 1.5rem;
	padding: 3.5rem 0;
	font: 500 .78125rem/1 var(--m-sans);
	letter-spacing: .26em;
	text-transform: uppercase;
	color: var(--m-label);
}

.m-pagination .current {
	color: var(--m-ink);
	border-bottom: 1px solid var(--m-ink);
	padding-bottom: .375rem;
}

.m-404 {
	min-height: 60vh;
	display: grid;
	place-items: center;
	text-align: center;
	padding: 7.25rem 0;
}

.m-404__title {
	font: 400 6rem/.9 var(--m-script);
	margin-bottom: 1.5rem;
}

.widget {
	margin-bottom: 3rem;
	font-size: 1rem;
}

.widget ul {
	list-style: none;
	padding: 0;
	line-height: 2.2;
}

/* ---------- 26 · WooCommerce ---------------------------------------------- */

.m-shop {
	padding-bottom: 7.25rem;
}

.woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-notices-wrapper .woocommerce-info,
.woocommerce-notices-wrapper .woocommerce-error {
	list-style: none;
	margin: 0 0 2.5rem;
	padding: 1.375rem 0;
	border-top: 1px solid var(--m-hairline);
	border-bottom: 1px solid var(--m-hairline);
	font: 500 .78125rem/1.6 var(--m-sans);
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--m-label);
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1.5rem;
	flex-wrap: wrap;
}

.m-crumb {
	font: 500 .75rem/1 var(--m-sans);
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--m-label);
	padding: 2.5rem 0;
}

.m-crumb a:hover {
	color: var(--m-ink);
}

/* Filter row: underlined caps links, never boxes. */
.m-shop__bar {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 2.5rem;
	border-top: 1px solid var(--m-hairline);
	padding-top: 2.125rem;
	margin-bottom: 3.5rem;
	flex-wrap: wrap;
}

.woocommerce-ordering select {
	border: 0;
	border-bottom: 1px solid var(--m-hairline-soft);
	background: none;
	font: 500 .78125rem/1 var(--m-sans);
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--m-label);
	padding: 0 1.5rem .4375rem 0;
	appearance: none;
	cursor: pointer;
}

ul.products {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 4.5rem 2.5rem;
}

ul.products::before,
ul.products::after {
	content: none;
}

ul.products li.product {
	margin: 0;
	width: auto;
	float: none;
}

ul.products li.product .m-tile {
	height: auto;
	aspect-ratio: var(--m-crop);
}

.woocommerce-pagination ul {
	list-style: none;
	display: flex;
	justify-content: center;
	gap: 1.5rem;
	padding: 4.5rem 0 0;
	margin: 0;
	font: 500 .78125rem/1 var(--m-sans);
	letter-spacing: .26em;
	text-transform: uppercase;
	color: var(--m-label);
}

.woocommerce-pagination .current {
	color: var(--m-ink);
	border-bottom: 1px solid var(--m-ink);
	padding-bottom: .375rem;
}

/* Product page: stacked crops left, sticky detail right. */
.m-product {
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	gap: 5.5rem;
	align-items: start;
	padding-bottom: 6.5rem;
}

.m-product__gallery .woocommerce-product-gallery__image + .woocommerce-product-gallery__image {
	margin-top: 2.5rem;
}

.m-product__summary {
	position: sticky;
	top: 9rem;
}

.m-product__summary .product_title {
	font: 400 1.4375rem/1.2 var(--m-sans);
	letter-spacing: .02em;
	margin: 0 0 1.25rem;
}

.m-product__summary .price {
	font: 400 1.125rem/1 var(--m-sans);
	letter-spacing: .08em;
	margin: 0 0 2rem;
	display: block;
}

.m-product__summary .price del {
	color: var(--m-label);
	margin-right: .5rem;
}

.m-product__summary .price ins {
	text-decoration: none;
}

.woocommerce-product-details__short-description {
	font: 400 1.0625rem/1.75 var(--m-sans);
	color: var(--m-body);
	max-width: 33.75rem;
	margin-bottom: 2rem;
}

.m-product__summary table.variations {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 1.5rem;
}

.m-product__summary table.variations th,
.m-product__summary table.variations td {
	text-align: left;
	padding: .75rem 0;
	vertical-align: middle;
}

.m-product__summary table.variations label {
	font: 500 .75rem/1 var(--m-sans);
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--m-label);
}

.m-product__summary select {
	border: 0;
	border-bottom: 1px solid var(--m-hairline);
	background: none;
	padding: .5rem 0;
	font: 400 1rem/1 var(--m-sans);
	width: 100%;
	appearance: none;
	cursor: pointer;
}

.quantity input[type="number"] {
	width: 4.5rem;
	border: 0;
	border-bottom: 1px solid var(--m-hairline);
	background: none;
	padding: .5rem 0;
	font: 400 1rem/1 var(--m-sans);
}

form.cart {
	display: flex;
	align-items: flex-end;
	gap: 1.75rem;
	flex-wrap: wrap;
	margin: 2rem 0;
}

.product_meta {
	border-top: 1px solid var(--m-hairline);
	padding-top: 1.5rem;
	font: 500 .75rem/2 var(--m-sans);
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--m-label);
}

.woocommerce-tabs {
	border-top: 1px solid var(--m-hairline);
	padding-top: 3.5rem;
	margin-bottom: 6.5rem;
}

.woocommerce-tabs ul.tabs {
	list-style: none;
	display: flex;
	gap: 2.5rem;
	padding: 0;
	margin: 0 0 2.5rem;
	font: 500 .78125rem/1 var(--m-sans);
	letter-spacing: .26em;
	text-transform: uppercase;
	color: var(--m-label);
}

.woocommerce-tabs ul.tabs li.active a {
	color: var(--m-ink);
	border-bottom: 1px solid var(--m-ink);
	padding-bottom: .375rem;
}

.woocommerce-tabs .panel {
	font: 400 1.0625rem/1.85 var(--m-sans);
	color: var(--m-body);
	max-width: 40rem;
}

.related.products > h2,
.up-sells > h2,
.cross-sells > h2 {
	font: 300 2.75rem/1.1 var(--m-sans);
	color: var(--m-ink);
	margin-bottom: 3.5rem;
}

/* Cart, checkout and account: hairlines, no boxes. */
.shop_table,
.woocommerce-checkout-review-order-table {
	width: 100%;
	border-collapse: collapse;
	font: 400 1rem/1.6 var(--m-sans);
}

.shop_table th {
	text-align: left;
	font: 500 .75rem/1 var(--m-sans);
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--m-label);
	padding: 1.5rem 1rem 1.5rem 0;
	border-bottom: 1px solid var(--m-hairline);
}

.shop_table td {
	padding: 1.75rem 1rem 1.75rem 0;
	border-bottom: 1px solid var(--m-hairline);
	vertical-align: middle;
}

.woocommerce-cart-form__cart-item .product-thumbnail img {
	width: 6rem;
	height: auto;
}

.woocommerce form .form-row {
	display: flex;
	flex-direction: column;
	gap: .5rem;
	margin-bottom: 1.75rem;
}

.woocommerce form .form-row label {
	font: 500 .75rem/1 var(--m-sans);
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--m-label);
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.select2-container .select2-selection {
	border: 0;
	border-bottom: 1px solid var(--m-hairline);
	background: none;
	padding: .75rem 0;
	font: 400 1rem/1.4 var(--m-sans);
	width: 100%;
	border-radius: 0;
}

.woocommerce .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
button.single_add_to_cart_button {
	background: var(--m-ink);
	color: var(--m-ground);
	padding: 1rem 1.75rem;
	font: 500 .78125rem/1 var(--m-sans);
	letter-spacing: .26em;
	text-transform: uppercase;
	border: 0;
	border-radius: 0;
	cursor: pointer;
	display: inline-block;
	transition: opacity .3s;
}

.woocommerce .button:hover,
button.single_add_to_cart_button:hover {
	opacity: .84;
}

.cart_totals h2,
.woocommerce-billing-fields h3,
.woocommerce-additional-fields h3,
#order_review_heading {
	font: 300 2.125rem/1.1 var(--m-sans);
	color: var(--m-ink);
	margin: 0 0 2rem;
}

/* ---------- 27 · Responsive ----------------------------------------------- */

@media (max-width: 1023px) {

	:root {
		--m-gutter: 1.5rem;
		--m-header-h: 4.75rem;
	}

	.m-page {
		max-width: none;
	}

	/* Header — hamburger and drawer. */
	.m-header__row {
		padding: 1rem var(--m-gutter);
	}

	.m-announce {
		font-size: .625rem;
		letter-spacing: .22em;
		padding: .625rem 0;
		max-height: 2rem;
	}

	/*
	 * Left at .875rem. The header row is burger | wordmark | icons, and on a
	 * 360px screen the centre track has no slack at all — .9375rem already
	 * runs the wordmark 4px into the cart icon. The desktop step up does not
	 * fit here.
	 */
	.m-wordmark {
		font-size: 1rem;
		letter-spacing: .34em;
	}

	.m-utils {
		gap: .25rem;
	}

	/* 44px minimum tap targets. */
	.m-utils__item {
		width: 2.75rem;
		height: 2.75rem;
	}

	.m-utils svg {
		width: 1.375rem;
		height: 1.375rem;
	}

	/* Hero. */
	.m-hero__copy {
		bottom: 3rem;
	}

	.m-hero__title {
		font-size: 4.5rem;
	}

	.m-hero__eyebrow {
		font-size: .625rem;
		letter-spacing: .26em;
		margin-bottom: 1rem;
	}

	.m-hero__cta {
		font-size: .6875rem;
		padding: 1rem 1.5rem;
		border: 1px solid rgba(255, 255, 255, .6);
		margin-top: 1.75rem;
	}

	/* Sections. */
	.m-collections {
		padding: 3.5rem 0 3rem;
	}

	.m-sechead {
		flex-direction: column;
		align-items: flex-start;
		gap: 1.25rem;
		padding-top: 1.5rem;
		margin-bottom: 2rem;
	}

	.m-sechead--norule {
		padding-top: 0;
	}

	.m-sechead__aside {
		text-align: left;
		max-width: none;
		font-size: 1rem;
	}

	.m-h2 {
		font-size: 1.875rem;
	}

	.m-eyebrow,
	.m-eyebrow--lg {
		font-size: .625rem;
		letter-spacing: .26em;
		margin-bottom: .875rem;
	}

	.m-rail__item {
		width: 15rem;
	}

	.m-rail__item .m-tile {
		height: 20rem;
	}

	.m-new,
	.m-plates,
	.m-diaries,
	.m-newsletter {
		padding-bottom: 3.5rem;
	}

	/* Two-up editorial pairs collapse and lose the stagger. */
	.m-pair,
	.m-detail,
	.m-plates__grid,
	.m-diaries__grid,
	.m-about,
	.m-newsletter__inner {
		grid-template-columns: 1fr;
		gap: 3rem;
	}

	.m-detail {
		padding: 2.5rem var(--m-gutter) 3.5rem;
	}

	.m-pair > :nth-child(2),
	.m-plates__grid > :nth-child(2),
	.m-plates__grid > :nth-child(3) {
		padding-top: 0;
	}

	.m-pair > :nth-child(1) .m-tile--card,
	.m-pair > :nth-child(2) .m-tile--card,
	.m-plates__grid > * .m-tile,
	.m-diaries__grid .m-tile,
	.m-detail .m-tile,
	ul.products li.product .m-tile {
		height: auto;
		aspect-ratio: var(--m-crop);
	}

	.m-cloth .m-tile {
		height: auto;
		aspect-ratio: 16 / 9;
	}

	.m-card__foot {
		flex-wrap: wrap;
		gap: 1rem;
	}

	.m-sizes {
		font-size: .8125rem;
		gap: .625rem;
	}

	.m-sizes__item {
		min-width: 2.75rem;
		min-height: 2.75rem;
		display: grid;
		place-items: center;
		border: 1px solid var(--m-hairline);
		padding: 0;
	}

	.m-card__foot .m-rule {
		display: none;
	}

	.m-card__foot .m-cta {
		border: 1px solid var(--m-ink);
		padding: 1rem 1.5rem;
	}

	/* Bands. */
	.m-band {
		height: 26rem;
	}

	.m-band__title {
		font-size: 1.75rem;
	}

	.m-band__copy {
		bottom: 2rem;
	}

	.m-making {
		height: 30rem;
	}

	.m-making__title {
		font-size: 3rem;
	}

	.m-making__media {
		grid-template-columns: 1fr;
	}

	.m-making__half:last-child {
		display: none;
	}

	.m-cloth {
		padding-bottom: 3.5rem;
	}

	.m-cloth__captions {
		flex-direction: column;
		align-items: center;
		gap: .875rem;
		font-size: .6875rem;
		padding: 1.5rem var(--m-gutter);
	}

	/* Stat row — 2x2 on mobile. */
	.m-stats {
		grid-template-columns: 1fr 1fr;
		gap: 2rem;
		padding: 2.5rem var(--m-gutter);
	}

	.m-stat__figure {
		font-size: 1.5rem;
	}

	.m-stat__text,
	.m-plate__caption,
	.m-card__note,
	.m-sechead__note {
		font-size: 1rem;
	}

	/* Dark story band. */
	.m-about {
		padding: 3.5rem var(--m-gutter);
	}

	.m-about__title {
		font-size: 2.25rem;
	}

	.m-about__body {
		font-size: 1rem;
	}

	.m-about__links a {
		border: 1px solid rgba(255, 255, 255, .5);
		padding: 1rem 1.5rem;
	}

	.m-about .m-tile {
		height: auto;
		aspect-ratio: 4 / 3;
	}

	.m-press {
		padding: 3.5rem var(--m-gutter);
	}

	.m-press__quote {
		font-size: 1.25rem;
	}

	.m-press__logos {
		gap: 1.5rem;
		font-size: .625rem;
		letter-spacing: .2em;
	}

	.m-newsletter__title {
		font-size: 2.25rem;
	}

	.m-subscribe input[type="email"] {
		font-size: 1rem;
	}

	.m-subscribe button {
		min-height: 2.75rem;
	}

	/* Footer. */
	.m-footer {
		min-height: 0;
		padding: 0 var(--m-gutter) 2rem;
	}

	.m-footer__band {
		margin-bottom: 2.5rem;
		padding: 1.125rem 0;
	}

	.m-footer__wordmark {
		font-size: 1.25rem;
		letter-spacing: .26em;
		white-space: normal;
	}

	.m-footer__vintage {
		margin: .75rem 0 .25rem;
	}

	.m-footer__deva {
		font-size: 1.75rem;
	}

	.m-footer__social {
		margin-top: 0;
	}

	.m-footer__cols {
		grid-template-columns: 1fr 1fr;
		gap: 2.5rem;
	}

	/* The brand lockup and the letter each take the full width; the four
	   link columns pair up between them. */
	.m-footer__brand,
	.m-footer__letter {
		grid-column: 1 / -1;
	}

	.m-footer__sub {
		max-width: 26rem;
	}

	.m-footer__consent,
	.m-footer__letterBody {
		max-width: 46ch;
	}

	.m-footer__bar {
		flex-direction: column;
		align-items: flex-start;
		gap: 1.25rem;
		margin-top: 2.5rem;
		white-space: normal;
	}

	.m-linklist a {
		display: inline-block;
		min-height: 2.75rem;
		line-height: 2.75rem;
	}

	/* Shop. */
	ul.products {
		grid-template-columns: 1fr 1fr;
		gap: 2.5rem 1.25rem;
	}

	.m-product {
		grid-template-columns: 1fr;
		gap: 2.5rem;
	}

	.m-product__summary {
		position: static;
	}

	.m-entry {
		padding: 3.5rem 0;
		font-size: 1rem;
	}

	.m-pagehead {
		height: 15rem;
		margin-bottom: 2.5rem;
	}

	.m-journal__item {
		grid-template-columns: 1fr 6rem;
		gap: 1.25rem;
		padding: 1.75rem 0;
	}

	.m-journal__date {
		grid-column: 1 / -1;
	}

	.m-journal__title {
		font-size: 1.375rem;
	}

	.m-journal__item .m-tile {
		height: 6rem;
	}

	.m-searchform input[type="search"] {
		font-size: 1.5rem;
	}

	.m-overlay {
		padding: 2rem var(--m-gutter);
	}
}

@media (max-width: 599px) {

	ul.products,
	.m-diaries__grid,
	.m-footer__cols {
		grid-template-columns: 1fr;
	}

	/* The stat row stays 2x2 all the way down — never a single column. */
	.m-stats {
		grid-template-columns: 1fr 1fr;
		gap: 1.75rem 1.25rem;
	}

	.m-hero__title {
		font-size: 3.5rem;
	}
}

/* ---------- 28 · Print ---------------------------------------------------- */

@media print {

	.m-header,
	.m-footer,
	.m-marquee,
	.m-overlay,
	.m-mega {
		display: none;
	}

	.mitesh-anim [data-reveal] {
		opacity: 1;
		transform: none;
	}
}

/* ---------- 29 · Corrections and one-offs ---------------------------------- */

/* The homepage bands manage their own gutters; several are full-bleed. */
.m-main--home {
	padding: 0;
}

/* Sections 02, 03 and 04 carry the larger eyebrow and link as drawn. */
.m-sechead--lg .m-eyebrow,
.m-sechead--lg .m-link {
	font-size: .8125rem;
}

/* A tile used as the whole link body still needs to fill its cell. */
.m-rail__item,
.m-diary,
.m-card__crop,
.m-journal__thumb {
	color: inherit;
}

/* Placeholder tiles that stand in for a full-bleed band read at band scale. */
.m-cloth .m-tile__label,
.m-about .m-tile__label {
	font-size: .78125rem;
	letter-spacing: .26em;
}

/* Woo puts its own markup inside our card wrapper on archive pages. */
ul.products li.product .m-card {
	height: 100%;
}

ul.products li.product .m-card__foot {
	margin-top: 1.25rem;
}

/* ---------- 30 · WooCommerce Cart & Checkout blocks ------------------------
   WooCommerce 11 builds the cart and checkout pages from blocks rather than
   the classic shortcodes, so §26 above does not reach them. They already
   inherit Jost and the ground colour; these rules take away the slate buttons
   and the rounded corners the design system rules out.
   ------------------------------------------------------------------------- */

.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout {
	--wc-blue: var(--m-ink);
	--wc-green: var(--m-ink);
	max-width: var(--m-canvas, 1800px);
}

/* Buttons: ink block, tracked caps, square. */
.wc-block-components-button:not(.is-link) {
	background: var(--m-ink);
	color: var(--m-ground);
	border: 0;
	border-radius: 0;
	padding: 1rem 1.75rem;
	font: 500 .78125rem/1 var(--m-sans);
	letter-spacing: .26em;
	text-transform: uppercase;
	min-height: 3rem;
	transition: opacity .3s;
}

.wc-block-components-button:not(.is-link):hover {
	background: var(--m-ink);
	opacity: .84;
}

.wc-block-components-button.is-link {
	font: 500 .75rem/1 var(--m-sans);
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--m-label);
	text-decoration: none;
	border-bottom: 1px solid var(--m-hairline-soft);
}

.wc-block-components-button.is-link:hover {
	color: var(--m-ink);
	border-color: var(--m-ink);
}

/* Nothing on this site has a rounded corner. */
.wc-block-components-quantity-selector,
.wc-block-components-quantity-selector__button,
.wc-block-components-text-input input,
.wc-block-components-form input,
.wc-block-components-panel,
.wc-block-components-notice-banner,
.wp-block-woocommerce-cart .wc-block-cart-items,
.wc-block-components-radio-control__option,
.wc-block-components-totals-coupon__form input {
	border-radius: 0 !important;
}

.wc-block-components-quantity-selector {
	border: 1px solid var(--m-hairline);
}

.wc-block-components-quantity-selector__button {
	border: 0;
	color: var(--m-label);
}

/*
 * Fields: one hairline box. Woo draws a 1.5px border on focus and the theme's
 * focus ring sits 3px outside it, so a focused field read as a double box.
 * One line that turns ink on focus replaces both; Woo's padding and floating
 * label are left as they are. The !important is against Woo's focus rules,
 * which stack more classes than any sensible override would.
 */
.wc-block-components-text-input input,
.wc-blocks-components-select .wc-blocks-components-select__select {
	border: 0 !important;
	border-bottom: 1px solid var(--m-hairline) !important;
	border-radius: 0 !important;
	background-color: transparent !important;
	box-shadow: none !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	outline: none !important;
	color: var(--m-ink);
	font-family: var(--m-sans);
}

.wc-block-components-text-input input:focus,
.wc-blocks-components-select .wc-blocks-components-select__select:focus {
	border-bottom-color: var(--m-ink) !important;
}

.wc-block-components-text-input.has-error input,
.wc-blocks-components-select.has-error .wc-blocks-components-select__select {
	border-bottom-color: var(--m-rust, #93563f) !important;
}

/* Headings and totals sit on the theme's type scale. */
.wp-block-woocommerce-cart h1,
.wp-block-woocommerce-checkout h1,
.wc-block-components-title {
	font-family: var(--m-sans);
	font-weight: 300;
	letter-spacing: .01em;
}

.wc-block-components-product-name {
	font: 400 1.125rem/1.3 var(--m-sans);
	letter-spacing: .02em;
	color: var(--m-ink);
}

.wc-block-components-product-metadata {
	font: 500 .75rem/1.6 var(--m-sans);
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--m-label);
}

.wc-block-components-totals-item__label {
	font: 500 .75rem/1 var(--m-sans);
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--m-label);
}

/* Hairlines, never filled panels. */
.wc-block-cart-items__row,
.wc-block-components-totals-wrapper {
	border-color: var(--m-hairline);
}

.wc-block-components-panel,
.wc-block-components-notice-banner {
	background: none;
	border-color: var(--m-hairline);
}

/* ---------- 31 · Collection / listing -------------------------------------
   A short full-bleed band instead of a hero, a filter row of underlined caps
   links, and a centred outlined block to load more.
   ------------------------------------------------------------------------- */

.m-pagehead--collection {
	height: 21.875rem;
}

.m-shop__intro {
	margin: 0 0 2.5rem;
	max-width: 35rem;
}

.m-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 2rem;
}

.m-filters__item {
	font: 500 .78125rem/1 var(--m-sans);
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--m-label);
	border-bottom: 1px solid transparent;
	padding-bottom: .4375rem;
	transition: color .3s, border-color .3s;
}

.m-filters__item:hover,
.m-filters__item.is-current {
	color: var(--m-ink);
	border-bottom-color: var(--m-ink);
}

.m-shop__sort {
	display: flex;
	align-items: baseline;
	gap: 2rem;
}

.woocommerce-result-count {
	margin: 0;
	font: 500 .75rem/1 var(--m-sans);
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--m-label);
	white-space: nowrap;
}

.m-loadmore {
	display: flex;
	justify-content: center;
	padding: 4.5rem 0 0;
}

/* Numbered pages sit quietly under the load-more block. */
.woocommerce-pagination ul {
	padding-top: 2.5rem;
}

/* ---------- 32 · Product page additions ------------------------------------ */

.m-product__spec {
	margin: 0 0 2rem;
	padding-top: 1.75rem;
	border-top: 1px solid var(--m-hairline);
}

.m-statement {
	padding: 7.25rem var(--m-gutter);
	text-align: center;
}

.m-statement__text {
	margin: 0 auto;
	font: 400 5.5rem/.92 var(--m-script);
	color: var(--m-ink);
	max-width: 53.75rem;
}

.m-band--product {
	height: 43.75rem;
	margin-left: calc(-1 * var(--m-gutter));
	margin-right: calc(-1 * var(--m-gutter));
	margin-bottom: 6.5rem;
}

/* ---------- 33 · About ----------------------------------------------------- */

.m-about-hero {
	position: relative;
	height: 43.75rem;
	background: var(--m-dark);
	overflow: hidden;
}

.m-about-hero__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(20, 19, 17, .72), rgba(20, 19, 17, .22));
}

.m-about-hero__copy {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 5rem;
	padding: 0 var(--m-gutter);
	color: var(--m-dark-head);
	text-align: center;
}

.m-about-hero__copy .m-eyebrow {
	color: rgba(255, 255, 255, .8);
	margin-bottom: 1.5rem;
}

.m-about-hero__title {
	margin: 0 auto;
	font: 400 50px var(--m-script);
	color: #fff;
	max-width: 55rem;
}

.m-about-body {
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	gap: 5.5rem;
	padding: 7.25rem var(--m-gutter);
	align-items: start;
}

.m-about-body__lede {
	margin: 0 0 1.75rem;
	font: 300 2.125rem/1.3 var(--m-sans);
	color: var(--m-ink);
	max-width: 35rem;
	text-wrap: pretty;
}

/* The About recipe caps body copy at 16.5/1.75, tighter than the homepage. */
.m-about-body .m-copy {
	font-size: 1.03125rem;
	line-height: 1.75;
	max-width: 35rem;
}

.m-about-body__facts .m-spec {
	border-top: 1px solid var(--m-hairline);
	padding-top: 1.625rem;
}

.m-about-statement {
	background: var(--m-dark);
	color: var(--m-dark-head);
	padding: 7.25rem var(--m-gutter);
	text-align: center;
}

.m-about-statement__text {
	margin: 0 auto;
	font: 400 6.5rem/.92 var(--m-script);
	color: var(--m-dark-head);
	max-width: 55rem;
}

.m-about-content {
	padding: 0 var(--m-gutter);
}

.m-about-content .m-entry {
	padding-top: 6.5rem;
	padding-bottom: 6.5rem;
}

/* The stat row closes the page, so it needs no bottom hairline of its own. */
.m-about-content + .m-stats {
	border-bottom: 0;
	margin-bottom: 7.25rem;
}

/* ---------- 34 · Journal article ------------------------------------------- */

/* Images break full-bleed with plate captions in 12px caps. */
.m-entry .m-plate-figure {
	margin: 3.5rem calc(-1 * var(--m-gutter));
	max-width: none;
	width: auto;
}

.m-entry .m-plate-figure img {
	width: 100%;
	margin: 0;
}

.m-entry .m-plate-figure figcaption {
	padding: 0 var(--m-gutter);
	margin-top: 1.125rem;
}

/* ---------- 35 · Responsive for the new surfaces --------------------------- */

@media (max-width: 1023px) {

	.m-pagehead--collection {
		height: 12rem;
	}

	.m-shop__bar {
		flex-direction: column;
		align-items: flex-start;
		gap: 1.5rem;
	}

	.m-filters {
		gap: 1rem 1.25rem;
	}

	.m-filters__item {
		font-size: .6875rem;
		letter-spacing: .18em;
		min-height: 2.75rem;
		display: inline-flex;
		align-items: center;
	}

	.m-shop__sort {
		flex-direction: column;
		align-items: flex-start;
		gap: .75rem;
	}

	.m-statement {
		padding: 3.5rem var(--m-gutter);
	}

	.m-statement__text {
		font-size: 3rem;
	}

	.m-band--product {
		height: 20rem;
		margin-bottom: 3rem;
	}

	.m-about-hero {
		height: 26rem;
	}

	.m-about-hero__copy {
		bottom: 2.5rem;
	}

	.m-about-hero__title {
		font-size: 50px;
	}

	.m-about-body {
		grid-template-columns: 1fr;
		gap: 2.5rem;
		padding: 3.5rem var(--m-gutter);
	}

	.m-about-body__lede {
		font-size: 1.5rem;
	}

	.m-about-statement {
		padding: 3.5rem var(--m-gutter);
	}

	.m-about-statement__text {
		font-size: 3.25rem;
	}

	.m-about-content .m-entry {
		padding-top: 3rem;
		padding-bottom: 3rem;
	}

	.m-about-content + .m-stats {
		margin-bottom: 3.5rem;
	}

	.m-loadmore {
		padding-top: 2.5rem;
	}
}

/* ---------- 36 · Product gallery ------------------------------------------
   Woo's layout stylesheet is dequeued, so the gallery's sizing belongs to the
   theme. Stacked crops, each filling the column.
   ------------------------------------------------------------------------- */

.woocommerce-product-gallery {
	width: 100%;
	position: relative;
}

.woocommerce-product-gallery__wrapper {
	display: block;
	margin: 0;
}

.woocommerce-product-gallery__image {
	display: block;
	margin: 0 0 2.5rem;
	background: var(--m-tint);
	overflow: hidden;
}

.woocommerce-product-gallery__image:last-child {
	margin-bottom: 0;
}

.woocommerce-product-gallery__image a,
.woocommerce-product-gallery__image img:not(.zoomImg) {
	display: block;
	width: 100%;
	height: auto;
}

/*
 * The crop edge is the container: whatever ratio is uploaded, every stacked
 * crop reads at 4:5 so the column keeps its rhythm. The zoom plugin's clone is
 * absolutely positioned at natural size and must keep it.
 */
.woocommerce-product-gallery__image img:not(.zoomImg) {
	aspect-ratio: var(--m-crop);
	object-fit: cover;
}

/* The lightbox trigger is chrome the design has no place for. */
.woocommerce-product-gallery__trigger {
	position: absolute;
	top: 1.25rem;
	right: 1.25rem;
	z-index: 2;
	width: 2.75rem;
	height: 2.75rem;
	display: grid;
	place-items: center;
	background: rgba(255, 255, 255, .9);
	color: var(--m-ink);
	font-size: 0;
}

.woocommerce-product-gallery__trigger::after {
	content: "+";
	font: 300 1.25rem/1 var(--m-sans);
}

.woocommerce-product-gallery__trigger img {
	display: none;
}

/* ==========================================================================
   37 · Listing and product pages
   --------------------------------------------------------------------------
   No banner image anywhere but the homepage hero. A collection page opens on
   a slim typographic row and goes straight to the grid; the product page is
   three columns — description left, stacked crops centre, buy panel right,
   both side columns sticky while the crops scroll past.
   ========================================================================== */

/* ---------- Collection header --------------------------------------------- */

/*
 * One row for everything that narrows the grid — name, categories, the two
 * facets, the sort and the tally — closed by a single rule. It was two rows
 * banded top and bottom, which drew three hairlines across the page before a
 * single product.
 */
.m-collhead {
	display: flex;
	align-items: center;
	gap: 1.75rem;
	flex-wrap: wrap;
	padding: 3.125rem 0 1.25rem;
	margin-bottom: 2.5rem;
}

.m-collhead__name {
	margin: 0;
	font: 500 .75rem/1.6 var(--m-sans);
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--m-ink);
}

.m-collhead__filters {
	display: flex;
	flex-wrap: wrap;
	gap: 1.75rem;
	margin-left: auto;
}

.m-collhead__item {
	font: 500 .75rem/1.6 var(--m-sans);
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--m-label);
	transition: color .3s;
}

.m-collhead__item:hover,
.m-collhead__item.is-current {
	color: var(--m-ink);
}

/*
 * The category control, set to match the sort beside it — they do the same
 * kind of job, so they read as a pair. margin-left:auto pushes the two to the
 * right of the row, where the link list used to sit.
 */
.m-collhead__cats {
	margin-left: auto;
	font: 500 .75rem/1.6 var(--m-sans);
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--m-label);
}

/*
 * Both selects carry their arrow as a sibling rather than a background image,
 * so it can be the same drawn chevron the facet disclosures use — two 1px
 * strokes rotated 45°, not a filled triangle. A select is a replaced element
 * and cannot host ::after itself, so it goes on the wrapper.
 */
.m-collhead__cats,
.m-collhead__sort {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
}

.m-collhead__cats::after,
.m-collhead__sort::after {
	content: '';
	flex: none;
	width: .375rem;
	height: .375rem;
	border-right: 1px solid currentColor;
	border-bottom: 1px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	pointer-events: none;
}

.m-collhead__cats select,
.m-collhead__sort select {
	border: 0;
	background: none;
	font: inherit;
	/*
	 * Spelled out rather than left to inherit. A select does not take case or
	 * tracking from its parent the way ordinary text does — the sort control
	 * only had them because Woo's own rule set them on the element itself.
	 */
	letter-spacing: .24em;
	text-transform: uppercase;
	color: inherit;
	padding: 0;
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	/*
	 * A select is otherwise as wide as its longest option, which left the sort
	 * control sized for "sort by price: high to low" and its arrow stranded a
	 * couple of centimetres past the word actually showing. Where this is not
	 * supported the arrow simply sits where it used to.
	 */
	field-sizing: content;
	transition: color .3s;
}

.m-collhead__cats select:hover,
.m-collhead__sort select:hover {
	color: var(--m-ink);
}

/*
 * The native menu paints on the OS surface, so its rows need a real ground.
 * Nothing else: the closed control is rendered from the selected option, so
 * resetting the case or the tracking here would strip them from the control
 * itself and the category would stop matching the sort beside it.
 */
.m-collhead__cats option,
.m-collhead__sort option {
	background: var(--m-ground);
	color: var(--m-ink);
}

.m-collhead__sort {
	font: 500 .75rem/1.6 var(--m-sans);
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--m-label);
}

.m-collhead__note {
	margin: 0 0 3.75rem;
	max-width: 35rem;
	font: 400 .875rem/1.75 var(--m-sans);
	color: var(--m-label);
}

/* ---------- The listing grid ---------------------------------------------- */

ul.products {
	gap: 6.5rem 5rem;
}

/* ---------- The listing card ---------------------------------------------- */

.m-tilecard__link {
	display: block;
	color: inherit;
}

.m-tile--listing {
	height: auto;
	aspect-ratio: var(--m-crop);
}

.m-tilecard__meta {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1.5rem;
	padding-top: 1.125rem;
	/*
	 * The name and the price are the two things a listing exists to tell you,
	 * so they sit at the same size as the footer's links rather than below it.
	 */
	font: 400 1.125rem/1.5 var(--m-sans);
	letter-spacing: .01em;
}

.m-tilecard__name {
	color: var(--m-ink);
}

.m-tilecard__price {
	color: var(--m-label);
	white-space: nowrap;
}

.m-tilecard__price del {
	margin-right: .375rem;
	opacity: .7;
}

.m-tilecard__price ins {
	text-decoration: none;
	color: var(--m-ink);
}

/* ---------- Product page: three columns ----------------------------------- */

.m-pdp {
	display: grid;
	grid-template-columns: 1fr 1.55fr 1fr;
	gap: 0 4.5rem;
	align-items: start;
	padding: 3.125rem 0 6.5rem;
}

.m-pdp__desc,
.m-pdp__buy {
	position: sticky;
	top: 8rem;
}

.m-pdp__cat {
	font: 500 .75rem/1.6 var(--m-sans);
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--m-label);
	margin-bottom: 1rem;
}

.m-pdp__cat a {
	color: inherit;
	transition: color .3s;
}

.m-pdp__cat a:hover {
	color: var(--m-ink);
}

.m-pdp__title {
	margin: 0 0 1.5rem;
	font: 400 1.4375rem/1.2 var(--m-sans);
	letter-spacing: .02em;
	color: var(--m-ink);
}

.m-pdp__copy {
	font: 400 .875rem/1.85 var(--m-sans);
	color: var(--m-body);
	max-width: 24rem;
}

.m-pdp__copy p + p {
	margin-top: 1.25rem;
}

.m-pdp__desc .m-spec {
	margin-top: 2rem;
	padding-top: 1.75rem;
	border-top: 1px solid var(--m-hairline);
	font-size: .875rem;
	gap: .75rem 1.5rem;
}

/* Stacked crops down the centre. */
.m-pdp__gallery .woocommerce-product-gallery__image {
	margin-bottom: 1.25rem;
}

/* Buy panel: the title repeats here so it stays with the price. */
.m-pdp__buyTitle {
	font: 400 1.4375rem/1.2 var(--m-sans);
	letter-spacing: .02em;
	margin-bottom: .75rem;
}

.m-pdp__buy .price {
	font: 400 .875rem/1.6 var(--m-sans);
	letter-spacing: .04em;
	color: var(--m-ink);
	margin: 0 0 2rem;
	display: block;
}

.m-pdp__buy .price del {
	color: var(--m-label);
	margin-right: .5rem;
}

.m-pdp__buy .price ins {
	text-decoration: none;
}

.m-pdp__buy table.variations {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 1.5rem;
}

.m-pdp__buy table.variations th,
.m-pdp__buy table.variations td {
	display: block;
	text-align: left;
	padding: 0;
}

.m-pdp__buy table.variations label {
	font: 500 .75rem/1.6 var(--m-sans);
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--m-label);
}

.m-pdp__buy select {
	width: 100%;
	border: 0;
	border-bottom: 1px solid var(--m-ink);
	background: none;
	padding: .625rem 0;
	margin: .5rem 0 1.25rem;
	font: 400 .875rem/1.4 var(--m-sans);
	appearance: none;
	cursor: pointer;
}

.m-pdp__buy .reset_variations {
	font: 500 .6875rem/1.6 var(--m-sans);
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--m-label);
}

.m-pdp__buy form.cart {
	display: block;
	margin: 0;
}

.m-pdp__buy .quantity {
	display: inline-block;
	margin: 0 0 1rem;
}

.m-pdp__buy button.single_add_to_cart_button,
.m-pdp__buy .button {
	display: block;
	width: 100%;
	background: var(--m-ink);
	color: var(--m-ground);
	border: 0;
	border-radius: 0;
	padding: 1.125rem 1.5rem;
	font: 500 .75rem/1 var(--m-sans);
	letter-spacing: .24em;
	text-transform: uppercase;
	cursor: pointer;
	transition: opacity .3s;
}

.m-pdp__buy button.single_add_to_cart_button:hover {
	opacity: .82;
}

.m-pdp__buy .product_meta {
	margin-top: 1.75rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--m-hairline);
	font: 500 .6875rem/2 var(--m-sans);
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--m-label);
}

.m-pdp__buy .stock {
	font: 500 .6875rem/1.6 var(--m-sans);
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--m-label);
	margin: .75rem 0 0;
}

/* Related rail sits under the three columns. */
.related.products > h2 {
	font: 500 .75rem/1.6 var(--m-sans);
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--m-ink);
	margin: 0 0 3rem;
	padding-top: 3.75rem;
	border-top: 1px solid var(--m-hairline);
}

/* ---------- Post and page headers ----------------------------------------- */

.m-posthead {
	padding: 3.125rem 0 2.5rem;
	max-width: 40rem;
	margin: 0 auto;
}

.m-posthead__date {
	font: 500 .75rem/1.6 var(--m-sans);
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--m-label);
	margin-bottom: 1rem;
}

.m-posthead__title {
	margin: 0;
	font: 300 2.125rem/1.15 var(--m-sans);
	color: var(--m-ink);
}

.m-entry {
	padding-top: 0;
}

/* ---------- About opener, without a photograph ---------------------------- */

.m-about-hero--plain {
	height: auto;
	background: var(--m-dark);
	padding: 7.25rem var(--m-gutter);
	display: block;
}

.m-about-hero--plain .m-about-hero__copy {
	position: static;
	padding: 0;
}

/* ---------- Responsive ----------------------------------------------------- */

@media (max-width: 1023px) {

	.m-collhead {
		padding: 1.75rem 0 2rem;
		gap: 1rem;
	}

	.m-collhead__cats {
		margin-left: 0;
	}

	.m-collhead__filters {
		margin-left: 0;
		gap: 1rem;
		width: 100%;
		overflow-x: auto;
		flex-wrap: nowrap;
		scrollbar-width: none;
	}

	.m-collhead__filters::-webkit-scrollbar {
		display: none;
	}

	.m-collhead__item {
		white-space: nowrap;
		min-height: 2.75rem;
		display: inline-flex;
		align-items: center;
	}

	ul.products {
		gap: 2.5rem 1.25rem;
	}

	.m-tilecard__meta {
		font-size: 1rem;
		flex-direction: column;
		gap: .25rem;
	}

	/* Crops first, then the buy panel, then the reading. */
	.m-pdp {
		grid-template-columns: 1fr;
		gap: 2.5rem;
		padding: 1.5rem 0 3.5rem;
	}

	.m-pdp__gallery {
		order: 1;
	}

	.m-pdp__buy {
		order: 2;
	}

	.m-pdp__desc {
		order: 3;
	}

	.m-pdp__desc,
	.m-pdp__buy {
		position: static;
	}

	.m-pdp__copy {
		max-width: none;
	}

	.m-pdp__buyTitle,
	.m-pdp__title {
		font-size: 1.25rem;
	}

	/* The size selector is a tap target like any other. */
	.m-pdp__buy select,
	.m-collhead__sort select {
		min-height: 2.75rem;
	}

	.m-posthead {
		padding: 1.75rem 0 1.5rem;
	}

	.m-posthead__title {
		font-size: 1.625rem;
	}

	.m-about-hero--plain {
		padding: 3.5rem var(--m-gutter);
	}
}

/* ==========================================================================
   38 · Header search and cart drawer
   --------------------------------------------------------------------------
   The search expands across the header row itself — the nav and wordmark fade
   out beneath it and the header keeps its height. The cart is a right-hand
   drawer, so a shopper never leaves the page they are on to review the bag.
   ========================================================================== */

/* ---------- Search, expanding from its own icon --------------------------- */

.m-header__row {
	position: relative;
}

.m-nav {
	grid-row: 1;
	grid-column: 1;
	display: flex;
	align-items: center;
	min-width: 0;
}

.m-wordmark {
	grid-row: 1;
	grid-column: 2;
	transition: opacity .25s ease, visibility .25s ease;
}

.m-utils {
	grid-row: 1;
	grid-column: 3;
	z-index: 1;
}

/* The form sits in the utils group, so the field opens out of the magnifier
   that is already there rather than a second one appearing elsewhere. */
.m-hsearch {
	display: flex;
	align-items: center;
	min-width: 0;
	/* Anchors the type-ahead panel in §39. */
	position: relative;
}

.m-hsearch__field {
	width: 0;
	min-width: 0;
	opacity: 0;
	border: 0;
	border-bottom: 1px solid transparent;
	background: none;
	padding: 0;
	font: 400 .8125rem/1.4 var(--m-sans);
	letter-spacing: .02em;
	color: inherit;
	transition: width .38s var(--m-ease), opacity .25s ease, border-color .38s ease, padding .38s ease, margin .38s ease;
}

.m-header.is-searching .m-hsearch__field {
	width: 17rem;
	opacity: 1;
	border-bottom-color: currentColor;
	padding-bottom: .375rem;
	margin-right: .5rem;
}

.m-hsearch__field::placeholder {
	color: currentColor;
	opacity: .5;
}

.m-hsearch__field:focus {
	outline: none;
}

.m-hsearch__go {
	flex: none;
}

/* ---------- Cart drawer ---------------------------------------------------- */

body.is-locked {
	overflow: hidden;
}

.m-cart {
	position: fixed;
	inset: 0;
	z-index: 50;
	visibility: hidden;
	pointer-events: none;
}

.m-cart.is-open {
	visibility: visible;
	pointer-events: auto;
}

.m-cart__scrim {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .38);
	opacity: 0;
	transition: opacity .4s ease;
}

.m-cart.is-open .m-cart__scrim {
	opacity: 1;
}

.m-cart__panel {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: min(30rem, 100%);
	background: var(--m-ground);
	color: var(--m-ink);
	display: flex;
	flex-direction: column;
	transform: translateX(100%);
	transition: transform .4s var(--m-ease);
	box-shadow: -1px 0 0 var(--m-hairline);
}

.m-cart.is-open .m-cart__panel {
	transform: none;
}

.m-cart__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.75rem var(--m-gutter) 1.25rem;
	border-bottom: 1px solid var(--m-hairline);
	flex: none;
}

.m-cart__title {
	font: 500 .75rem/1 var(--m-sans);
	letter-spacing: .24em;
	text-transform: uppercase;
}

.m-cart__count {
	color: var(--m-label);
	margin-left: .5rem;
}

.m-cart__close {
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	margin-right: -.75rem;
	color: inherit;
}

.m-cart__body {
	flex: 1;
	display: flex;
	flex-direction: column;
	min-height: 0;
}

.m-cart__items {
	list-style: none;
	margin: 0;
	padding: 0 var(--m-gutter);
	overflow-y: auto;
	flex: 1;
}

.m-cart__item {
	display: grid;
	grid-template-columns: 5.5rem 1fr;
	gap: 1.25rem;
	padding: 1.5rem 0;
	border-bottom: 1px solid var(--m-hairline);
}

.m-cart__thumb {
	background: var(--m-tint);
	overflow: hidden;
	aspect-ratio: var(--m-crop);
}

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

.m-cart__line {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	font: 400 .875rem/1.4 var(--m-sans);
}

.m-cart__price {
	white-space: nowrap;
}

.m-cart__meta {
	font: 500 .6875rem/1.6 var(--m-sans);
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--m-label);
	margin-top: .375rem;
}

.m-cart__controls {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-top: 1rem;
}

.m-qty {
	display: flex;
	align-items: center;
	border: 1px solid var(--m-hairline);
}

.m-qty__btn {
	width: 2.25rem;
	height: 2.25rem;
	display: grid;
	place-items: center;
	font: 400 1rem/1 var(--m-sans);
	color: var(--m-label);
	transition: color .2s;
}

.m-qty__btn:hover {
	color: var(--m-ink);
}

.m-qty__n {
	min-width: 2rem;
	text-align: center;
	font: 400 .875rem/1 var(--m-sans);
}

.m-cart__remove {
	font: 500 .6875rem/1 var(--m-sans);
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--m-label);
	border-bottom: 1px solid transparent;
	padding-bottom: .25rem;
	transition: color .3s, border-color .3s;
}

.m-cart__remove:hover {
	color: var(--m-ink);
	border-bottom-color: var(--m-ink);
}

.m-cart__foot {
	flex: none;
	padding: 1.5rem var(--m-gutter) 2rem;
	border-top: 1px solid var(--m-hairline);
}

.m-cart__total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	font: 500 .75rem/1 var(--m-sans);
	letter-spacing: .24em;
	text-transform: uppercase;
}

.m-cart__totalValue {
	font-size: .9375rem;
	letter-spacing: .04em;
}

.m-cart__note {
	margin: .875rem 0 1.5rem;
	font: 400 .75rem/1.6 var(--m-sans);
	color: var(--m-label);
}

.m-cart__checkout {
	display: block;
	text-align: center;
	background: var(--m-ink);
	color: var(--m-ground);
	padding: 1.125rem 1.5rem;
	font: 500 .75rem/1 var(--m-sans);
	letter-spacing: .24em;
	text-transform: uppercase;
	transition: opacity .3s;
}

.m-cart__checkout:hover {
	color: var(--m-ground);
	opacity: .82;
}

.m-cart__viewbag {
	display: block;
	text-align: center;
	margin-top: 1rem;
	font: 500 .6875rem/1 var(--m-sans);
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--m-label);
	transition: color .3s;
}

.m-cart__viewbag:hover {
	color: var(--m-ink);
}

.m-cart__empty {
	flex: 1;
	display: grid;
	place-content: center;
	justify-items: center;
	gap: 1.5rem;
	padding: var(--m-gutter);
	text-align: center;
	font: 400 .9375rem/1.6 var(--m-sans);
	color: var(--m-label);
}

/* A pending request dims the drawer rather than blocking it. */
body.is-cart-busy .m-cart__body {
	opacity: .5;
	transition: opacity .2s;
	pointer-events: none;
}

@media (max-width: 1023px) {

	/* A phone has no room for the wordmark beside an open field. */
	.m-header.is-searching .m-wordmark {
		opacity: 0;
		visibility: hidden;
	}

	.m-header.is-searching .m-hsearch__field {
		width: 9.5rem;
	}

	.m-hsearch__field {
		font-size: 1rem;
	}

	.m-cart__panel {
		width: 100%;
	}

	.m-cart__head,
	.m-cart__items,
	.m-cart__foot {
		padding-left: 1.25rem;
		padding-right: 1.25rem;
	}

	.m-cart__item {
		grid-template-columns: 4.5rem 1fr;
	}

	/* Everything in the drawer is a thumb target on a phone. */
	.m-qty__btn {
		width: 2.75rem;
		height: 2.75rem;
	}

	.m-cart__remove {
		min-height: 2.75rem;
		display: inline-flex;
		align-items: center;
	}

	.m-cart__checkout {
		padding-top: 1.25rem;
		padding-bottom: 1.25rem;
	}

	.m-cart__viewbag {
		min-height: 2.75rem;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: .5rem;
	}
}

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

	.m-cart__panel,
	.m-cart__scrim,
	.m-hsearch {
		transition: none;
	}
}

/* ==========================================================================
   39 · Blog index
   --------------------------------------------------------------------------
   Title and standfirst, a filter row, then a two-column grid of cards laid
   image-left / copy-right, each row closed with a hairline.
   ========================================================================== */

.m-blog {
	padding-bottom: 6.5rem;
}

.m-blog__head {
	padding: 5rem 0 0;
}

/* Blog title, rule and standfirst are shared with the size guide — see §40. */

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

.m-blog__bar {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 2rem;
	flex-wrap: wrap;
	padding: 4.5rem 0 2.5rem;
}

.m-blog__filters {
	display: flex;
	flex-wrap: wrap;
	gap: 2.5rem;
}

.m-blog__filter {
	font: 500 .75rem/1.6 var(--m-sans);
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--m-label);
	border-bottom: 1px solid transparent;
	padding-bottom: .375rem;
	transition: color .3s, border-color .3s;
}

.m-blog__filter:hover,
.m-blog__filter.is-current {
	color: var(--m-ink);
	border-bottom-color: var(--m-ink);
}

.m-blog__sort {
	font: 500 .75rem/1.6 var(--m-sans);
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--m-label);
}

/* ---------- The grid ------------------------------------------------------- */

.m-blog__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 3.5rem;
}

.m-blogcard {
	display: grid;
	grid-template-columns: 15.25rem 1fr;
	gap: 1.75rem;
	align-items: start;
	padding: 1.5rem 0;
	border-bottom: 1px solid var(--m-hairline);
}

/* The first row sits under the filter rule rather than doubling it. */
.m-blog__grid > .m-blogcard:nth-child(1),
.m-blog__grid > .m-blogcard:nth-child(2) {
	padding-top: 0;
}

.m-blogcard__crop {
	display: block;
}

.m-tile--blog {
	height: auto;
	aspect-ratio: 4 / 5;
}

.m-blogcard__body {
	padding-top: .375rem;
}

.m-blogcard__cat {
	display: inline-block;
	font: 500 .6875rem/1 var(--m-sans);
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--m-label);
	margin-bottom: 1.125rem;
	transition: color .3s;
}

.m-blogcard__cat:hover {
	color: var(--m-ink);
}

.m-blogcard__title {
	margin: 0 0 1rem;
	font: 400 1.375rem/1.25 var(--m-sans);
	letter-spacing: .01em;
	color: var(--m-ink);
}

/*
 * Up from .875rem. The cap widens in proportion — at 17rem the larger size
 * ran each excerpt to four short lines against a 1.375rem title.
 */
.m-blogcard__excerpt {
	margin: 0;
	font: 400 1.0625rem/1.7 var(--m-sans);
	color: var(--m-body);
	max-width: 22rem;
}

.m-blogcard__foot {
	margin-top: 2.25rem;
}

.m-blogcard__date {
	display: block;
	font: 500 .6875rem/1 var(--m-sans);
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--m-label);
	margin-bottom: 1rem;
}

.m-blogcard__more {
	display: inline-flex;
	align-items: center;
	gap: .625rem;
	font: 500 .6875rem/1 var(--m-sans);
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--m-ink);
}

.m-blogcard__arrow {
	transition: transform .3s var(--m-ease);
}

.m-blogcard__more:hover .m-blogcard__arrow {
	transform: translateX(.375rem);
}

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

.m-blog__pages {
	padding-top: 3.5rem;
}

.m-blog__pages .nav-links {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 2rem;
	font: 500 .75rem/1 var(--m-sans);
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--m-label);
}

.m-blog__pages .page-numbers {
	transition: color .3s;
}

.m-blog__pages a.page-numbers:hover {
	color: var(--m-ink);
}

.m-blog__pages .page-numbers.current {
	color: var(--m-ink);
	border-bottom: 1px solid var(--m-ink);
	padding-bottom: .375rem;
}

.m-blog__pages .next,
.m-blog__pages .prev {
	color: var(--m-ink);
}

/* ---------- Responsive ------------------------------------------------------ */

@media (max-width: 1023px) {

	.m-blog {
		padding-bottom: 3.5rem;
	}

	.m-blog__head {
		padding-top: 2.5rem;
	}

	.m-blog__title {
		font-size: 1.75rem;
		letter-spacing: .18em;
	}

	.m-blog__rule {
		margin: 1.25rem 0 1rem;
	}

	.m-blog__bar {
		padding: 2.25rem 0 1.5rem;
		gap: 1rem;
	}

	.m-blog__filters {
		gap: 1.25rem;
		width: 100%;
		overflow-x: auto;
		flex-wrap: nowrap;
		scrollbar-width: none;
	}

	.m-blog__filters::-webkit-scrollbar {
		display: none;
	}

	.m-blog__filter {
		white-space: nowrap;
		min-height: 2.75rem;
		display: inline-flex;
		align-items: center;
	}

	.m-blog__grid {
		grid-template-columns: 1fr;
	}

	.m-blog__grid > .m-blogcard:nth-child(2) {
		padding-top: 2.25rem;
	}

	.m-blogcard {
		grid-template-columns: 7.5rem 1fr;
		gap: 1.25rem;
	}

	.m-blogcard__excerpt {
		max-width: none;
	}

	.m-blogcard__foot {
		margin-top: 1.25rem;
	}

	.m-blogcard__more {
		min-height: 2.75rem;
	}

	.m-blog__pages .nav-links {
		gap: 1.25rem;
	}

	.m-blog__pages .page-numbers {
		min-height: 2.75rem;
		display: inline-flex;
		align-items: center;
	}
}

@media (max-width: 599px) {

	.m-blogcard {
		grid-template-columns: 1fr;
		gap: 1rem;
	}

	.m-blogcard__crop {
		max-width: 12rem;
	}
}

/* ==========================================================================
   40 · Blog article
   --------------------------------------------------------------------------
   Back link, then two columns: the piece on the left, a sticky rail of
   related posts and a sign-up on the right. Closes on a share row.
   ========================================================================== */

.m-article {
	padding-bottom: 6.5rem;
}

.m-article__back {
	display: inline-flex;
	align-items: center;
	gap: .875rem;
	margin: 3.5rem 0 3rem;
	font: 500 .6875rem/1 var(--m-sans);
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--m-ink);
}

.m-article__backArrow {
	transition: transform .3s var(--m-ease);
}

.m-article__back:hover .m-article__backArrow {
	transform: translateX(-.375rem);
}

/* The reference splits the page about 2.2 : 1 between the piece and the rail,
   so a fraction keeps that ratio at every width rather than a fixed rail. */
.m-article__layout {
	display: grid;
	grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr);
	gap: 4.5rem;
	align-items: start;
}

/* ---------- The piece ------------------------------------------------------ */

.m-article__meta {
	display: flex;
	align-items: center;
	gap: .75rem;
	font: 500 .6875rem/1 var(--m-sans);
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--m-label);
	margin-bottom: 1.25rem;
}

.m-article__meta a {
	transition: color .3s;
}

.m-article__meta a:hover {
	color: var(--m-ink);
}

.m-article__title {
	margin: 0 0 1.25rem;
	font: 400 2.375rem/1.15 var(--m-sans);
	letter-spacing: .005em;
	color: var(--m-ink);
}

.m-article__lede {
	margin: 0;
	font: 400 1.40625rem/1.55 var(--m-sans);
	color: var(--m-body);
	max-width: 34rem;
}

.m-article__rule {
	display: block;
	width: 2.5rem;
	height: 1px;
	background: var(--m-hairline-soft);
	margin: 2.25rem 0;
}

.m-article__hero {
	margin: 0 0 2.5rem;
	background: var(--m-tint);
	overflow: hidden;
}

.m-article__hero img {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	display: block;
}

/* ---------- Body ----------------------------------------------------------- */

.m-article__body {
	font: 400 1.3125rem/1.7 var(--m-sans);
	color: var(--m-body);
	max-width: 46rem;
	padding-left: 2.375rem;
}

.m-article__body > * + * {
	margin-top: 1.5rem;
}

/* Subheadings are set as caps labels, not as display type. */
.m-article__body h2,
.m-article__body h3 {
	margin-top: 2.75rem;
	font: 500 .75rem/1.6 var(--m-sans);
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--m-ink);
}

.m-article__body h2 + p,
.m-article__body h3 + p {
	margin-top: 1rem;
}

.m-article__body p {
	margin: 0;
}

.m-article__body a {
	color: var(--m-ink);
	border-bottom: 1px solid var(--m-hairline-soft);
	transition: border-color .3s;
}

.m-article__body a:hover {
	border-color: var(--m-ink);
}

.m-article__body blockquote {
	font: 300 italic 1.25rem/1.6 var(--m-sans);
	color: var(--m-ink);
	padding-left: 1.5rem;
	border-left: 1px solid var(--m-hairline);
}

.m-article__body ul,
.m-article__body ol {
	padding-left: 1.25rem;
}

.m-article__figure {
	margin: 2.25rem 0;
	background: var(--m-tint);
	overflow: hidden;
}

.m-article__figure img {
	width: 100%;
	height: auto;
	display: block;
}

.m-article__figure figcaption {
	margin-top: .875rem;
	font: 500 .625rem/1.6 var(--m-sans);
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--m-label);
}

/* ---------- Share and next ------------------------------------------------- */

.m-article__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
	flex-wrap: wrap;
	margin-top: 3rem;
	padding-top: 1.75rem;
	border-top: 1px solid var(--m-hairline);
}

.m-share {
	display: flex;
	align-items: center;
	gap: 1.5rem;
}

.m-share__label {
	font: 500 .6875rem/1 var(--m-sans);
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--m-ink);
	margin-right: .5rem;
}

.m-share__item {
	display: grid;
	place-items: center;
	width: 1.5rem;
	height: 1.5rem;
	color: var(--m-ink);
	transition: opacity .3s;
}

.m-share__item:hover {
	opacity: .55;
}

.m-article__next {
	display: inline-flex;
	align-items: center;
	gap: .875rem;
	font: 500 .6875rem/1 var(--m-sans);
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--m-ink);
}

.m-article__nextArrow {
	transition: transform .3s var(--m-ease);
}

.m-article__next:hover .m-article__nextArrow {
	transform: translateX(.375rem);
}

/* ---------- The rail -------------------------------------------------------- */

.m-article__rail {
	position: sticky;
	top: 8rem;
}

.m-related__title,
.m-inspired__title {
	margin: 0;
	font: 500 .6875rem/1 var(--m-sans);
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--m-ink);
}

/* The signup heading steps up on its own; RELATED POSTS above it keeps the
   shared setting. */
.m-inspired__title {
	font-size: .8125rem;
}

.m-related__rule {
	display: block;
	width: 2.25rem;
	height: 1px;
	background: var(--m-hairline-soft);
	margin: 1.125rem 0 2rem;
}

.m-relcard {
	display: grid;
	grid-template-columns: 7rem 1fr;
	gap: 1.25rem;
	align-items: start;
	margin-bottom: 1.75rem;
}

.m-relcard__crop {
	display: block;
}

.m-tile--rel {
	height: auto;
	aspect-ratio: 4 / 5;
}

.m-relcard__cat {
	display: inline-block;
	font: 500 .625rem/1 var(--m-sans);
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--m-label);
	margin-bottom: .625rem;
	transition: color .3s;
}

.m-relcard__cat:hover {
	color: var(--m-ink);
}

.m-relcard__title {
	margin: 0 0 .75rem;
	font: 400 1rem/1.3 var(--m-sans);
	color: var(--m-ink);
}

.m-relcard__date {
	display: block;
	font: 500 .625rem/1 var(--m-sans);
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--m-label);
	margin-bottom: .75rem;
}

.m-relcard__more {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	font: 500 .625rem/1 var(--m-sans);
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--m-ink);
}

.m-relcard__arrow {
	transition: transform .3s var(--m-ease);
}

.m-relcard__more:hover .m-relcard__arrow {
	transform: translateX(.25rem);
}

/* ---------- Stay inspired ---------------------------------------------------- */

.m-inspired {
	margin-top: 3.5rem;
}

.m-inspired__copy {
	margin: 1.25rem 0 1.5rem;
	font: 400 1.0625rem/1.7 var(--m-sans);
	color: var(--m-body);
}

.m-inspired__form {
	display: flex;
	align-items: center;
	gap: .75rem;
	border-bottom: 1px solid var(--m-hairline-soft);
	padding-bottom: .75rem;
}

.m-inspired__form input[type="email"] {
	flex: 1;
	min-width: 0;
	border: 0;
	background: none;
	padding: 0;
	font: 400 1rem/1.4 var(--m-sans);
	color: var(--m-ink);
}

.m-inspired__form input[type="email"]::placeholder {
	color: var(--m-label);
	opacity: 1;
}

.m-inspired__form input[type="email"]:focus {
	outline: none;
}

.m-inspired__form button {
	display: grid;
	place-items: center;
	width: 1.5rem;
	height: 1.5rem;
	color: var(--m-ink);
	flex: none;
	transition: transform .3s var(--m-ease);
}

.m-inspired__form button:hover {
	transform: translateX(.25rem);
}

/* ---------- Responsive -------------------------------------------------------- */

@media (max-width: 1023px) {

	.m-article {
		padding-bottom: 3.5rem;
	}

	.m-article__back {
		margin: 1.75rem 0 1.5rem;
		min-height: 2.75rem;
	}

	.m-article__layout {
		grid-template-columns: 1fr;
		gap: 3.5rem;
	}

	.m-article__title {
		font-size: 1.75rem;
	}

	.m-article__lede {
		max-width: none;
	}

	.m-article__rule {
		margin: 1.5rem 0;
	}

	/* The measure is the column on a phone; the indent is not needed, and the
	   doubled desktop size has to come back to something readable. */
	.m-article__body {
		padding-left: 0;
		max-width: none;
		font-size: 1.0625rem;
		line-height: 1.75;
	}

	.m-article__body h2,
	.m-article__body h3 {
		font-size: .75rem;
		margin-top: 2.25rem;
	}

	.m-article__lede {
		font-size: 1.125rem;
		line-height: 1.7;
	}

	.m-article__rail {
		position: static;
		border-top: 1px solid var(--m-hairline);
		padding-top: 2.5rem;
	}

	.m-relcard {
		grid-template-columns: 6rem 1fr;
	}

	.m-article__foot {
		gap: 1.25rem;
	}

	.m-share__item,
	.m-article__next,
	.m-relcard__more,
	.m-inspired__form button {
		min-height: 2.75rem;
	}

	.m-share__item {
		width: 2.75rem;
	}

	.m-inspired__form button {
		width: 2.75rem;
	}
}

/* ==========================================================================
   41 · Comments
   --------------------------------------------------------------------------
   Caps label above, underline beneath. No boxes, no rounded corners, and the
   form sits on the article's own measure rather than the full page width.
   ========================================================================== */

.m-comments {
	max-width: 46rem;
	margin-top: 4.5rem;
	padding-top: 3.5rem;
	border-top: 1px solid var(--m-hairline);
}

.m-comments__title {
	margin: 0 0 1.5rem;
	font: 500 .8125rem/1 var(--m-sans);
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--m-ink);
}

/* ---------- Existing notes -------------------------------------------------- */

.m-comments__list {
	list-style: none;
	margin: 0 0 3rem;
	padding: 0;
}

.m-comments__list ol.children {
	list-style: none;
	margin: 1.5rem 0 0 2rem;
	padding: 0;
}

.m-comments__list li.comment,
.m-comments__list li.pingback {
	padding: 1.5rem 0;
	border-bottom: 1px solid var(--m-hairline);
}

.m-comments__list .comment-author {
	font: 500 .6875rem/1 var(--m-sans);
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--m-ink);
}

.m-comments__list .comment-author .says {
	display: none;
}

.m-comments__list .comment-metadata {
	margin-top: .5rem;
	font: 500 .625rem/1 var(--m-sans);
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--m-label);
}

.m-comments__list .comment-content {
	margin-top: 1rem;
	font: 400 1rem/1.85 var(--m-sans);
	color: var(--m-body);
}

.m-comments__list .reply {
	margin-top: .875rem;
	font: 500 .625rem/1 var(--m-sans);
	letter-spacing: .18em;
	text-transform: uppercase;
}

.m-comments__list .reply a {
	color: var(--m-label);
	border-bottom: 1px solid transparent;
	padding-bottom: .25rem;
	transition: color .3s, border-color .3s;
}

.m-comments__list .reply a:hover {
	color: var(--m-ink);
	border-bottom-color: var(--m-ink);
}

/* ---------- The form -------------------------------------------------------- */

.m-form__note,
.comment-notes {
	margin: 0 0 2.5rem;
	font: 400 1rem/1.7 var(--m-sans);
	color: var(--m-label);
}

.m-form {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2rem 2.5rem;
	align-items: end;
}

.m-form__row {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: .625rem;
}

/* The comment box, the consent line and the button each take the full width. */
.m-form__row--wide,
.m-form__row--check,
.m-form .form-submit {
	grid-column: 1 / -1;
}

.m-form label {
	font: 500 .75rem/1 var(--m-sans);
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--m-label);
}

.m-form__req {
	color: var(--m-label);
}

.m-form input[type="text"],
.m-form input[type="email"],
.m-form input[type="url"],
.m-form textarea {
	width: 100%;
	border: 0;
	border-bottom: 1px solid var(--m-hairline);
	border-radius: 0;
	background: none;
	padding: .625rem 0;
	font: 400 1rem/1.6 var(--m-sans);
	color: var(--m-ink);
	transition: border-color .3s;
}

.m-form textarea {
	resize: vertical;
	min-height: 8rem;
}

.m-form input:focus,
.m-form textarea:focus {
	outline: none;
	border-bottom-color: var(--m-ink);
}

/* ---------- Consent line ------------------------------------------------------ */

.m-form__row--check {
	flex-direction: row;
	align-items: center;
	gap: .75rem;
}

.m-form__row--check input[type="checkbox"] {
	appearance: none;
	width: 1rem;
	height: 1rem;
	border: 1px solid var(--m-hairline-soft);
	border-radius: 0;
	background: none;
	flex: none;
	cursor: pointer;
	display: grid;
	place-items: center;
	transition: border-color .3s;
}

.m-form__row--check input[type="checkbox"]:checked {
	border-color: var(--m-ink);
	background: var(--m-ink);
}

.m-form__row--check input[type="checkbox"]:checked::after {
	content: "";
	width: .3125rem;
	height: .5625rem;
	border: solid var(--m-ground);
	border-width: 0 1px 1px 0;
	transform: translateY(-1px) rotate(45deg);
}

.m-form__row--check label {
	text-transform: none;
	letter-spacing: .01em;
	font: 400 1rem/1.5 var(--m-sans);
	color: var(--m-body);
	cursor: pointer;
}

/* ---------- Submit ------------------------------------------------------------ */

.m-form .form-submit {
	margin: .5rem 0 0;
}

.m-form__submit,
.m-form input[type="submit"] {
	background: var(--m-ink);
	color: var(--m-ground);
	border: 0;
	border-radius: 0;
	padding: 1.125rem 2.5rem;
	/* Kept a step above the field labels it closes the form under. */
	font: 500 .8125rem/1 var(--m-sans);
	letter-spacing: .22em;
	text-transform: uppercase;
	cursor: pointer;
	transition: opacity .3s;
}

.m-form__submit:hover,
.m-form input[type="submit"]:hover {
	opacity: .82;
}

/* Shown in place of the name and email row when signed in; same role as the
   note above it, so the same size. */
.m-comments .logged-in-as,
.m-comments .comment-form-cookies-consent {
	font: 400 1rem/1.6 var(--m-sans);
	color: var(--m-label);
}

@media (max-width: 1023px) {

	.m-comments {
		margin-top: 2.5rem;
		padding-top: 2.25rem;
		max-width: none;
	}

	.m-form {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}

	.m-form__submit,
	.m-form input[type="submit"] {
		width: 100%;
		min-height: 3rem;
	}

	.m-form__row--check input[type="checkbox"] {
		width: 1.25rem;
		height: 1.25rem;
	}

	/* The label is the real target here, so give the whole row the height. */
	.m-form__row--check {
		min-height: 2.75rem;
	}

	.m-form__row--check label {
		min-height: 2.75rem;
		display: flex;
		align-items: center;
	}
}

/* ==========================================================================
   42 · Mega menu
   --------------------------------------------------------------------------
   A rail of sections on the left, the chosen section's contents on the right.
   Sits below the header, which stays put with its burger turned into a cross.
   ========================================================================== */

.m-mega {
	position: fixed;
	top: var(--m-header-h);
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 45;
	background: var(--m-ground);
	border-top: 1px solid var(--m-hairline);
	opacity: 0;
	visibility: hidden;
	transition: opacity .3s ease, visibility .3s ease;
	overflow: hidden;
}

.m-mega.is-open {
	opacity: 1;
	visibility: visible;
}

.m-mega__inner {
	display: grid;
	grid-template-columns: 26rem minmax(0, 1fr);
	height: 100%;
	max-width: var(--m-canvas, 1800px);
	margin: 0 auto;
}

/* ---------- The rail ------------------------------------------------------- */

.m-mega__rail {
	border-right: 1px solid var(--m-hairline);
	overflow-y: auto;
	padding: 1.5rem 0 3rem;
}

.m-mega__railItem {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	width: 100%;
	padding: 1.375rem 3rem;
	font: 500 .875rem/1 var(--m-sans);
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--m-ink);
	text-align: left;
	background: none;
	transition: background-color .25s ease;
}

.m-mega__railItem:hover,
.m-mega__railItem.is-current {
	background: #f2f2f2;
}

.m-mega__railLabel {
	display: inline-flex;
	align-items: center;
	gap: 1rem;
}

.m-mega__railLabel svg {
	width: 1.125rem;
	height: 1.125rem;
	flex: none;
}

.m-mega__chev {
	font-size: 1.125rem;
	line-height: 1;
	color: var(--m-label);
}

/* The secondary block sits under a rule with a little air above it. */
.m-mega__railItem.has-break {
	margin-top: 1.75rem;
	position: relative;
}

.m-mega__railItem.has-break::before {
	content: "";
	position: absolute;
	top: -1.75rem;
	left: 3rem;
	right: 3rem;
	height: 1px;
	background: var(--m-hairline);
}

/* ---------- The panels ------------------------------------------------------ */

.m-mega__panels {
	position: relative;
	overflow-y: auto;
	padding: 2.5rem 3.5rem 0;
}

.m-mega__panel {
	display: none;
}

.m-mega__panel.is-active {
	display: block;
}

.m-mega__title {
	margin: 0;
	font: 500 .875rem/1 var(--m-sans);
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--m-ink);
}

.m-mega__rule {
	display: block;
	width: 2.25rem;
	height: 1px;
	background: var(--m-ink);
	margin: 1.125rem 0 1.5rem;
}

.m-mega__intro {
	margin: 0 0 2.25rem;
	font: 400 .9375rem/1.85 var(--m-sans);
	color: var(--m-body);
	max-width: 30rem;
}

/* ---------- A group inside a panel ------------------------------------------ */

/* Two collections across, so the panel reads as a block rather than a column
   that runs off the bottom of the screen. */
.m-mega__groups {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2.75rem 3rem;
}

/* No rules between groups — the whitespace does the separating. */
.m-mega__group {
	display: grid;
	grid-template-columns: 7rem minmax(0, 1fr);
	gap: 1.75rem;
	align-items: start;
}

/* A panel with a single plain list has no second column to fill. */
.m-mega__group--plain {
	grid-template-columns: 7rem minmax(0, 1fr);
	max-width: 34rem;
}

.m-mega__groupCrop {
	display: block;
}

.m-tile--mega {
	height: auto;
	aspect-ratio: 4 / 5;
}

.m-mega__groupName {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	width: 100%;
	max-width: 22rem;
	font: 500 .875rem/1 var(--m-sans);
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--m-ink);
	margin-bottom: 1.375rem;
}

/*
 * Sized against forevernew.co.in's drawer, where the sub-links run 16px at 1.6
 * in rows about 45px deep. At .875rem on a .625rem gap these were 14px in
 * 30px rows — legible on a desktop pointer, cramped under a thumb, and short
 * of the 44px a tap target wants.
 */
.m-mega__links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: .375rem;
	font: 400 1rem/1.6 var(--m-sans);
	color: var(--m-body);
}

/* Block, so the padding builds the row rather than just insetting the text. */
.m-mega__links a {
	display: block;
	padding: .375rem 0;
	transition: color .25s ease;
}

.m-mega__links a:hover {
	color: var(--m-ink);
}

/* ---------- Footnote --------------------------------------------------------- */

.m-mega__foot {
	display: flex;
	align-items: center;
	gap: 2rem;
	margin-top: 1.5rem;
	padding: 2rem 0 2.5rem;
	border-top: 1px solid var(--m-hairline);
}

.m-mega__mark {
	display: grid;
	place-items: center;
	color: var(--m-label);
	padding-right: 2rem;
	border-right: 1px solid var(--m-hairline);
}

.m-mega__mark svg {
	width: 2.5rem;
	height: 2.5rem;
}

.m-mega__foot p {
	margin: 0;
	font: 400 .875rem/1.75 var(--m-sans);
	color: var(--m-body);
}

/* ---------- The burger becomes a cross while open ---------------------------- */

.m-nav__toggle {
	display: grid;
	width: 2.75rem;
	height: 2.75rem;
	place-items: center;
	color: inherit;
}

.m-burger {
	display: block;
}

.m-header.is-menu-open .m-burger span:first-child {
	top: .71875rem;
	transform: rotate(45deg);
}

.m-header.is-menu-open .m-burger span:last-child {
	top: .71875rem;
	transform: rotate(-45deg);
}

/* The rail carries the collections; these sit in the bar beside the burger. */
.m-nav__list {
	display: flex;
	gap: 2.125rem;
	list-style: none;
	margin: 0 0 0 1.75rem;
	padding: 0;
	font: 500 .6875rem/1 var(--m-sans);
	letter-spacing: .2em;
	text-transform: uppercase;
	color: inherit;
}

.m-nav__list a {
	transition: opacity .3s;
	white-space: nowrap;
}

.m-nav__list a:hover {
	opacity: .6;
}

/* The same links live in the rail too, for phones where the bar has no room. */
.m-mega__railItem--bar {
	display: none;
}

/* No scrollbar chrome anywhere in the menu; it still scrolls if it must. */
.m-mega__rail,
.m-mega__panels {
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.m-mega__rail::-webkit-scrollbar,
.m-mega__panels::-webkit-scrollbar {
	display: none;
	width: 0;
	height: 0;
}

/* ---------- Responsive -------------------------------------------------------- */

@media (max-width: 1023px) {

	.m-mega__inner {
		grid-template-columns: 1fr;
		grid-template-rows: auto minmax(0, 1fr);
	}

	.m-mega__rail {
		border-right: 0;
		border-bottom: 1px solid var(--m-hairline);
		padding: .5rem 0;
		display: flex;
		gap: 0;
		overflow-x: auto;
		flex-wrap: nowrap;
		scrollbar-width: none;
	}

	.m-mega__rail::-webkit-scrollbar {
		display: none;
	}

	/* 11px in a 44px strip was the smallest type anywhere on the site. */
	.m-mega__railItem {
		width: auto;
		white-space: nowrap;
		padding: 1rem 1.375rem;
		min-height: 3rem;
		font-size: .8125rem;
	}

	.m-mega__railItem .m-mega__chev {
		display: none;
	}

	.m-nav__list {
		display: none;
	}

	.m-mega__railItem--bar {
		display: inline-flex;
	}

	.m-mega__railItem.has-break {
		margin-top: 0;
	}

	.m-mega__railItem.has-break::before {
		top: 1rem;
		bottom: 1rem;
		left: 0;
		right: auto;
		width: 1px;
		height: auto;
	}

	.m-mega__panels {
		padding: 1.75rem var(--m-gutter) 0;
	}

	.m-mega__groups {
		grid-template-columns: 1fr;
		gap: 2rem;
	}

	.m-mega__group {
		grid-template-columns: 5.5rem minmax(0, 1fr);
		gap: 1.25rem;
	}

	.m-mega__links a,
	.m-mega__groupName {
		display: inline-flex;
		align-items: center;
		min-height: 2.75rem;
	}

	.m-mega__links {
		gap: 0;
	}

	.m-mega__foot {
		gap: 1.25rem;
		padding: 1.5rem 0 2rem;
	}

	.m-mega__mark {
		padding-right: 1.25rem;
	}
}

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

	.m-mega,
	.m-burger span {
		transition: none;
	}
}

/* ==========================================================================
   40 · Size guide
   --------------------------------------------------------------------------
   Title and standfirst, a how-to-measure figure with three numbered steps,
   tabbed charts, an advice pair, and the conversion table.
   ========================================================================== */

.m-sg {
	padding-bottom: 6.5rem;
}

/* The page opener is the blog's, so the two read as one family. */
.m-sg__head {
	padding: 5rem 0 0;
	text-align: center;
}

/* Offset the trailing letter-spacing so the title sits truly centred. */
.m-sg__title {
	padding-left: .22em;
}

.m-blog__title,
.m-sg__title {
	margin: 0;
	font: 300 2.75rem/1 var(--m-sans);
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--m-ink);
}

.m-blog__rule,
.m-sg__rule {
	display: block;
	width: 2.75rem;
	height: 1px;
	background: var(--m-ink);
	margin: 1.75rem 0 1.5rem;
}

.m-sg__intro {
	margin: 0;
	font: 400 .875rem/1.9 var(--m-sans);
	color: var(--m-body);
	max-width: 26rem;
}

/*
 * Was sharing the size guide's rule at .875rem. The blog's standfirst is the
 * only copy on the index that is not a label, so it reads at body size; the
 * measure widens with it or the two lines break into three.
 */
.m-blog__intro {
	margin: 0;
	font: 400 1.0625rem/1.8 var(--m-sans);
	color: var(--m-body);
	max-width: 32rem;
}

/* ---------- Section labels -------------------------------------------------- */

.m-sg__section {
	padding-top: 4.5rem;
}

.m-sg__label {
	margin: 0 0 1.75rem;
	font: 500 .875rem/1 var(--m-sans);
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--m-ink);
}

/* ---------- How to measure --------------------------------------------------- */

.m-sg__measure {
	display: grid;
	grid-template-columns: 22.5rem 1fr;
	gap: 4.5rem;
	align-items: start;
	padding-top: 0;
}

.m-sg__figure {
	position: relative;
}

.m-tile--measure {
	height: auto;
	aspect-ratio: 1 / 1;
}

/* A dashed rule across the body, with its number sitting off the edge. */
.m-sg__mark {
	position: absolute;
	left: 22%;
	right: -1.375rem;
	display: flex;
	align-items: center;
	gap: .75rem;
	transform: translateY(-50%);
	pointer-events: none;
}

.m-sg__markLine {
	flex: 1;
	border-top: 1px dashed rgba(255, 255, 255, .95);
}

.m-sg__markNum,
.m-sg__stepNum {
	flex: none;
	width: 1.5rem;
	height: 1.5rem;
	display: grid;
	place-items: center;
	border: 1px solid var(--m-ink);
	border-radius: 50%;
	background: var(--m-ground);
	font: 400 .75rem/1 var(--m-sans);
	color: var(--m-ink);
}

.m-sg__steps {
	list-style: none;
	margin: 0;
	padding: 0;
}

.m-sg__step {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 1.5rem;
	align-items: start;
	padding: 1rem 0;
}

.m-sg__step:first-child {
	padding-top: 0;
}

.m-sg__stepLabel {
	margin: 0 0 .75rem;
	font: 500 .9375rem/1 var(--m-sans);
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--m-ink);
}

.m-sg__stepText {
	margin: 0;
	font: 400 1.0625rem/1.7 var(--m-sans);
	color: var(--m-body);
	max-width: 22rem;
}

/* ---------- Tabs and charts --------------------------------------------------- */

.m-sg__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 3.5rem;
	border-bottom: 1px solid var(--m-hairline);
	padding-bottom: 1.25rem;
	margin-bottom: 2.5rem;
}

.m-sg__tab {
	position: relative;
	font: 500 .875rem/1 var(--m-sans);
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--m-label);
	padding-bottom: 1.25rem;
	margin-bottom: -1.3125rem;
	border-bottom: 1px solid transparent;
	transition: color .3s, border-color .3s;
}

.m-sg__tab:hover,
.m-sg__tab.is-current {
	color: var(--m-ink);
	border-bottom-color: var(--m-ink);
}

.m-sg__panel {
	display: none;
}

.m-sg__panel.is-current {
	display: block;
}

.m-sg__scroll {
	overflow-x: auto;
}

.m-sg__table {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid var(--m-hairline);
	font: 400 .875rem/1 var(--m-sans);
	min-width: 40rem;
}

.m-sg__table th,
.m-sg__table td {
	border: 1px solid var(--m-hairline);
	padding: 1.0625rem 1rem;
	text-align: center;
	white-space: nowrap;
}

/* The label column reads as a label, not as data. */
.m-sg__table thead th,
.m-sg__table tbody th {
	font: 500 .8125rem/1 var(--m-sans);
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--m-ink);
}

.m-sg__table tbody th {
	text-align: left;
	width: 12rem;
}

.m-sg__table td {
	color: var(--m-body);
}

/* ---------- Advice pair -------------------------------------------------------- */

.m-sg__advice {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4.5rem;
	align-items: start;
	padding-top: 4.5rem;
}

.m-sg__adviceText {
	margin: 0;
	font: 400 1.0625rem/1.8 var(--m-sans);
	color: var(--m-body);
	max-width: 22rem;
}

.m-sg__help {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 1.5rem;
	align-items: start;
	background: #f7f7f7;
	padding: 1.75rem 2rem;
}

.m-sg__helpIcon {
	color: var(--m-ink);
	display: block;
	padding-top: .125rem;
}

.m-sg__helpTitle {
	margin: 0 0 .375rem;
	font: 400 1.0625rem/1.3 var(--m-sans);
	color: var(--m-ink);
}

.m-sg__helpText {
	margin: 0 0 1.125rem;
	font: 400 1rem/1.6 var(--m-sans);
	color: var(--m-body);
}

.m-sg__helpLink {
	display: inline-flex;
	align-items: center;
	gap: .625rem;
	font: 500 .8125rem/1 var(--m-sans);
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--m-ink);
}

.m-sg__helpLink span {
	transition: transform .3s var(--m-ease);
}

.m-sg__helpLink:hover span {
	transform: translateX(.375rem);
}

/* ---------- Responsive ---------------------------------------------------------- */

@media (max-width: 1023px) {

	.m-sg {
		padding-bottom: 3.5rem;
	}

	.m-sg__head {
		padding-top: 2.5rem;
	}

	.m-sg__title {
		padding-left: .18em;
		font-size: 1.75rem;
		letter-spacing: .18em;
	}

	.m-sg__rule {
		margin: 1.25rem 0 1rem;
	}

	.m-sg__section {
		padding-top: 2.5rem;
	}

	.m-sg__measure,
	.m-sg__advice {
		grid-template-columns: 1fr;
		gap: 2rem;
	}

	.m-sg__figure {
		max-width: 20rem;
	}

	.m-sg__step {
		padding: .75rem 0;
		gap: 1rem;
	}

	.m-sg__tabs {
		gap: 1.5rem;
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
	}

	.m-sg__tabs::-webkit-scrollbar {
		display: none;
	}

	.m-sg__tab {
		white-space: nowrap;
		min-height: 2.75rem;
	}

	.m-sg__help {
		padding: 1.25rem 1.25rem;
	}

	.m-sg__helpLink {
		min-height: 2.75rem;
	}

	.m-sg__table {
		min-width: 34rem;
	}

	.m-sg__table th,
	.m-sg__table td {
		padding: .875rem .75rem;
	}

	.m-sg__table tbody th {
		width: auto;
	}
}

/* ---------- 37 · Contact -------------------------------------------------- */

/* A caps heading that carries weight rather than receding — used where the
   design puts a label above content the reader is meant to act on. */
.m-eyebrow--head {
	color: var(--m-ink);
	letter-spacing: .18em;
	margin-bottom: 1.5rem;
}

/* --- Split hero: copy on the ground, image bleeding off the right edge. --- */

.m-chero {
	display: grid;
	grid-template-columns: 1fr 1.3fr;
	align-items: stretch;
	min-height: 40rem;
}

.m-chero__copy {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 6.5rem var(--m-gutter);
}

.m-chero__title {
	margin: 0;
	font: 300 2.75rem/1.15 var(--m-sans);
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--m-ink);
}

.m-chero__rule {
	display: block;
	width: 4rem;
	height: 1px;
	background: var(--m-ink);
	margin: 1.75rem 0 2.25rem;
}

.m-chero__intro {
	margin: 0;
	font: 400 1.0625rem/1.9 var(--m-sans);
	color: var(--m-body);
	max-width: 30rem;
	text-wrap: pretty;
}

.m-chero__figure {
	position: relative;
	min-height: 100%;
}

.m-tile--bleed {
	height: 100%;
}

/* --- Four-up detail row, divided by hairlines and nothing else. ---------- */

.m-cdetails {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	padding: 4.5rem var(--m-gutter);
}

.m-cdetail {
	padding-right: 2rem;
}

.m-cdetail + .m-cdetail {
	border-left: 1px solid var(--m-hairline);
	padding-left: 2.5rem;
}

.m-cdetail__icon {
	display: block;
	color: var(--m-ink);
	margin-bottom: 1.75rem;
}

.m-cdetail__label {
	font: 500 .75rem/1 var(--m-sans);
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--m-ink);
	margin-bottom: 1.125rem;
}

.m-cdetail__lead,
.m-cdetail__note {
	margin: 0;
	font: 400 1rem/1.75 var(--m-sans);
	color: var(--m-body);
}

.m-cdetail__lead a {
	transition: color .3s;
}

.m-cdetail__lead a:hover {
	color: var(--m-ink);
}

.m-cdetail__lead + .m-cdetail__note {
	margin-top: .75rem;
}

/* --- Message form beside the support aside. ------------------------------ */

.m-cform-wrap {
	display: grid;
	grid-template-columns: 1.55fr 1fr;
	align-items: stretch;
	margin: 0 var(--m-gutter);
}

.m-cform {
	padding: 3rem 3.25rem 3.25rem 0;
}

.m-cform__notice {
	margin: 0 0 1.75rem;
	padding: 1rem 1.25rem;
	font: 400 1rem/1.6 var(--m-sans);
	border: 1px solid var(--m-hairline);
	color: var(--m-body);
}

.m-cform__notice--ok {
	border-color: var(--m-ink);
	color: var(--m-ink);
}

.m-cform__form {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.m-cform__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
}

/* The honeypot is for bots only — never shown, never announced. */
.m-cform__hp {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.m-field {
	display: block;
}

.m-field input,
.m-field textarea {
	display: block;
	width: 100%;
	background: var(--m-ground);
	border: 1px solid var(--m-hairline);
	border-radius: 0;
	padding: 1rem 1.125rem;
	font: 400 1rem/1.5 var(--m-sans);
	color: var(--m-ink);
	transition: border-color .3s;
	-webkit-appearance: none;
	appearance: none;
}

.m-field textarea {
	min-height: 9rem;
	resize: vertical;
}

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

.m-field input:hover,
.m-field textarea:hover {
	border-color: var(--m-hairline-soft);
}

.m-field input:focus,
.m-field textarea:focus {
	outline: none;
	border-color: var(--m-ink);
}

.m-cform__send {
	align-self: flex-start;
	margin-top: .75rem;
	padding: 1.15rem 2.25rem;
	transition: opacity .3s;
}

.m-cform__send:hover {
	opacity: .82;
}

/* --- Support aside: the one filled panel on the page. -------------------- */

.m-caside {
	background: var(--m-tint);
	padding: 3rem 2.75rem;
}

.m-caside__block + .m-caside__block {
	border-top: 1px solid var(--m-hairline-soft);
	margin-top: 2.5rem;
	padding-top: 2.5rem;
}

.m-caside__icon {
	display: block;
	color: var(--m-ink);
	margin-bottom: 1.5rem;
}

.m-caside__copy {
	margin: 0 0 1.5rem;
	font: 400 1rem/1.75 var(--m-sans);
	color: var(--m-body);
}

.m-arrowlink {
	display: inline-flex;
	align-items: center;
	gap: .625rem;
	font: 400 1rem/1 var(--m-sans);
	color: var(--m-ink);
}

.m-arrowlink svg {
	transition: transform .3s var(--m-ease);
}

.m-arrowlink:hover svg {
	transform: translateX(.25rem);
}

/* --- Questions, as a two-column hairline list. --------------------------- */

.m-cfaq {
	padding: 5rem var(--m-gutter) 6.5rem;
}

.m-cfaq__head {
	margin: 0;
	font: 500 .875rem/1 var(--m-sans);
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--m-ink);
}

.m-cfaq__rule {
	display: block;
	width: 3.5rem;
	height: 1px;
	background: var(--m-ink);
	margin: 1.25rem 0 2.5rem;
}

.m-cfaq__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 3rem;
	align-content: start;
	/* Each column is as tall as its own questions, not its neighbour's. */
	align-items: start;
}

.m-faq {
	border: 1px solid var(--m-hairline);
	background: var(--m-tint);
}

/* Collapse the shared edge so a column reads as one list, not stacked cards. */
.m-faq + .m-faq {
	margin-top: -1px;
}

.m-faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.25rem;
	padding: 1.15rem 1.375rem;
	font: 400 1.125rem/1.4 var(--m-sans);
	color: var(--m-ink);
	cursor: pointer;
	list-style: none;
	transition: background-color .3s;
}

.m-faq__q::-webkit-details-marker {
	display: none;
}

.m-faq__q:hover {
	background: var(--m-ground);
}

.m-faq__sign {
	position: relative;
	flex: none;
	width: .75rem;
	height: .75rem;
}

.m-faq__sign::before,
.m-faq__sign::after {
	content: '';
	position: absolute;
	background: var(--m-ink);
	transition: transform .3s var(--m-ease);
}

.m-faq__sign::before {
	left: 0;
	top: 50%;
	width: 100%;
	height: 1px;
	transform: translateY(-50%);
}

.m-faq__sign::after {
	top: 0;
	left: 50%;
	width: 1px;
	height: 100%;
	transform: translateX(-50%);
}

.m-faq[open] .m-faq__sign::after {
	transform: translateX(-50%) scaleY(0);
}

.m-faq__a {
	padding: 0 1.375rem 1.25rem;
}

.m-faq__a p {
	margin: 0;
	font: 400 1.0625rem/1.75 var(--m-sans);
	color: var(--m-body);
}

.m-faq__a p + p {
	margin-top: .75rem;
}

.m-cextra {
	padding: 0 var(--m-gutter) 6.5rem;
}

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

	.m-arrowlink svg,
	.m-faq__sign::before,
	.m-faq__sign::after {
		transition: none;
	}
}

/* --- Contact, below the desktop canvas. --------------------------------- */

@media (max-width: 1023px) {

	.m-chero {
		grid-template-columns: 1fr;
		min-height: 0;
	}

	.m-chero__copy {
		padding: 3.5rem var(--m-gutter);
	}

	.m-chero__title {
		font-size: 2rem;
		letter-spacing: .12em;
	}

	.m-chero__figure {
		min-height: 0;
	}

	.m-tile--bleed {
		height: auto;
		aspect-ratio: 4 / 3;
	}

	.m-cdetails {
		grid-template-columns: 1fr 1fr;
		gap: 2.5rem 0;
		padding: 3rem var(--m-gutter);
	}

	/* A card that starts a row has nothing to its left, so the divider the
	   desktop row draws before every card but the first comes off it here. */
	.m-cdetail:nth-child(odd) {
		padding-right: 1.25rem;
		padding-left: 0;
		border-left: 0;
	}

	.m-cdetail:nth-child(even) {
		border-left: 1px solid var(--m-hairline);
		padding-left: 1.5rem;
	}

	.m-cdetail:nth-child(3),
	.m-cdetail:nth-child(4) {
		border-top: 1px solid var(--m-hairline);
		padding-top: 2.5rem;
	}

	.m-cform-wrap {
		grid-template-columns: 1fr;
		margin: 0;
	}

	.m-cform {
		padding: 0 var(--m-gutter) 3rem;
	}

	/* Stacked, the support panel is drawn like the FAQ boxes below it: inset
	   to the same gutter, the same hairline frame, the same inner padding. */
	.m-caside {
		margin: 0 var(--m-gutter);
		border: 1px solid var(--m-hairline);
		padding: 2.25rem 1.375rem;
	}

	.m-cfaq {
		padding: 3.5rem var(--m-gutter) 4rem;
	}

	.m-cfaq__grid {
		grid-template-columns: 1fr;
		gap: 0;
	}

	/* One column again, so every row shares an edge with the row above it —
	   including across the join where the second column follows the first. */
	.m-cfaq__grid .m-faq + .m-faq,
	.m-cfaq__col + .m-cfaq__col {
		margin-top: -1px;
	}

	.m-cform__send,
	.m-faq__q {
		min-height: 2.75rem;
	}

	.m-cextra {
		padding: 0 var(--m-gutter) 4rem;
	}
}

@media (max-width: 1023px) {

	.m-cform__row {
		grid-template-columns: 1fr;
	}

	/* Two by two on phones too: hairline between the columns, one across the
	   middle, and the type stepped down so an address fits half a screen. */
	.m-cdetails {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0;
		padding: 2.5rem 0; /* the page already carries the gutter */
	}

	.m-cdetail:nth-child(odd) {
		padding: 0 1rem 2rem 0;
		border-left: 0;
	}

	.m-cdetail:nth-child(even) {
		padding: 0 0 2rem 1rem;
		border-left: 1px solid var(--m-hairline);
	}

	.m-cdetail:nth-child(3),
	.m-cdetail:nth-child(4) {
		border-top: 1px solid var(--m-hairline);
		padding-top: 2rem;
		padding-bottom: 0;
	}

	.m-cdetail__icon {
		margin-bottom: 1.125rem;
	}

	.m-cdetail__label {
		font-size: .6875rem;
		letter-spacing: .16em;
		margin-bottom: .875rem;
	}

	.m-cdetail__lead,
	.m-cdetail__note {
		font-size: .875rem;
		line-height: 1.65;
		overflow-wrap: anywhere;
	}

	/* The address is one unbreakable word: a step smaller, so it holds a line. */
	.m-cdetail:first-child .m-cdetail__lead {
		font-size: .75rem;
		overflow-wrap: normal;
	}

	/* Support panel: order help and returns side by side, split by a hairline. */
	.m-caside {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		padding: 1.75rem 1rem;
	}

	.m-caside__block:first-child {
		padding-right: 1rem;
	}

	.m-caside__block + .m-caside__block {
		margin-top: 0;
		padding: 0 0 0 1rem;
		border-top: 0;
		border-left: 1px solid var(--m-hairline-soft);
	}

	.m-caside__block {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
	}

	.m-caside__icon {
		margin-bottom: 1rem;
	}

	.m-caside .m-eyebrow {
		font-size: .625rem;
		letter-spacing: .14em;
		line-height: 1.5;
	}

	.m-caside__copy {
		margin-bottom: 1.25rem;
		font-size: .8125rem;
		line-height: 1.65;
	}

	.m-caside .m-arrowlink {
		margin-top: auto;
		font-size: .8125rem;
		line-height: 1.5;
	}
}

/* ROW */

.m-collrow{
	display:grid;
	grid-template-columns:minmax(0,900px) 180px;
	gap:3rem;
	align-items:center;
	padding:4rem 0;
	border-top:1px solid rgba(0,0,0,.08);
	color:inherit;
	text-decoration:none;
}

/* IMAGE GROUP */

.m-collrow__gallery{
	display:grid;
	gap:1rem;
	align-items:end;

	max-width:900px;
	margin:0 auto;

	grid-template-columns:.8fr 1.2fr .8fr ;
	width:720px;
}

/* IMAGE SIZES */

.m-collrow__img{
	aspect-ratio:2/3;
	overflow:hidden;

	min-height:300px ;
}

.m-collrow__img--large{
	transform:translateY(-20px);
}

/* PLACEHOLDER */

.m-placeholder{
	width:100%;
	height:100%;
	background:#f3f3f3;
	border:none;
	display: block;
}

/* IMAGE HOVER */

.m-collrow__img img{
	width:100%;
	height:100%;
	object-fit:cover;
	transition:transform .7s cubic-bezier(.22,.61,.36,1);
}

.m-collrow:hover .m-collrow__img img{
	transform:scale(1.03);
}

/* COPY */

.m-collrow__copy{
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:flex-start;
}

.m-collrow__index{
	display:none;
}

.m-collrow__name{
	margin:0;
	font:400 1rem/1.2 var(--m-sans);
	letter-spacing:.12em;
	text-transform:uppercase;
	color:var(--m-ink);

	transition:
		transform .4s ease,
		opacity .4s ease;
}

.m-collrow__count{
	margin-top:.6rem;
	font:500 .65rem/1 var(--m-sans);
	letter-spacing:.22em;
	text-transform:uppercase;
	color:var(--m-label);

	transition:
		transform .4s ease,
		opacity .4s ease;
}

.m-collrow:hover .m-collrow__name,
.m-collrow:hover .m-collrow__count{
	transform:translateX(6px);
}


/* ==========================================================================
   41 — Size guide, refined
   --------------------------------------------------------------------------
   The structure was right; the charts were not carrying their weight. A size
   table is read across a row and down a column at the same time, so it needs
   a fixed header, aligned figures and a line the eye can track. Everything
   here is scanability, not decoration.
   ========================================================================== */

/* Figures line up in their columns. Without this, 16.5 and 17 sit at
   different widths and the column reads as ragged. */
.m-sg__table {
	font-variant-numeric: tabular-nums;
	border-color: var(--m-hairline-soft);
}

/* The size scale is the axis of the whole table, so it gets a ground of its
   own rather than sharing the body's treatment. */
.m-sg__table thead th {
	position: sticky;
	top: 0;
	z-index: 2;
	background: var(--m-tint);
	border-bottom: 1px solid var(--m-ink);
	font-size: .875rem;
	letter-spacing: .2em;
	color: var(--m-ink);
}

/* A row of six figures across a wide table loses the eye on the way back.
   The alternating ground is the guide rail. */
.m-sg__table tbody tr:nth-child(even) {
	background: #fafafa;
}

.m-sg__table tbody tr:hover {
	background: var(--m-tint);
}

.m-sg__table tbody td {
	font-size: 1.0625rem;
	color: var(--m-ink);
	transition: background-color .2s var(--m-ease);
}

/* When the table scrolls sideways the measurement name must stay put, or the
   figures lose their meaning halfway across. */
.m-sg__table tbody th,
.m-sg__table thead th:first-child {
	position: sticky;
	left: 0;
	z-index: 1;
	background: var(--m-ground);
	border-right: 1px solid var(--m-hairline-soft);
}

.m-sg__table thead th:first-child {
	z-index: 3;
	background: var(--m-tint);
}

.m-sg__scroll {
	border: 1px solid var(--m-hairline-soft);
}

.m-sg__table {
	border: 0;
}

/* The tab is the control for four different tables; it should look like one. */
.m-sg__tab {
	border-bottom-width: 2px;
}

.m-sg__tab.is-current {
	color: var(--m-ink);
}

/* The help card was on a hardcoded grey that sat a shade off every other
   panel on the site. */
.m-sg__help {
	background: var(--m-tint);
}

/* The standfirst was small enough against a 2.75rem title to read as a
   caption rather than an opening line. */
.m-sg__intro {
	margin: 1.5rem auto 0; /* centred under the title now the rule is gone */
	font-size: 1.0625rem;
	max-width: 50rem; /* one line on desktop; the sentence needs ~47rem */
}

@media (min-width: 1024px) {
	/* The steps column ran to the full width while its text stopped at 22rem,
	   leaving a third of the row empty. Cap the column, not the text. */
	/* A third track for the custom-fit note, in the space that was left
	   empty to the right of the steps. */
	.m-sg__measure {
		/* Steps take the free width so each description sits on one line; the
		   custom-fit note is pinned to the right edge of the row. */
		grid-template-columns: minmax(0, 1fr) minmax(0, 22rem);
		gap: 5.5rem;
		justify-content: start;
	}

	.m-sg__stepText {
		max-width: none;
	}

	/* Six columns of figures over a full-bleed page leaves each cell floating.
	   A measure keeps the row readable on a wide screen. */
	.m-sg__scroll,
	.m-sg__advice {
		max-width: 68rem;
	}

	.m-sg__table tbody th {
		width: 14rem;
	}
}

/* ---------- How-to-measure figure -------------------------------------------
   A drawn form rather than a photograph: it stays sharp at any size, takes the
   page's own ink colour, and shows the three widths cleanly instead of asking
   the reader to find them in a blurred silhouette. */
.m-sg__form {
	display: block;
	width: 100%;
	aspect-ratio: var(--m-crop);
	background: var(--m-tint);
	color: var(--m-ink);
	padding: 1.5rem 0;
	box-sizing: border-box;
}

/* The form carries its own tape and numbers, so the overlay marks would sit a
   second set beside them. They stay in the markup for the photograph case,
   where they are still the only thing showing where to measure. */
.m-sg__form ~ .m-sg__mark {
	display: none;
}

/* ---------- Garment photograph beside the drawing ---------------------------
   The form shows where the tape goes; the photograph shows the kind of thing
   being measured. It sits under the drawing so the pair reads as one column
   against the written steps, rather than as a third competing element. */
.m-sg__garment {
	margin: 1.5rem 0 0;
}

.m-sg__garment img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: var(--m-crop);
	object-fit: cover;
	background: var(--m-tint);
}

.m-sg__garmentCap {
	margin: .875rem 0 0;
	font: 400 .8125rem/1.6 var(--m-sans);
	color: var(--m-label);
	max-width: 22rem;
}

@media (min-width: 1024px) {
	/*
	 * Named areas so the drawing and the steps share one row. The second row,
	 * for the garment photograph, only exists when a photograph is on the
	 * page — declared unconditionally, the empty row still took the grid's
	 * 4.5rem gap and left dead space under the drawing.
	 */
	/* The drawing has gone to the model photograph above; steps and the
	   custom-fit note now share the row. */
	.m-sg__measure {
		grid-template-areas: "steps custom";
		align-content: start;
	}

	.m-sg__figure  { grid-area: figure; }
	.m-sg__garment { grid-area: garment; }
	.m-sg__steps   { grid-area: steps; }
	.m-sg__measure .m-sg__custom { grid-area: custom; }
}

/* ---------- 37 · Account, orders and receipts -------------------------------
   Woo's own stylesheets are dequeued in inc/woocommerce.php, so every surface
   behind the login — dashboard, orders, addresses, the thank-you page — has to
   be drawn here. The vocabulary is the rest of the site's: hairlines instead of
   boxes, uppercase tracked labels, no fills except the buttons.
   ------------------------------------------------------------------------- */

/* These pages carry a navigation rail and tables, so they need more room than
   the 40rem reading measure the rest of .m-entry is set to. */
.woocommerce-account .m-entry,
.woocommerce-order-received .m-entry,
.woocommerce-view-order .m-entry,
.woocommerce-edit-address .m-entry,
.woocommerce-orders .m-entry {
	max-width: 62rem;
	padding-top: 4.5rem;
}

.woocommerce-account .m-entry > * + *,
.woocommerce-order-received .m-entry > * + * {
	margin-top: 0;
}

/* Woo prints an <h2> above each form and section; .m-entry sizes those for
   editorial copy, which is far too loud here. */
.m-entry .woocommerce h2,
.m-entry .woocommerce h3,
.m-entry .woocommerce-order h2,
.m-entry .woocommerce-order h3 {
	font: 500 .8125rem/1 var(--m-sans);
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--m-label);
	margin: 0 0 2rem;
}

/* --- Notices: the same rule-topped band the shop uses, but reachable outside
       .woocommerce-notices-wrapper, where the account pages print them. --- */

.woocommerce > .woocommerce-message,
.woocommerce > .woocommerce-info,
.woocommerce > .woocommerce-error,
.woocommerce-MyAccount-content .woocommerce-message,
.woocommerce-MyAccount-content .woocommerce-info,
.woocommerce-MyAccount-content .woocommerce-error {
	list-style: none;
	margin: 0 0 2.5rem;
	padding: 1.375rem 0;
	border-top: 1px solid var(--m-hairline);
	border-bottom: 1px solid var(--m-hairline);
	font: 500 .78125rem/1.6 var(--m-sans);
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--m-label);
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1.5rem;
	flex-wrap: wrap;
}

.woocommerce-error {
	color: var(--m-ink);
}

.woocommerce-error li {
	list-style: none;
}

/* --- Login and register, side by side. --------------------------------- */

#customer_login {
	display: grid;
	gap: 3.5rem;
}

#customer_login > div {
	min-width: 0;
}

.woocommerce-form-login,
.woocommerce-form-register {
	margin: 0;
}

/* The rememberme checkbox and the submit share one .form-row, which the shop
   rule stacks. Split that row back onto one line. */
.woocommerce-form-login .form-row:has(.woocommerce-form-login__submit),
.woocommerce-form-register .form-row:has(.woocommerce-form-register__submit) {
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1.25rem;
	margin-top: .5rem;
}

.woocommerce-form__label-for-checkbox {
	display: inline-flex;
	align-items: center;
	gap: .625rem;
	cursor: pointer;
}

.woocommerce-form__input-checkbox {
	width: .875rem;
	height: .875rem;
	accent-color: var(--m-ink);
	margin: 0;
}

.woocommerce-form-login__submit,
.woocommerce-form-register__submit {
	margin: 0;
}

.woocommerce-LostPassword {
	margin: 1.5rem 0 0;
	font: 400 .8125rem/1 var(--m-sans);
}

.woocommerce-LostPassword a,
.woocommerce-MyAccount-content a:not(.button),
.woocommerce-order a:not(.button) {
	color: var(--m-label);
	text-decoration: none;
	border-bottom: 1px solid var(--m-hairline-soft);
	padding-bottom: 2px;
	transition: color .3s, border-color .3s;
}

.woocommerce-LostPassword a:hover,
.woocommerce-MyAccount-content a:not(.button):hover,
.woocommerce-order a:not(.button):hover {
	color: var(--m-ink);
	border-color: var(--m-ink);
}

.woocommerce-privacy-policy-text,
.woocommerce-form-register > p:not(.form-row),
#reg_passmail {
	font: 400 .8125rem/1.7 var(--m-sans);
	color: var(--m-label);
	margin: 0 0 1.5rem;
}

/* --- The signed-in shell: a rail of links, then the content. ------------ */

.woocommerce-account.logged-in .woocommerce {
	display: grid;
	gap: 3.5rem;
}

.woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--m-hairline);
}

.woocommerce-MyAccount-navigation li {
	border-bottom: 1px solid var(--m-hairline);
}

.woocommerce-MyAccount-navigation a {
	display: block;
	padding: .9375rem 0;
	font: 500 .75rem/1 var(--m-sans);
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--m-label);
	text-decoration: none;
	border: 0;
	transition: color .3s;
}

.woocommerce-MyAccount-navigation a:hover,
.woocommerce-MyAccount-navigation .is-active a {
	color: var(--m-ink);
}

.woocommerce-MyAccount-content {
	min-width: 0;
	font: 400 1rem/1.75 var(--m-sans);
	color: var(--m-body);
}

.woocommerce-MyAccount-content > p {
	margin: 0 0 1.5rem;
}

.woocommerce-MyAccount-content > p:last-child {
	margin-bottom: 0;
}

/* --- Tables: orders, downloads, order details. -------------------------- */

.woocommerce-orders-table,
.woocommerce-table--order-details,
.woocommerce-table--order-downloads,
.woocommerce-MyAccount-content .shop_table {
	width: 100%;
	border-collapse: collapse;
	font: 400 .875rem/1.5 var(--m-sans);
	font-variant-numeric: tabular-nums;
	margin: 0 0 2.5rem;
}

.woocommerce-orders-table th,
.woocommerce-table--order-details th,
.woocommerce-table--order-downloads th,
.woocommerce-MyAccount-content .shop_table th {
	text-align: left;
	padding: .875rem 1rem .875rem 0;
	border-bottom: 1px solid var(--m-ink);
	font: 500 .6875rem/1 var(--m-sans);
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--m-label);
	white-space: nowrap;
}

.woocommerce-orders-table td,
.woocommerce-table--order-details td,
.woocommerce-table--order-downloads td,
.woocommerce-MyAccount-content .shop_table td {
	padding: 1.125rem 1rem 1.125rem 0;
	border-bottom: 1px solid var(--m-hairline);
	vertical-align: top;
}

.woocommerce-orders-table th:last-child,
.woocommerce-orders-table td:last-child,
.woocommerce-table--order-details th:last-child,
.woocommerce-table--order-details td:last-child {
	padding-right: 0;
	text-align: right;
}

/* The totals block: label column on the left, figures right, and the grand
   total carried by a heavier rule. */
.woocommerce-table--order-details tfoot th {
	border-top: 0;
	border-bottom: 1px solid var(--m-hairline);
	text-align: left;
}

.woocommerce-table--order-details tfoot tr:last-child th,
.woocommerce-table--order-details tfoot tr:last-child td {
	border-bottom: 1px solid var(--m-ink);
	color: var(--m-ink);
	font-weight: 500;
}

.woocommerce-orders-table__cell-order-actions .button {
	padding: .625rem 1rem;
	font-size: .625rem;
	letter-spacing: .18em;
}

/* Woo relabels each cell from a data attribute below 768px; the label has to
   read as one. */
@media (max-width: 47.9375rem) {
	.shop_table_responsive thead {
		display: none;
	}

	.shop_table_responsive tr {
		display: block;
		border-bottom: 1px solid var(--m-hairline);
		padding: .5rem 0;
	}

	.shop_table_responsive td {
		display: flex;
		justify-content: space-between;
		gap: 1.5rem;
		border: 0;
		padding: .4375rem 0;
		text-align: right;
	}

	.shop_table_responsive td::before {
		content: attr(data-title);
		font: 500 .6875rem/1.6 var(--m-sans);
		letter-spacing: .18em;
		text-transform: uppercase;
		color: var(--m-label);
		text-align: left;
	}
}

/* --- Addresses. --------------------------------------------------------- */

.woocommerce-Addresses {
	display: grid;
	gap: 2.5rem;
	margin-top: 2rem;
}

.woocommerce-Address {
	border-top: 1px solid var(--m-hairline);
	padding-top: 1.5rem;
	min-width: 0;
}

.woocommerce-Address-title {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1.5rem;
	margin-bottom: 1.25rem;
}

.m-entry .woocommerce-Address-title h2,
.m-entry .woocommerce-Address-title h3 {
	margin: 0;
}

.woocommerce-Address address {
	font: 400 .9375rem/1.9 var(--m-sans);
	font-style: normal;
	color: var(--m-body);
}

/* --- The receipt. ------------------------------------------------------- */

.woocommerce-order .woocommerce-thankyou-order-received,
.woocommerce-order .woocommerce-notice--success {
	display: block;
	max-width: 32rem;
	margin: 0 0 2.5rem;
	padding: 0;
	border: 0;
	font: 300 1.75rem/1.25 var(--m-sans);
	letter-spacing: 0;
	text-transform: none;
	color: var(--m-ink);
}

.woocommerce-order-overview {
	list-style: none;
	display: grid;
	margin: 0 0 3.5rem;
	padding: 0;
	border-top: 1px solid var(--m-hairline);
}

.woocommerce-order-overview li {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1.5rem;
	padding: .9375rem 0;
	border-bottom: 1px solid var(--m-hairline);
	font: 500 .6875rem/1.4 var(--m-sans);
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--m-label);
}

.woocommerce-order-overview li strong {
	font: 400 .9375rem/1.4 var(--m-sans);
	font-variant-numeric: tabular-nums;
	letter-spacing: 0;
	text-transform: none;
	color: var(--m-ink);
}

.woocommerce-order-details,
.woocommerce-customer-details {
	margin-top: 3rem;
}

.woocommerce-customer-details address {
	font: 400 .9375rem/1.9 var(--m-sans);
	font-style: normal;
	color: var(--m-body);
	border-top: 1px solid var(--m-hairline);
	padding-top: 1.5rem;
}

/* --- Lost password reads better narrow. -------------------------------- */

.woocommerce-ResetPassword {
	max-width: 26rem;
}

.woocommerce-ResetPassword .form-row {
	margin-bottom: 1.5rem;
}

@media (min-width: 53.75rem) {
	#customer_login {
		grid-template-columns: 1fr 1fr;
		gap: 4.5rem;
	}

	/* A hairline between the two halves rather than a box around each. */
	#customer_login .u-column2 {
		border-left: 1px solid var(--m-hairline);
		padding-left: 4.5rem;
	}

	.woocommerce-account.logged-in .woocommerce {
		grid-template-columns: 12.5rem minmax(0, 1fr);
		gap: 4.5rem;
	}

	.woocommerce-Addresses {
		grid-template-columns: 1fr 1fr;
		gap: 3.5rem;
	}
}

/* The receipt prints its two addresses in .woocommerce-columns rather than the
   .woocommerce-Addresses wrapper the edit-address screen uses. */
.woocommerce-columns--addresses {
	display: grid;
	gap: 2.5rem;
	margin-top: 2rem;
}

.woocommerce-columns--addresses .woocommerce-column {
	min-width: 0;
	border-top: 1px solid var(--m-hairline);
	padding-top: 1.5rem;
}

.m-entry .woocommerce-column__title {
	font: 500 .8125rem/1 var(--m-sans);
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--m-label);
	margin: 0 0 1.25rem;
}

.woocommerce-columns--addresses address {
	border-top: 0;
	padding-top: 0;
}

@media (min-width: 53.75rem) {
	.woocommerce-columns--addresses {
		grid-template-columns: 1fr 1fr;
		gap: 3.5rem;
	}
}

/* --- Empty cart: Woo draws a large emoji face above the heading and a row of
       dots as a separator. Neither belongs on this storefront. ---------- */

.wc-block-cart__empty-cart__title.with-empty-cart-icon::before {
	display: none;
}

.wc-block-cart__empty-cart__title {
	font: 300 1.75rem/1.25 var(--m-sans);
	color: var(--m-ink);
	margin: 4rem 0 0;
}

.wp-block-woocommerce-empty-cart-block .wp-block-separator.is-style-dots {
	border: 0;
	border-top: 1px solid var(--m-hairline);
	height: 0;
	max-width: none;
	margin: 3rem 0;
}

.wp-block-woocommerce-empty-cart-block .wp-block-separator.is-style-dots::before {
	content: none;
}

/* ---------- 38 · Size guide: chart note and the custom-fit offer ---------- */

/* The shirt charts are garment measurements, not body ones; the table needs
   to say so or a 36 chest reading 23 looks like a mistake. */
.m-sg__note {
	margin: 1rem 0 0;
	font: 400 .875rem/1.6 var(--m-sans);
	letter-spacing: .04em;
	color: var(--m-label);
}

.m-sg__custom {
	margin-top: 3.5rem;
	padding-top: 2.25rem;
	border-top: 1px solid var(--m-hairline);
	max-width: 34rem;
}

/*
 * Beside the steps it is a column of its own, so it drops the rule and the
 * top spacing it needed when it sat under the charts: its heading lines up
 * with the first step, and the section keeps no lines, as asked. Below 1024
 * it follows the steps and the grid's own gap spaces it.
 */
.m-sg__measure .m-sg__custom {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

/*
 * The footer's Custom fit link jumps here. Without an offset the browser puts
 * the block at the very top of the viewport, under the sticky header, and the
 * heading the reader came for is the one thing they cannot see.
 */
#size-custom {
	scroll-margin-top: calc(var(--m-header-h, 6rem) + 1.5rem);
}

.m-sg__customTitle {
	margin: 0 0 .625rem;
	font: 400 1.25rem/1.3 var(--m-sans);
	color: var(--m-ink);
}

.m-sg__customText {
	margin: 0 0 1.25rem;
	font: 400 1.0625rem/1.7 var(--m-sans);
	color: var(--m-body);
}

.m-sg__customLink {
	display: inline-flex;
	align-items: center;
	gap: .625rem;
	font: 500 .8125rem/1 var(--m-sans);
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--m-ink);
	text-decoration: none;
	border-bottom: 1px solid var(--m-ink);
	padding-bottom: .5rem;
}

.m-sg__customLink span {
	transition: transform .3s var(--m-ease);
}

.m-sg__customLink:hover span {
	transform: translateX(.25rem);
}

/* Seven columns rather than six — the shirt run goes to 4XL, so the size
   header needs to stay readable when the table is scrolled. */
.m-sg__table th[scope="col"] {
	white-space: nowrap;
}

/* ---------- 39 · Storefront: facets, search, destination, collections -----
   The surfaces built to close the gap against the live store. Same vocabulary
   as everything else: hairlines, uppercase tracked labels, no boxes.
   ------------------------------------------------------------------------- */

/* --- Listing facets ------------------------------------------------------ */

/* No rules and no padding: it is a group inside the header row now. */
.m-facets {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0 1.75rem;
}

.m-facet {
	position: relative;
	display: flex;
	align-items: center;
}

.m-facet__label {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	cursor: pointer;
	list-style: none;
	font: 500 .75rem/1 var(--m-sans);
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--m-label);
	padding: .375rem 0;
	transition: color .3s;
}

.m-facet__label::-webkit-details-marker { display: none; }

.m-facet__label::after {
	content: '';
	width: .375rem;
	height: .375rem;
	border-right: 1px solid currentColor;
	border-bottom: 1px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform .3s var(--m-ease);
}

.m-facet[open] .m-facet__label,
.m-facet__label:hover {
	color: var(--m-ink);
}

.m-facet[open] .m-facet__label::after {
	transform: translateY(1px) rotate(225deg);
}

/* The panel hangs below the row rather than pushing the grid down. */
.m-facet__panel {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 20;
	min-width: 12rem;
	margin-top: .875rem;
	padding: 1.25rem 1.5rem 1.375rem;
	background: var(--m-ground);
	border: 1px solid var(--m-hairline);
	display: grid;
	gap: .75rem;
}

.m-facet__opt {
	display: flex;
	align-items: center;
	gap: .625rem;
	cursor: pointer;
	font: 400 .9375rem/1 var(--m-sans);
	color: var(--m-body);
}

.m-facet__opt input {
	accent-color: var(--m-ink);
	margin: 0;
}

.m-facet__panel--price {
	grid-template-columns: 1fr 1fr;
	align-items: end;
	min-width: 17rem;
}

.m-facet__price {
	display: grid;
	gap: .4375rem;
	min-width: 0;
	font: 500 .625rem/1 var(--m-sans);
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--m-label);
}

.m-facet__price input {
	width: 100%;
	background: none;
	border: 0;
	border-bottom: 1px solid var(--m-hairline);
	border-radius: 0;
	padding: .375rem 0;
	font: 400 .9375rem/1.3 var(--m-sans);
	font-variant-numeric: tabular-nums;
	color: var(--m-ink);
	-webkit-appearance: none;
	appearance: none;
}

.m-facet__price input:focus {
	outline: none;
	border-color: var(--m-ink);
}

.m-facet__apply {
	grid-column: 1 / -1;
	justify-self: start;
	background: var(--m-ink);
	color: var(--m-ground);
	border: 0;
	border-radius: 0;
	cursor: pointer;
	padding: .6875rem 1.25rem;
	font: 500 .625rem/1 var(--m-sans);
	letter-spacing: .22em;
	text-transform: uppercase;
	transition: opacity .3s;
}

.m-facet__apply:hover { opacity: .84; }

/* Count pushed to the far end, so the row reads filters-left, tally-right. */
.m-facets__count {
	margin: 0 0 0 auto;
	font: 500 .75rem/1 var(--m-sans);
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--m-label);
	font-variant-numeric: tabular-nums;
}

.m-facets__clear {
	font: 500 .75rem/1 var(--m-sans);
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--m-label);
	border-bottom: 1px solid var(--m-hairline-soft);
	padding-bottom: 2px;
	transition: color .3s, border-color .3s;
}

.m-facets__clear:hover {
	color: var(--m-ink);
	border-color: var(--m-ink);
}

/* --- Type-ahead results -------------------------------------------------- */

.m-hsearch__results {
	position: absolute;
	top: calc(100% + .75rem);
	right: 0;
	z-index: 60;
	width: min(26rem, calc(100vw - 2 * var(--m-gutter)));
	max-height: min(28rem, 70vh);
	overflow-y: auto;
	background: var(--m-ground);
	border: 1px solid var(--m-hairline);
	padding: 1.25rem 1.375rem 1.375rem;
	text-align: left;
}

.m-sr__head {
	margin: 0 0 .75rem;
	font: 500 .625rem/1 var(--m-sans);
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--m-label);
}

.m-sr__head + .m-sr__list + .m-sr__head {
	margin-top: 1.5rem;
}

.m-sr__list {
	list-style: none;
	margin: 0 0 .25rem;
	padding: 0;
	display: grid;
	gap: .25rem;
}

.m-sr__item {
	display: grid;
	grid-template-columns: 2.5rem minmax(0, 1fr) auto;
	align-items: center;
	gap: .875rem;
	padding: .5rem 0;
	transition: opacity .25s;
}

.m-sr__item--post {
	grid-template-columns: minmax(0, 1fr);
}

.m-sr__item:hover { opacity: .62; }

.m-sr__thumb {
	width: 2.5rem;
	aspect-ratio: var(--m-crop);
	object-fit: cover;
	display: block;
	background: var(--m-tint);
}

.m-sr__name {
	font: 400 .9375rem/1.35 var(--m-sans);
	color: var(--m-ink);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.m-sr__price {
	font: 400 .8125rem/1 var(--m-sans);
	font-variant-numeric: tabular-nums;
	color: var(--m-label);
	white-space: nowrap;
}

.m-sr__empty {
	margin: 0;
	font: 400 .875rem/1.6 var(--m-sans);
	color: var(--m-label);
}

.m-sr__more {
	display: inline-block;
	margin-top: 1rem;
	padding-top: .875rem;
	border-top: 1px solid var(--m-hairline);
	width: 100%;
	font: 500 .625rem/1 var(--m-sans);
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--m-ink);
}

/* --- Shipping destination, in the footer bar ----------------------------- */

.m-ship {
	display: flex;
	align-items: center;
	gap: .625rem;
}

.m-ship__label {
	font: inherit;
	color: var(--m-dark-label);
}

.m-ship__select {
	background: none;
	border: 0;
	border-bottom: 1px solid var(--m-dark-hairline);
	border-radius: 0;
	padding: .25rem 1.25rem .3125rem 0;
	color: var(--m-dark-head);
	font: 500 .8125rem/1 var(--m-text-sans);
	letter-spacing: .16em;
	text-transform: uppercase;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	/* The chevron, drawn rather than loaded. */
	background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
		linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position: right .375rem center, right .0625rem center;
	background-size: .3125rem .3125rem, .3125rem .3125rem;
	background-repeat: no-repeat;
	transition: border-color .3s;
}

.m-ship__select:hover,
.m-ship__select:focus {
	border-color: var(--m-dark-head);
	outline: none;
}

/* The native menu paints on the OS surface, so its rows need a real ground. */
.m-ship__select option {
	background: var(--m-dark);
	color: var(--m-dark-head);
}

/* --- Product page: the three lines the live store carries ---------------- */

.m-pdp__vendor {
	margin: 0 0 .625rem;
	font: 500 .6875rem/1 var(--m-sans);
	letter-spacing: .26em;
	text-transform: uppercase;
	color: var(--m-label);
}

.m-pdp__tax {
	margin: .625rem 0 1.5rem;
	font: 400 .75rem/1.6 var(--m-sans);
	color: var(--m-label);
}

/* Outlined, so add-to-bag stays the filled primary and this reads as the
   shortcut it is rather than a second, competing button. */
.m-pdp__buynow {
	display: block;
	width: 100%;
	margin-top: .625rem;
	background: none;
	color: var(--m-ink);
	border: 1px solid var(--m-hairline-soft);
	border-radius: 0;
	cursor: pointer;
	padding: 1rem 1.75rem;
	font: 500 .78125rem/1 var(--m-sans);
	letter-spacing: .26em;
	text-transform: uppercase;
	transition: border-color .3s, background .3s, color .3s;
}

.m-pdp__buynow:hover {
	border-color: var(--m-ink);
}

/* --- Collections index --------------------------------------------------- */

.m-colls__head {
	display: grid;
	gap: 1rem;
	padding: 4.5rem 0 3rem;
	border-bottom: 1px solid var(--m-hairline);
	margin-bottom: 3rem;
}

.m-colls__title {
	margin: 0;
	font: 300 2.75rem/1.05 var(--m-sans);
	color: var(--m-ink);
}

.m-colls__intro {
	margin: 0;
	max-width: 34rem;
	font: 400 1.0625rem/1.75 var(--m-sans);
	color: var(--m-body);
}

.m-colls__all {
	justify-self: start;
	display: inline-flex;
	align-items: center;
	gap: .625rem;
	font: 500 .6875rem/1 var(--m-sans);
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--m-ink);
	border-bottom: 1px solid var(--m-ink);
	padding-bottom: .5rem;
}

.m-colls__all span {
	transition: transform .3s var(--m-ease);
}

.m-colls__all:hover span {
	transform: translateX(.25rem);
}

.m-colls__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 3.5rem 2.5rem;
	padding-bottom: 6rem;
	align-items: start;
}

/*
 * align-content:start matters here. Grid items stretch to the tallest card in
 * the row by default, and the extra height is then shared out among this
 * card's own rows — so a collection that has a description ends up with a
 * shorter crop than one that does not, and the tiles stop lining up.
 */
.m-coll {
	display: grid;
	gap: 0;
	min-width: 0;
	align-content: start;
}

.m-coll__meta {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	margin-top: 1.125rem;
	padding-bottom: .75rem;
	border-bottom: 1px solid var(--m-hairline);
}

.m-coll__name {
	font: 400 1.25rem/1.2 var(--m-sans);
	color: var(--m-ink);
}

.m-coll__count {
	font: 500 .75rem/1 var(--m-sans);
	letter-spacing: .18em;
	color: var(--m-label);
	font-variant-numeric: tabular-nums;
}

.m-coll__note {
	margin: .875rem 0 0;
	font: 400 .875rem/1.65 var(--m-sans);
	color: var(--m-label);
}

.m-colls__body {
	padding-top: 0;
}

@media (max-width: 1023px) {
	.m-facets {
		gap: 0 1.5rem;
	}

	.m-facets__count {
		margin-left: auto;
	}

	.m-colls__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 2.5rem 1.5rem;
	}

	.m-colls__title {
		font-size: 2.125rem;
	}

	.m-hsearch__results {
		width: calc(100vw - 2 * var(--m-gutter));
	}

	/* The footer bar stacks below 1024, so the selector sits on its own row. */
	.m-ship {
		width: 100%;
	}
}

@media (max-width: 599px) {
	.m-colls__grid {
		grid-template-columns: 1fr;
	}

	.m-facet__panel {
		left: auto;
		right: 0;
	}

	.m-facet__panel--price {
		min-width: 14rem;
	}
}

/* ---------- 40 · Header category bar --------------------------------------
   Drawn against forevernew.co.in: categories spelled out along the left of the
   header row, wordmark holding the centre, utilities right, and a full-width
   panel dropping on hover. Everything below 768px is the burger and the
   drawer, exactly as there.

   The type is this site's, not the reference's — small tracked caps at the
   same size as the utilities, so the row reads as one register.
   ------------------------------------------------------------------------- */

.m-navbar {
	display: none;
}

.m-navbar__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: 1.75rem;
}

.m-navbar__item {
	position: static; /* The panel spans the header, not the item. */
}

.m-navbar__link {
	display: inline-block;
	background: none;
	border: 0;
	padding: .375rem 0;
	cursor: pointer;
	font: 500 .75rem/1 var(--m-sans);
	letter-spacing: .2em;
	text-transform: uppercase;
	color: inherit;
	white-space: nowrap;
	position: relative;
	transition: opacity .3s;
}

/* A rule that draws in from the left rather than a colour change — the header
   sits on the hero on the homepage, where a colour shift would be invisible. */
.m-navbar__link::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: -.125rem;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .35s var(--m-ease);
}

.m-navbar__item:hover .m-navbar__link::after,
.m-navbar__item.is-open .m-navbar__link::after,
.m-navbar__link:focus-visible::after {
	transform: scaleX(1);
}

/* --- The panel ----------------------------------------------------------- */

.m-navpanel {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 40;
	background: var(--m-ground);
	color: var(--m-ink);
	border-top: 1px solid var(--m-hairline);
	border-bottom: 1px solid var(--m-hairline);
	box-shadow: 0 18px 40px -30px rgba(0, 0, 0, .35);
}

/*
 * [hidden] is how the panel starts and how it ends, so the markup is correct
 * with no script at all; the script swaps it and the transition runs off the
 * .is-open class the item carries.
 */
.m-navpanel[hidden] {
	display: none;
}

.m-navpanel__inner {
	max-width: var(--m-canvas, 1800px);
	margin: 0 auto;
	padding: 2.75rem var(--m-gutter) 3rem;
	display: grid;
	/*
	 * Both tracks sized to their contents and packed left. At 1fr the link
	 * block kept its natural width anyway and the tile was pinned to the far
	 * side of the canvas, leaving most of a screen of nothing between them.
	 */
	grid-template-columns: minmax(0, max-content) 12rem;
	justify-content: start;
	gap: 3.5rem 5rem;
	align-items: start;
	opacity: 0;
	transform: translateY(-.5rem);
	transition: opacity .3s ease, transform .35s var(--m-ease);
}

.m-navbar__item.is-open .m-navpanel__inner {
	opacity: 1;
	transform: none;
}

/*
 * Packed left at their natural width rather than dealt into equal fractions.
 * auto-fit with 1fr shares the whole track between however many groups there
 * are, and the track is most of an 1800px canvas — four groups of short links
 * ended up sitting a third of a screen apart.
 */
.m-navpanel__cols {
	display: flex;
	flex-wrap: wrap;
	gap: 2.5rem 4rem;
	min-width: 0;
}

.m-navpanel__group {
	min-width: 9.5rem;
}

/* A flat list has no headings to make columns, so the list itself splits. */
.m-navpanel__cols--flat {
	display: block;
}

.m-navpanel__groupHead {
	display: block;
	margin-bottom: 1.125rem;
	font: 500 .6875rem/1 var(--m-sans);
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--m-ink);
	transition: opacity .3s;
}

.m-navpanel__groupHead:hover {
	opacity: .6;
}

.m-navpanel__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: .625rem;
	font: 400 1rem/1.5 var(--m-sans);
	color: var(--m-body);
}

/*
 * Fills down a column of four, then starts another beside it, each column only
 * as wide as its longest link. `columns: 3` divided the available width into
 * three instead, which on this panel meant three 370px columns holding 100px
 * of text.
 */
.m-navpanel__list--deal {
	display: grid;
	grid-auto-flow: column;
	grid-template-rows: repeat(4, auto);
	grid-auto-columns: max-content;
	justify-content: start;
	gap: .625rem 4rem;
}

.m-navpanel__list a {
	transition: color .25s;
}

.m-navpanel__list a:hover {
	color: var(--m-ink);
}

/* --- The tile at the end of the panel ------------------------------------ */

.m-navpanel__promo {
	display: block;
	min-width: 0;
}

.m-navpanel__promo .m-tile {
	margin-bottom: .875rem;
}

.m-navpanel__promoLabel,
.m-navpanel__viewall {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	font: 500 .6875rem/1 var(--m-sans);
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--m-ink);
}

.m-navpanel__viewall {
	border-bottom: 1px solid var(--m-ink);
	padding-bottom: .5rem;
	align-self: start;
}

.m-navpanel__promoLabel span,
.m-navpanel__viewall span {
	transition: transform .3s var(--m-ease);
}

.m-navpanel__promo:hover .m-navpanel__promoLabel span,
.m-navpanel__viewall:hover span {
	transform: translateX(.25rem);
}

/* --- Wordmark lockup ------------------------------------------------------
   Name over place. The locality is optically centred under the name, so it
   takes the same trailing-letter-spacing correction the name does.
   ------------------------------------------------------------------------- */

.m-wordmark a {
	display: block;
}

.m-wordmark__name {
	display: block;
}

.m-wordmark__locality {
	display: block;
	margin-top: .375rem;
	margin-right: -.3em;
	font: 500 .5625rem/1 var(--m-sans);
	letter-spacing: .3em;
	text-transform: uppercase;
	opacity: .65;
}

@media (min-width: 1024px) {
	.m-navbar {
		display: block;
	}

	/* The burger is the mobile control. It only steps aside where the bar has
	   actually rendered — with the Customizer switch off there is nothing to
	   replace it, and hiding it unconditionally would leave no way in. */
	.m-nav:has(.m-navbar) .m-nav__toggle {
		display: none;
	}
}

@media (max-width: 1023px) {
	.m-wordmark__locality {
		font-size: .5rem;
		letter-spacing: .26em;
		margin-top: .25rem;
	}
}


/* ---------- 41 · Size guide: chart and model -------------------------------
   The reference's format: a solid bar titles the charts, the charts sit on
   the left, and a full-length model photograph holds a column on the right.
   Below 1024 the photograph drops under the charts.
   ------------------------------------------------------------------------- */

.m-sg__chart {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 2.5rem;
}

.m-sg__chartMain {
	min-width: 0;
}

.m-sg__bar {
	margin: 0 0 1.75rem;
	padding: .9375rem 1.25rem;
	background: var(--m-ink);
	color: var(--m-ground);
	font: 500 1.125rem/1 var(--m-sans);
	letter-spacing: .14em;
	text-transform: uppercase;
	text-align: center;
	/* Tracking also lands after the last letter; indenting by the same
	   amount puts the word on true centre rather than a hair to the left. */
	text-indent: .14em;
}

.m-sg__model {
	margin: 0;
	min-width: 0;
}

/* Held at 5:8 whatever the upload, so a landscape replacement cannot blow the
   column out; cover crops rather than letterboxes. 5:8 is the measuring photo's
   own shape (1000 x 1604), so its feet and marked lines are not cut off. */
.m-sg__modelImg {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 5 / 8;
	object-fit: cover;
	object-position: center top;
	background: var(--m-tint);
}

.m-sg__modelCap {
	margin: .875rem 0 0;
	text-align: center;
	font: 400 .875rem/1.6 var(--m-sans);
	color: var(--m-label);
}

@media (min-width: 1024px) {
	.m-sg__chart.has-model {
		grid-template-columns: minmax(0, 1fr) minmax(0, 22rem);
		gap: 3rem;
		align-items: start;
	}
}

@media (max-width: 1023px) {
	.m-sg__model {
		width: 100%;
		max-width: 22rem;
		margin: 0 auto;
	}
}


/* ---------- 42 · Size guide: conversion rows inside the charts ------------
   UK / US and EU sit in their own row group at the top of each chart. An
   inset shadow rather than a border marks where the measurements begin, so
   it draws the same whichever edge the table's cells carry their lines on.
   ------------------------------------------------------------------------- */

.m-sg__table .m-sg__conv + tbody > tr:first-child > * {
	box-shadow: inset 0 2px 0 var(--m-hairline);
}

/* The title bar, and the rule under the tabs, stop where the tables do. The charts' scroll box is capped at
   68rem above 1024 (see .m-sg__scroll) and every table fills it, so the bar
   takes the same cap — change one, change both. */
@media (min-width: 1024px) {
	.m-sg__bar,
	.m-sg__tabs {
		max-width: 68rem;
	}
}

/* Beside the model photo the column is already narrower than the cap, so the
   cap only left a gap before the photo. Let the chart fill its track. */
@media (min-width: 1024px) {
	.m-sg__chart.has-model .m-sg__bar,
	.m-sg__chart.has-model .m-sg__tabs,
	.m-sg__chart.has-model .m-sg__scroll {
		max-width: none;
	}
}

/* ---------- 43 · Cart page -------------------------------------------------
   page-cart.php gives the cart block the canvas instead of the 40rem reading
   column; these rules lay it out on the site's terms — lines on the left, a
   summary that stays in view on the right, tracked caps for every label,
   hairlines rather than tinted panels — and style the empty state that
   mitesh_empty_cart_block() builds from the listing card. Everything is scoped
   to .m-cartpage, so checkout keeps §30 alone.
   ------------------------------------------------------------------------- */

.m-cartpage {
	max-width: var(--m-canvas, 1800px);
	margin: 0 auto;
	padding: 0 var(--m-gutter) 7rem;
}

.m-cartpage__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 2rem;
	padding: 3.5rem 0 3rem;
}

.m-cartpage__title {
	margin: 0;
	font: 300 2.5rem/1.1 var(--m-sans);
	color: var(--m-ink);
}

.m-cartpage__back {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	font: 500 .75rem/1 var(--m-sans);
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--m-ink);
	white-space: nowrap;
}

.m-cartpage__back span {
	transition: transform .3s var(--m-ease);
}

.m-cartpage__back:hover span {
	transform: translateX(.25rem);
}

/* The empty state carries its own way back to the shop. */
.m-cartpage:has(.m-cartempty) .m-cartpage__back {
	visibility: hidden;
}

.m-cartpage .wp-block-woocommerce-cart {
	max-width: none;
	margin: 0;
}

/* --- Lines --------------------------------------------------------------- */

.m-cartpage table.wc-block-cart-items {
	border-bottom-color: var(--m-hairline);
}

.m-cartpage table.wc-block-cart-items .wc-block-cart-items__header th {
	padding: 0 0 1rem;
	font: 500 .75rem/1 var(--m-sans);
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--m-label);
}

.m-cartpage table.wc-block-cart-items .wc-block-cart-items__header .wc-block-cart-items__header-image {
	width: 9rem;
}

.m-cartpage table.wc-block-cart-items td {
	border-top-color: var(--m-hairline);
	padding: 2rem 0;
}

.m-cartpage table.wc-block-cart-items .wc-block-cart-item__image {
	padding-right: 2rem;
}

.m-cartpage .wc-block-cart-item__image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: var(--m-crop);
	object-fit: cover;
	background: var(--m-tint);
}

.m-cartpage .wc-block-cart-item__wrap {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: .5rem;
}

.m-cartpage .wc-block-components-product-name {
	font: 400 1.25rem/1.3 var(--m-sans);
	letter-spacing: .01em;
	color: var(--m-ink);
	text-decoration: none;
}

.m-cartpage .wc-block-cart-item__prices,
.m-cartpage .wc-block-cart-item__prices .wc-block-components-product-price {
	font: 400 1rem/1.4 var(--m-sans);
	color: var(--m-label);
}

.m-cartpage .wc-block-components-product-price del {
	color: var(--m-label);
	opacity: .7;
	margin-right: .375rem;
}

.m-cartpage .wc-block-components-product-price ins {
	text-decoration: none;
	color: var(--m-ink);
}

.m-cartpage .wc-block-components-product-metadata {
	margin: 0;
	font: 500 .75rem/1.6 var(--m-sans);
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--m-label);
}

.m-cartpage .wc-block-components-product-metadata p {
	margin: 0;
}

.m-cartpage .wc-block-cart-item__quantity {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	margin-top: .75rem;
}

.m-cartpage .wc-block-components-quantity-selector {
	width: 8rem;
	min-height: 2.75rem;
	margin: 0;
	border-color: var(--m-hairline-soft);
}

.m-cartpage .wc-block-components-quantity-selector::after {
	border: 0;
}

.m-cartpage .wc-block-components-quantity-selector__input {
	font: 400 1rem/1 var(--m-sans);
	color: var(--m-ink);
}

.m-cartpage .wc-block-components-quantity-selector__button {
	font: 400 1.125rem/1 var(--m-sans);
	color: var(--m-label);
	opacity: 1;
	transition: color .25s;
}

.m-cartpage .wc-block-components-quantity-selector__button:hover {
	color: var(--m-ink);
}

.m-cartpage .wc-block-cart-item__remove-link {
	color: var(--m-label);
	transition: color .25s;
}

.m-cartpage .wc-block-cart-item__remove-link:hover {
	color: var(--m-ink);
}

.m-cartpage .wc-block-cart-item__total .wc-block-components-product-price {
	font: 400 1.125rem/1.4 var(--m-sans);
	color: var(--m-ink);
}

/* "Save ₹920" — a line of caps, not a grey pill. */
.m-cartpage .wc-block-components-product-badge,
.m-cartpage .wc-block-components-sale-badge {
	background: none;
	border: 0;
	border-radius: 0;
	padding: 0;
	font: 500 .6875rem/1.4 var(--m-sans);
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--m-ink);
}

/* --- Summary ------------------------------------------------------------- */

.m-cartpage .wc-block-cart .wc-block-cart__totals-title {
	margin: 0;
	padding: 0 0 1rem;
	border-bottom: 1px solid var(--m-hairline);
	font: 500 .75rem/1 var(--m-sans);
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--m-label);
	text-align: left;
}

.m-cartpage .wc-block-cart__sidebar .wc-block-components-totals-wrapper {
	padding: 1.25rem 0;
	border-color: var(--m-hairline);
}

/* Subtotal, shipping, fees and taxes are one group under one rule; the rows
   inside it step by a line, not by a padded block each. */
.m-cartpage .wp-block-woocommerce-cart-order-summary-totals-block {
	padding: 1.25rem 0;
}

.m-cartpage .wp-block-woocommerce-cart-order-summary-totals-block .wc-block-components-totals-wrapper {
	padding: 0;
	border: 0;
}

.m-cartpage .wp-block-woocommerce-cart-order-summary-totals-block .wc-block-components-totals-wrapper:not(:empty) ~ .wc-block-components-totals-wrapper:not(:empty) {
	margin-top: 1rem;
}

.m-cartpage .wc-block-cart__sidebar .wc-block-cart__totals-title + .wc-block-components-totals-wrapper {
	border-top: 0;
}

.m-cartpage .wc-block-components-totals-coupon .wc-block-components-panel__button {
	margin: 0;
	padding-top: 0;
	padding-bottom: 0;
	font: 500 .75rem/1.4 var(--m-sans);
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--m-ink);
}

.m-cartpage .wc-block-components-totals-item {
	align-items: baseline;
}

.m-cartpage .wc-block-components-totals-item + .wc-block-components-totals-item,
.m-cartpage .wc-block-components-totals-shipping {
	margin-top: .875rem;
}

.m-cartpage .wc-block-components-totals-item__value {
	font: 400 1rem/1.4 var(--m-sans);
	color: var(--m-ink);
}

.m-cartpage .wc-block-components-totals-item__description,
.m-cartpage .wc-block-components-totals-shipping__via {
	margin-top: .25rem;
	font: 400 .875rem/1.5 var(--m-sans);
	color: var(--m-label);
}

.m-cartpage .wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
	font: 500 .8125rem/1 var(--m-sans);
	letter-spacing: .22em;
	color: var(--m-ink);
}

.m-cartpage .wc-block-components-totals-footer-item .wc-block-components-totals-item__value,
.m-cartpage .wc-block-components-totals-footer-item-tax-value {
	font: 400 1.5rem/1 var(--m-sans);
	color: var(--m-ink);
}

.m-cartpage .wc-block-cart__submit {
	margin: 1.5rem 0 0;
}

.m-cartpage .wc-block-cart__submit-button {
	width: 100%;
	min-height: 3.5rem;
}

/* --- Empty state --------------------------------------------------------- */

.m-cartempty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.75rem;
	padding: 3rem 0 6rem;
	text-align: center;
}

.m-cartempty__title {
	margin: 0;
	font: 300 1.75rem/1.2 var(--m-sans);
	color: var(--m-ink);
}

.m-cartempty__new {
	padding-top: 3.5rem;
	border-top: 1px solid var(--m-hairline);
}

.m-cartempty__head {
	margin: 0 0 2.5rem;
	font: 500 .8125rem/1 var(--m-sans);
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--m-ink);
}

ul.products.m-cartempty__grid {
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 3rem 2rem;
}

/* --- Layout -------------------------------------------------------------- */

@media (min-width: 1024px) {
	.m-cartpage .wc-block-cart {
		flex-wrap: wrap;
		align-items: flex-start;
		column-gap: 6rem;
		row-gap: 0;
	}

	/* Woo's notices slot: a full-width line of its own, above both columns. */
	.m-cartpage .wc-block-cart > div:not([class]) {
		flex: 0 0 100%;
	}

	.m-cartpage .wc-block-cart .wc-block-cart__main {
		flex: 1 1 0;
		min-width: 0;
		width: auto;
		padding: 0;
	}

	.m-cartpage .wc-block-cart .wc-block-cart__sidebar {
		flex: 0 0 26rem;
		width: auto;
		padding: 0;
		position: sticky;
		top: calc(var(--m-header-h, 6rem) + 2rem);
	}
}

@media (max-width: 1023px) {
	.m-cartpage {
		padding-bottom: 4.5rem;
	}

	.m-cartpage__head {
		padding: 2rem 0 1.75rem;
	}

	.m-cartpage__title {
		font-size: 1.75rem;
	}

	.m-cartpage .wc-block-cart {
		flex-direction: column;
	}

	.m-cartpage .wc-block-cart .wc-block-cart__main,
	.m-cartpage .wc-block-cart .wc-block-cart__sidebar {
		width: 100%;
		padding: 0;
	}

	.m-cartpage .wc-block-cart .wc-block-cart__sidebar {
		margin-top: 2.5rem;
	}

	.m-cartpage table.wc-block-cart-items td {
		padding: 1.5rem 0;
	}

	.m-cartpage .wc-block-components-product-name {
		font-size: 1.0625rem;
	}

	.m-cartempty {
		padding: 1.5rem 0 3.5rem;
	}

	.m-cartempty__new {
		padding-top: 2.5rem;
	}

	ul.products.m-cartempty__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 2.5rem 1rem;
	}

	/*
	 * Under 700px of cart Woo turns each line into a grid of fixed 80px and
	 * 132px tracks. The name, quantity and remove need more than 132px, so the
	 * cell spilled into an extra track and pushed the price off the right
	 * edge. The middle track flexes instead and the price takes what it needs.
	 * (Above 700px the row is a table row, and this has nothing to act on.)
	 */
	.m-cartpage table.wc-block-cart-items .wc-block-cart-items__row {
		grid-template-columns: 5rem minmax(0, 1fr) auto;
	}

	/* Woo spans the product cell across tracks 2-4, over the price, at the
	   same specificity as a plain override; the row class takes it past. */
	.m-cartpage table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__product {
		grid-column: 2 / 3;
		grid-row: 1;
		min-width: 0;
	}

	.m-cartpage table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__total {
		grid-column: 3 / 4;
		grid-row: 1;
		padding-left: 1rem;
	}

	.m-cartpage .wc-block-components-quantity-selector {
		width: 6.5rem;
	}
}

/* ---------- 44 · Coupon field and the checkout ------------------------------
   The coupon is one control: a hairline box and an ink button of the same
   height, butted together. The checkout is one column — contact, delivery,
   payment, then the order summary and the button — held under the 700px at
   which the block goes two-column (see page-checkout.php), so the summary
   Woo prints at the end is the only one; the copy it also folds in above the
   form is hidden here.
   ------------------------------------------------------------------------- */

/* --- Coupon -------------------------------------------------------------- */

.wc-block-components-totals-coupon .wc-block-components-panel__content {
	padding-top: 1rem;
}

.wc-block-components-totals-coupon__form {
	gap: 0;
	flex-wrap: nowrap;
	align-items: stretch;
}

.wc-block-components-totals-coupon__form .wc-block-components-totals-coupon__input {
	flex: 1 1 auto;
	min-width: 0;
}

.wc-block-components-totals-coupon__form .wc-block-components-totals-coupon__input input {
	border-right: 0 !important;
}

.wc-block-components-totals-coupon__form .wc-block-components-totals-coupon__input input:focus {
	border-right: 0 !important;
}

.wc-block-components-totals-coupon__form .wc-block-components-totals-coupon__button {
	flex: 0 0 auto;
	min-height: 0;
	padding: 0 1.75rem;
}

.wc-block-components-totals-coupon__form .wc-block-components-totals-coupon__button:disabled {
	opacity: 1;
	background: var(--m-ink);
	color: rgba(255, 255, 255, .45);
}

/* The summary keeps two rules: one above the subtotal, one above the total.
   The heading's underline and the rule under the total were a third and a
   fourth around a column that is already set apart by space. */
.m-cartpage .wc-block-cart .wc-block-cart__totals-title {
	border-bottom: 0;
	padding-bottom: .5rem;
}

.m-cartpage .wc-block-cart__sidebar .wc-block-components-totals-wrapper:last-child,
.m-cartpage .wc-block-cart .wp-block-woocommerce-cart-order-summary-block {
	border-bottom: 0;
}

/* --- Checkout ------------------------------------------------------------ */

.m-checkoutpage {
	max-width: var(--m-canvas, 1800px);
	margin: 0 auto;
	padding: 0 var(--m-gutter) 7rem;
}

/* In pixels, not rem: this is Woo's breakpoint, not a type measure. Woo goes
   two-column past 700px and prints the summary by the button only below it,
   and the rem shrinks with the viewport (382px at 1024 for 42rem), so a rem
   width would be both too narrow on laptops and unreliable against the 700. */
.m-checkoutpage__head,
.m-checkoutpage__body {
	max-width: 640px;
	margin: 0 auto;
}

.m-checkoutpage__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 2rem;
	padding: 3.5rem 0 2.5rem;
}

.m-checkoutpage__title {
	margin: 0;
	font: 300 2.5rem/1.1 var(--m-sans);
	color: var(--m-ink);
}

.m-checkoutpage__back {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	font: 500 .75rem/1 var(--m-sans);
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--m-ink);
	white-space: nowrap;
}

.m-checkoutpage__back span {
	transition: transform .3s var(--m-ease);
}

.m-checkoutpage__back:hover span {
	transform: translateX(-.25rem);
}

.m-checkoutpage .wp-block-woocommerce-checkout {
	max-width: none;
	margin: 0;
}

/* The folded summary above the form. Only in the one-column arrangement,
   where the same summary is also printed by the button. */
.m-checkoutpage .wc-block-checkout:not(.is-large) .wc-block-checkout__sidebar {
	display: none;
}

/* "You are currently checking out as a guest." Nothing to act on. */
.m-checkoutpage .wc-block-checkout__guest-checkout-notice {
	display: none;
}

.m-checkoutpage .wc-block-components-checkout-step__title,
.m-checkoutpage .checkout-order-summary-block-fill-wrapper .wc-block-components-checkout-step__heading {
	font: 500 .8125rem/1.4 var(--m-sans);
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--m-ink);
}

.m-checkoutpage .wc-block-components-checkout-step__heading {
	margin-bottom: 1.25rem;
}

.m-checkoutpage .wc-block-components-checkout-step {
	margin-bottom: 2.75rem;
}

.m-checkoutpage .wc-block-components-address-form__address_2-toggle,
.m-checkoutpage .wc-block-checkout__use-address-for-billing,
.m-checkoutpage .wc-block-components-checkbox__label {
	font: 400 .9375rem/1.5 var(--m-sans);
	color: var(--m-body);
}

.m-checkoutpage .wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"] {
	border-radius: 0;
	border-color: var(--m-hairline-soft);
	box-shadow: none;
}

.m-checkoutpage .wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"]:checked {
	background: var(--m-ink);
	border-color: var(--m-ink);
}

.m-checkoutpage .wc-block-components-checkbox .wc-block-components-checkbox__mark {
	fill: var(--m-ground);
}

/* Delivery and payment choices: a hairline under each, ink when chosen. */
.m-checkoutpage .wc-block-components-radio-control-accordion-option,
.m-checkoutpage .wc-block-components-radio-control__option {
	border-radius: 0 !important;
	box-shadow: inset 0 -1px 0 var(--m-hairline) !important;
}

.m-checkoutpage .wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control-accordion-option--checked-option-highlighted,
.m-checkoutpage .wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control__option--checked-option-highlighted {
	box-shadow: inset 0 -1px 0 var(--m-ink) !important;
}

.m-checkoutpage .wc-block-components-radio-control--highlight-checked::after {
	border: 0;
}

.m-checkoutpage .wc-block-components-radio-control__input {
	border-color: var(--m-hairline-soft);
}

.m-checkoutpage .wc-block-components-radio-control__input:checked {
	border-color: var(--m-ink);
}

.m-checkoutpage .wc-block-components-radio-control__input:checked::before {
	background: var(--m-ink);
}

.m-checkoutpage .wc-block-components-radio-control__label,
.m-checkoutpage .wc-block-components-radio-control__secondary-label {
	font: 400 1rem/1.4 var(--m-sans);
	color: var(--m-ink);
}

.m-checkoutpage .wc-block-components-radio-control__description {
	font: 400 .875rem/1.5 var(--m-sans);
	color: var(--m-label);
}

.m-checkoutpage .wc-block-checkout__terms {
	margin: 0 0 1.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--m-hairline);
	font: 400 .875rem/1.6 var(--m-sans);
	color: var(--m-label);
}

.m-checkoutpage .wc-block-checkout__terms a {
	color: var(--m-ink);
	text-decoration: underline;
	text-underline-offset: .2em;
}

.m-checkoutpage .wc-block-components-checkout-place-order-button {
	width: 100%;
	min-height: 3.5rem;
}

/* The summary by the button: same labels and figures as the cart's. */
.m-checkoutpage .checkout-order-summary-block-fill-wrapper {
	margin-bottom: 1.5rem;
}

.m-checkoutpage .wc-block-components-order-summary-item__description .wc-block-components-product-name {
	font: 400 1rem/1.3 var(--m-sans);
	color: var(--m-ink);
}

.m-checkoutpage .wc-block-components-order-summary-item__image img {
	border-radius: 0;
}

.m-checkoutpage .wc-block-components-order-summary-item__quantity {
	border-radius: 0;
	background: var(--m-ink);
	color: var(--m-ground);
	border-color: var(--m-ground);
	box-shadow: none;
}

.m-checkoutpage .wc-block-components-totals-item__value {
	font: 400 1rem/1.4 var(--m-sans);
	color: var(--m-ink);
}

.m-checkoutpage .wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
	font: 500 .8125rem/1 var(--m-sans);
	letter-spacing: .22em;
	color: var(--m-ink);
}

.m-checkoutpage .wc-block-components-totals-footer-item .wc-block-components-totals-item__value,
.m-checkoutpage .wc-block-components-totals-footer-item-tax-value {
	font: 400 1.5rem/1 var(--m-sans);
}

@media (max-width: 1023px) {
	.m-checkoutpage {
		padding-bottom: 4.5rem;
	}

	.m-checkoutpage__head {
		padding: 2rem 0 1.75rem;
	}

	.m-checkoutpage__title {
		font-size: 1.75rem;
	}
}

/* ---------- 45 · Order received ---------------------------------------------
   The receipt, on the checkout column: a line of thanks, the four facts of
   the order as a row of labelled figures, the pieces and the totals, then
   where it is going. Type is the checkout's, and the rules come down to three
   — under the facts, above the totals, above the addresses — with none
   between rows. Scoped to the received page; the account's order view keeps
   §37 as it is.
   ------------------------------------------------------------------------- */

.m-checkoutpage__back--next:hover span {
	transform: translateX(.25rem);
}

.m-checkoutpage--received .woocommerce-order {
	font: 400 1.125rem/1.6 var(--m-sans);
	color: var(--m-body);
}

.m-checkoutpage--received .woocommerce-order .woocommerce-thankyou-order-received {
	max-width: none;
	margin: 0 0 2.75rem;
	font: 300 2.125rem/1.25 var(--m-sans);
	color: var(--m-ink);
}

/* Order number, date, total, payment: label over figure, four across. */
.m-checkoutpage--received .woocommerce-order-overview {
	grid-template-columns: repeat(4, auto);
	justify-content: space-between;
	gap: 1.5rem;
	margin: 0 0 2rem;
	padding: 0 0 2rem;
	border-top: 0;
	border-bottom: 1px solid var(--m-hairline);
}

.m-checkoutpage--received .woocommerce-order-overview li {
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	gap: .625rem;
	padding: 0;
	border: 0;
	font: 500 .8125rem/1.4 var(--m-sans);
	letter-spacing: .2em;
}

.m-checkoutpage--received .woocommerce-order-overview li strong {
	font: 400 1.25rem/1.35 var(--m-sans);
	letter-spacing: 0;
}

/* The payment instructions — for cash on delivery, the note about change. */
.m-checkoutpage--received .woocommerce-order > p:not([class]) {
	margin: 0 0 3.5rem;
	font: 400 1.125rem/1.6 var(--m-sans);
	color: var(--m-label);
}

.m-checkoutpage--received .woocommerce-order-details,
.m-checkoutpage--received .woocommerce-customer-details {
	margin-top: 0;
}

.m-checkoutpage--received .woocommerce-order-details__title,
.m-checkoutpage--received .woocommerce-column__title,
.m-checkoutpage--received .woocommerce-customer-details > h2 {
	margin: 0 0 1.5rem;
	font: 500 .875rem/1.4 var(--m-sans);
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--m-ink);
}

/* --- The pieces and the totals ------------------------------------------ */

.m-checkoutpage--received .woocommerce-table--order-details {
	margin: 0 0 2.5rem;
	font: 400 1.25rem/1.5 var(--m-sans);
}

/* "Product / Total" says nothing the rows do not; kept for screen readers. */
.m-checkoutpage--received .woocommerce-table--order-details thead {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.m-checkoutpage--received .woocommerce-table--order-details td,
.m-checkoutpage--received .woocommerce-table--order-details tfoot th {
	border: 0;
	padding: .5rem 0;
}

.m-checkoutpage--received .woocommerce-table--order-details tbody tr:last-child td {
	padding-bottom: 1.5rem;
}

.m-checkoutpage--received .woocommerce-table--order-details .product-name a {
	color: var(--m-ink);
	border: 0;
	text-decoration: none;
}

.m-checkoutpage--received .woocommerce-table--order-details .product-quantity {
	font-weight: 400;
	color: var(--m-label);
}

.m-checkoutpage--received .woocommerce-table--order-details .wc-item-meta {
	list-style: none;
	margin: .375rem 0 0;
	padding: 0;
	font: 400 1rem/1.5 var(--m-sans);
	color: var(--m-label);
}

.m-checkoutpage--received .woocommerce-table--order-details .wc-item-meta p {
	display: inline;
	margin: 0;
}

.m-checkoutpage--received .woocommerce-table--order-details tfoot tr:first-child th,
.m-checkoutpage--received .woocommerce-table--order-details tfoot tr:first-child td {
	border-top: 1px solid var(--m-hairline);
	padding-top: 1.5rem;
}

.m-checkoutpage--received .woocommerce-table--order-details tfoot th {
	font: 500 .875rem/1.6 var(--m-sans);
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--m-label);
	vertical-align: baseline;
}

.m-checkoutpage--received .woocommerce-table--order-details tfoot td {
	color: var(--m-ink);
	vertical-align: baseline;
}

.m-checkoutpage--received .woocommerce-table--order-details tfoot td small,
.m-checkoutpage--received .woocommerce-table--order-details .shipped_via {
	display: block;
	font: 400 1rem/1.5 var(--m-sans);
	color: var(--m-label);
}

.m-checkoutpage--received .woocommerce-table--order-details tfoot tr:last-child th,
.m-checkoutpage--received .woocommerce-table--order-details tfoot tr:last-child td {
	border-bottom: 0;
	padding-top: 1.25rem;
	font-weight: 500;
}

.m-checkoutpage--received .woocommerce-table--order-details tfoot tr:last-child th {
	font-size: .9375rem;
	letter-spacing: .22em;
	color: var(--m-ink);
}

.m-checkoutpage--received .woocommerce-table--order-details tfoot tr:last-child td {
	font: 400 2rem/1 var(--m-sans);
}

/* --- Where it is going -------------------------------------------------- */

.m-checkoutpage--received .woocommerce-customer-details {
	padding-top: 2.5rem;
	border-top: 1px solid var(--m-hairline);
}

.m-checkoutpage--received .woocommerce-columns--addresses {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 2.5rem;
}

.m-checkoutpage--received .woocommerce-column {
	float: none;
	width: auto;
	margin: 0;
	min-width: 0;
	padding: 0;
	border: 0; /* The section above draws the one rule. */
}

.m-checkoutpage--received .woocommerce-customer-details address {
	margin: 0;
	padding: 0;
	border: 0;
	font: 400 1.25rem/1.7 var(--m-sans);
	font-style: normal;
	color: var(--m-body);
	overflow-wrap: anywhere;
}

.m-checkoutpage--received .woocommerce-customer-details address p {
	margin: .5rem 0 0;
	color: var(--m-label);
}

@media (max-width: 639px) {
	.m-checkoutpage--received .woocommerce-order .woocommerce-thankyou-order-received {
		font-size: 1.5rem;
	}

	.m-checkoutpage--received .woocommerce-order-overview {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		row-gap: 1.75rem;
	}

	.m-checkoutpage--received .woocommerce-columns--addresses {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ---------- 46 · Product page: type a step up -------------------------------
   From 1024px up the root scales with the window, so at laptop widths the
   reading column, the labels and the buy panel's small print came out at
   9-11px. Each moves one step, in proportion, so the order of sizes on the
   page is unchanged: title, price, reading text, small print, buttons, then
   the tracked labels. Below 1024px the root is a fixed 16px, these were
   already legible, and the phone layout is left as it was.
   Sizes in the comments are at a 1440px window.
   ------------------------------------------------------------------------- */

@media (min-width: 1024px) {
	/* The titles move a little so the larger price and copy keep their distance. */
	.m-pdp__title,
	.m-pdp__buyTitle {
		font-size: 1.625rem; /* 18.4 -> 20.8px */
	}

	.single-product .m-crumb,
	.m-pdp__cat,
	.m-pdp__vendor,
	.m-pdp__desc .m-spec__k,
	.m-pdp__buy .stock,
	.m-pdp__buy table.variations label,
	.single-product .related.products > h2 {
		font-size: .8125rem; /* 8.8-9.6 -> 10.4px */
	}

	.m-pdp__copy {
		font-size: 1.0625rem; /* 11.2 -> 13.6px */
		max-width: 26rem;
	}

	/* With the values now larger than the labels, a nudge no longer lines
	   them up; the shared baseline does. */
	.m-pdp__desc .m-spec {
		font-size: 1.0625rem; /* 11.2 -> 13.6px */
		align-items: baseline;
	}

	.m-pdp__desc .m-spec__k {
		padding-top: 0;
	}

	.m-pdp__buy .price {
		font-size: 1.25rem; /* 11.2 -> 16px */
	}

	.m-pdp__tax {
		font-size: .9375rem; /* 9.6 -> 12px */
	}

	.m-pdp__buy .quantity input[type="number"],
	.m-pdp__buy select {
		font-size: 1.0625rem; /* 12.8/11.2 -> 13.6px */
	}

	/* One size for both buttons; they were 9.6 and 10px. */
	.m-pdp__buy button.single_add_to_cart_button,
	.m-pdp__buy .button.m-pdp__buynow {
		font-size: .875rem; /* -> 11.2px */
	}

	.m-pdp__buy .reset_variations,
	.m-pdp__buy .product_meta {
		font-size: .75rem; /* 8.8 -> 9.6px */
	}
}

/* ---------- 43 · Lookbook: flipbook slot, cover and concept, contact --------
   Laid out to the owner's wireframe: a rectangle across the top for the
   owner's own flipbook; under it the lookbook's cover beside the concept
   note, with preview and download under the cover; a contact block to close.
   The rectangle is 16:9 because every page of the lookbook PDF is
   (1440 × 810 pt); an embedded frame fills it edge to edge.
   ------------------------------------------------------------------------- */

.m-lbk {
	padding-bottom: 6rem;
}

/* --- The flipbook's place --------------------------------------------------- */

/* Held to 16:9 and to 85% of the screen's height; where the height is what
   stops it, it narrows, so it sits centred rather than flush left. */
.m-lbk__flipbook {
	position: relative;
	width: min(100%, calc(85vh * 16 / 9));
	max-height: 85vh;
	aspect-ratio: 16 / 9;
	margin: 3.5rem auto 0;
	overflow: hidden;
	background: var(--m-tint);
}

/* Whatever frame is pasted in, at whatever size it was given, fills the box. */
.m-lbk__flipbook:not(.m-lbk__flipbook--code) iframe {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	border: 0;
}

/* A shortcode brings its own markup and height; the box steps back. */
.m-lbk__flipbook--code {
	width: 100%;
	aspect-ratio: auto;
	max-height: none;
	overflow: visible;
	background: none;
}

/* The empty box, shown to editors only until the flipbook is set. */
.m-lbk__slot {
	position: absolute;
	inset: 0;
	display: grid;
	place-content: center;
	justify-items: center;
	gap: 1rem;
	padding: 2rem;
	border: 1px dashed var(--m-label);
	text-align: center;
}

.m-lbk__slotTitle {
	padding-left: .24em;
	font: 500 .875rem/1 var(--m-sans);
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--m-ink);
}

.m-lbk__slotNote {
	max-width: 32rem;
	font: 400 1rem/1.6 var(--m-sans);
	color: var(--m-body);
}

/* --- Cover and concept ---------------------------------------------------- */

.m-lbk__about {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	gap: 3rem 6rem;
	align-items: start;
	padding-top: 6rem;
}

.m-lbk__cover {
	margin: 0;
}

.m-lbk__img {
	display: block;
	width: 100%;
	object-fit: cover;
	background: var(--m-tint);
}

.m-lbk__cover .m-lbk__img {
	height: auto;
	aspect-ratio: 3 / 4;
	object-position: 40% center;
}

.m-lbk__actions {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
	gap: .75rem;
	margin-top: 1.25rem;
}

.m-lbk__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 3.25rem;
	padding: 0 1.5rem;
	border: 1px solid var(--m-ink);
	background: none;
	color: var(--m-ink);
	font: 500 .8125rem/1 var(--m-sans);
	letter-spacing: .22em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color .3s, color .3s, opacity .3s;
}

.m-lbk__btn:hover {
	background: var(--m-ink);
	color: var(--m-ground);
}

.m-lbk__btn--solid {
	background: var(--m-ink);
	color: var(--m-ground);
}

.m-lbk__btn--solid:hover {
	opacity: .85;
}

.m-lbk__concept {
	max-width: 38rem;
	padding-top: 1rem;
}

.m-lbk__title {
	margin: 0 0 1.5rem;
	font: 300 3.25rem/1.05 var(--m-sans);
	color: var(--m-ink);
}

.m-lbk__lead {
	margin: 0 0 1.75rem;
	font: 400 1.5rem/1.55 var(--m-sans);
	color: var(--m-ink);
}

.m-lbk__body.m-entry {
	max-width: none;
	margin: 0;
	padding: 0;
}

.m-lbk__body p {
	margin: 0 0 1.25rem;
	font: 400 1.25rem/1.8 var(--m-sans);
	color: var(--m-body);
}

/* --- Contact -------------------------------------------------------------- */

.m-lbk__contact {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 2rem 4rem;
	align-items: end;
	margin-top: 6rem;
	padding-top: 3.5rem;
	border-top: 1px solid var(--m-hairline);
}

.m-lbk__contactTitle {
	margin: 0 0 .75rem;
	font: 300 2.25rem/1.15 var(--m-sans);
	color: var(--m-ink);
}

.m-lbk__contactNote {
	margin: 0;
	font: 400 1.25rem/1.7 var(--m-sans);
	color: var(--m-body);
}

.m-lbk__contactList {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: .75rem;
	justify-items: end;
	font: 400 1.25rem/1.4 var(--m-sans);
	color: var(--m-ink);
}

.m-lbk__contactList a:not(.m-colls__all) {
	transition: opacity .3s;
}

.m-lbk__contactList a:not(.m-colls__all):hover {
	opacity: .6;
}

/* --- Phones ---------------------------------------------------------------- */

@media (max-width: 767px) {
	.m-lbk {
		padding-bottom: 4rem;
	}

	.m-lbk__flipbook {
		margin-top: 2rem;
	}

	.m-lbk__slot {
		gap: .625rem;
		padding: 1rem;
	}

	.m-lbk__slotNote {
		font-size: .875rem;
		line-height: 1.5;
	}

	.m-lbk__about {
		grid-template-columns: minmax(0, 1fr);
		gap: 2.5rem;
		padding-top: 3.5rem;
	}

	.m-lbk__concept {
		padding-top: 0;
	}

	.m-lbk__title {
		font-size: 2.25rem;
	}

	.m-lbk__lead {
		font-size: 1.375rem;
	}

	.m-lbk__contact {
		grid-template-columns: minmax(0, 1fr);
		align-items: start;
		margin-top: 4rem;
		padding-top: 2.5rem;
	}

	.m-lbk__contactTitle {
		font-size: 1.75rem;
	}

	.m-lbk__contactList {
		justify-items: start;
		gap: 1rem;
		font-size: 1.5rem;
	}

	.m-lbk__contactList .m-colls__all {
		font-size: .8125rem;
	}
}

/* ---------- 44 · Mobile pass: homepage and the shared chrome ----------------
   Phone fixes found walking the homepage at 375-390px. Kept together so the
   pass can be read, or undone, in one place.
   ------------------------------------------------------------------------- */

/*
 * The rails snap their items to the start edge, and with no scroll padding
 * that edge is the container's own — so the first tile snapped flush to the
 * screen edge while every heading above it sat in the gutter.
 */
.m-rail {
	scroll-padding-inline: var(--m-gutter);
}

@media (max-width: 1023px) {
	/* 40px between rail tiles is desktop air; on a phone it is most of a tile. */
	.m-rail {
		gap: 1.25rem;
	}

	/* Tracked caps were down to 10px. 11px is the floor for caps at this
	   tracking on a phone. */
	.m-announce,
	.m-eyebrow,
	.m-eyebrow--lg,
	.m-hero__eyebrow {
		font-size: .6875rem;
	}

	/*
	 * Underlined caps links are 20px tall — too small a target for a thumb.
	 * The hit area grows invisibly; the type and the underline stay put.
	 */
	.m-link,
	.m-cta {
		position: relative;
	}

	.m-link::before,
	.m-cta::before {
		content: '';
		position: absolute;
		inset: -.75rem -.5rem;
	}

	/* The ship-to selector is the last control on the page; give it a real target. */
	.m-ship__select {
		min-height: 2.75rem;
	}

	/* White caps over the workshop photograph lost to its bright window. */
	.m-making__scrim {
		background: linear-gradient(to top, rgba(20, 19, 17, .6), rgba(20, 19, 17, .32));
	}
}

@media (max-width: 599px) {
	/*
	 * The footer went single-column here, and with every link a 44px row plus
	 * a gap the four lists ran to four screens. They pair up instead —
	 * shopping beside help, about beside social — on a 44px pitch with no gap,
	 * and the letter keeps the full width underneath.
	 */
	.m-footer__cols {
		grid-template-columns: 1fr 1fr;
		gap: 2.25rem 1.5rem;
	}

	.m-linklist {
		gap: 0;
		font-size: 1rem;
	}

	.m-footer__head {
		margin-bottom: .5rem;
	}
}

/* ---------- 45 · Phone homepage: singles and pairs --------------------------
   After bode.com's phone homepage: full-width single photographs broken up by
   two-up pairs. Phones only (767px and below) — tablet and desktop keep the
   layouts above untouched.

   Hero, the featured band, the workshop and the cloth band stay single and
   full-bleed. Collections, new arrivals, the featured piece's two views, the
   plates and the diaries become pair grids; where a grid holds an odd number,
   its first photograph takes the full width as a lead and the rest pair up.
   ------------------------------------------------------------------------- */

@media (max-width: 767px) {
	/* One pair grid for every section that uses it. */
	.m-collections .m-rail,
	.m-new .m-pair,
	.m-detail,
	.m-plates__grid,
	.m-diaries__grid {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 2rem .75rem;
		align-items: start;
	}

	/* An odd count leads with a single, full-width photograph. */
	.m-collections .m-rail > :first-child:nth-last-child(odd),
	.m-plates__grid > :first-child:nth-last-child(odd),
	.m-diaries__grid > :first-child:nth-last-child(odd) {
		grid-column: 1 / -1;
	}

	/* --- Collections: the sideways rail becomes a grid ----------------------- */

	.m-collections .m-rail {
		overflow: visible;
		padding: 0 var(--m-gutter);
		cursor: auto;
		scroll-snap-type: none;
	}

	.m-collections .m-rail__item {
		width: auto;
	}

	.m-collections .m-rail__item .m-tile {
		height: auto;
		aspect-ratio: 3 / 4;
	}

	.m-collections .m-rail__meta {
		padding-top: .75rem;
	}

	.m-collections .m-rail__name {
		font-size: .6875rem;
		letter-spacing: .2em;
	}

	.m-collections .m-rail__count {
		font-size: .75rem;
	}

	/* --- New arrivals: two up, name and price only ---------------------------- */

	.m-new .m-card__head {
		display: block;
		padding-top: .75rem;
	}

	.m-new .m-card__name {
		font-size: .875rem;
		line-height: 1.35;
		letter-spacing: .01em;
	}

	.m-new .m-card__price {
		margin-top: .375rem;
		font-size: .8125rem;
		letter-spacing: .04em;
	}

	.m-new .m-card__price del {
		margin-right: .375rem;
	}

	/* The quick-add and the note need a full width to read; the card still
	   opens the product. */
	.m-new .m-card__material,
	.m-new .m-card__foot,
	.m-new .m-card__note {
		display: none;
	}

	/* --- Featured piece: its two views side by side, the details under -------- */

	.m-detail .m-tile {
		aspect-ratio: 4 / 5;
	}

	.m-detail__col {
		grid-column: 1 / -1;
	}

	/* --- Plates and diaries: a lead, then a pair ------------------------------ */

	.m-plates__grid > * .m-tile,
	.m-diaries__grid .m-tile {
		aspect-ratio: 4 / 5;
	}

	.m-plate__caption {
		margin-top: .75rem;
		font-size: .8125rem;
		line-height: 1.6;
	}

	.m-plates__grid > :first-child:nth-last-child(odd) .m-plate__caption {
		font-size: .9375rem;
	}

	.m-diary__name {
		padding-top: .75rem;
		font-size: .6875rem;
		letter-spacing: .22em;
	}
}

/* ---------- 46 · Stacked footer: centred ------------------------------------
   Below 1024 the footer stacks — lockup, two pairs of link columns, the letter,
   the bar — and set flush left it left every right-hand column, and the letter,
   with a dead strip down the right. Centred, each block sits on its own axis
   and the empty space falls evenly either side. Desktop is untouched.
   ------------------------------------------------------------------------- */

@media (max-width: 1023px) {
	.m-footer__brand,
	.m-footer__col,
	.m-footer__letter,
	.m-footer__bar {
		text-align: center;
	}

	/* Tracked caps carry their spacing after the last letter too; indenting
	   by the same amount puts each word on the true centre. */
	.m-footer__wordmark {
		text-indent: .26em;
	}

	.m-footer__vintage {
		text-indent: .3em;
	}

	.m-footer__head {
		text-indent: .22em;
	}

	.m-linklist {
		align-items: center;
	}

	.m-footer__letterBody,
	.m-footer__consent,
	.m-footer__sub {
		margin-left: auto;
		margin-right: auto;
	}

	.m-footer__bar {
		align-items: center;
	}

	.m-ship {
		justify-content: center;
	}
}

/* ---------- 47 · Stacked footer: one column, link groups as dropdowns -------
   After casablancaparis.com on a phone: the letter first, then each link
   group as a full-width row that opens downward, social as one centred row,
   the bar last. The groups are <details> printed open (see footer.php), so
   on desktop the summary is drawn exactly as the plain heading it replaced.
   ------------------------------------------------------------------------- */

summary.m-footer__head {
	display: block;
	list-style: none;
	cursor: default;
}

summary.m-footer__head::-webkit-details-marker {
	display: none;
}

summary.m-footer__head::marker {
	content: '';
}

.m-footer__chev {
	display: none;
}

@media (max-width: 1023px) {
	.m-footer__cols {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}

	/* The letter leads, set flush left as the reference sets it. */
	.m-footer__letter {
		order: -1;
		padding-bottom: 2.75rem;
		text-align: left;
	}

	.m-footer__letterBody,
	.m-footer__consent,
	.m-footer__sub {
		margin-left: 0;
		margin-right: 0;
	}

	.m-footer__sub {
		max-width: none;
	}

	.m-footer__col {
		text-align: left;
	}

	/* --- The dropdowns ------------------------------------------------------- */

	details.m-footer__col {
		border-top: 1px solid var(--m-dark-hairline);
	}

	details.m-footer__col:last-of-type {
		border-bottom: 1px solid var(--m-dark-hairline);
	}

	summary.m-footer__head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 1rem;
		min-height: 2.75rem;
		margin: 0;
		padding: 1.25rem 0;
		font-size: .8125rem;
		text-indent: 0;
		color: var(--m-dark-head);
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
	}

	.m-footer__chev {
		display: block;
		flex: none;
		width: .5rem;
		height: .5rem;
		margin-right: .25rem;
		border-right: 1px solid currentColor;
		border-bottom: 1px solid currentColor;
		transform: translateY(-25%) rotate(45deg);
	}

	details.m-footer__col[open] .m-footer__chev {
		transform: translateY(25%) rotate(-135deg);
	}

	/* The turn is switched on only once the script has closed the groups,
	   so the chevrons do not swing shut on every page load. */
	.m-footer__cols.is-ready .m-footer__chev {
		transition: transform .3s var(--m-ease);
	}

	details.m-footer__col .m-linklist {
		align-items: flex-start;
		padding-bottom: 1.25rem;
	}

	/* --- Social: one centred row under the groups ---------------------------- */

	.m-footer__col--social {
		padding-top: 2rem;
		text-align: center;
	}

	.m-footer__col--social .m-footer__head {
		display: none;
	}

	.m-footer__col--social .m-linklist {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		gap: 0 2rem;
	}
}

/* ---------- 48 · Phone menu: one centred column -----------------------------
   After the reference the owner supplied: the top-level items as a single
   centred column of large, widely tracked capitals, the current page
   underlined. Replaces the tab strip and image panels below 1024px only;
   the rail-and-panels drawer is unchanged above that.
   ------------------------------------------------------------------------- */

.m-mega__list {
	display: none;
}

@media (max-width: 1023px) {
	.m-mega__inner {
		display: none;
	}

	.m-mega__list {
		display: flex;
		flex-direction: column;
		height: 100%;
		overflow-y: auto;
		overscroll-behavior: contain;
		padding: 2.5rem var(--m-gutter) 3rem;
		scrollbar-width: none;
	}

	.m-mega__list::-webkit-scrollbar {
		display: none;
	}

	/* Centred in the drawer when it fits; scrolls from the top when it does not. */
	.m-mega__listItems {
		list-style: none;
		margin: auto 0;
		padding: 0;
		text-align: center;
	}

	.m-mega__listItem.has-break {
		position: relative;
		margin-top: 1rem;
		padding-top: 1rem;
	}

	.m-mega__listItem.has-break::before {
		content: '';
		position: absolute;
		top: 0;
		left: 50%;
		width: 2.5rem;
		height: 1px;
		background: var(--m-hairline);
		transform: translateX(-50%);
	}

	.m-mega__listLink {
		display: block;
		padding: .875rem 0;
		font: 300 1.125rem/1.2 var(--m-sans);
		letter-spacing: .28em;
		text-transform: uppercase;
		color: var(--m-ink);
		list-style: none;
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
	}

	.m-mega__listLink::-webkit-details-marker {
		display: none;
	}

	.m-mega__listLink::marker {
		content: '';
	}

	/* Tracked capitals carry their spacing after the last letter; the same
	   amount before the first puts each word on the true centre, and makes
	   the underline sit evenly under it. */
	.m-mega__listLabel {
		display: inline-block;
		padding-left: .28em;
	}

	.m-mega__sub {
		list-style: none;
		margin: 0 0 .75rem;
		padding: 0;
		font: 400 1rem/1.4 var(--m-sans);
		color: var(--m-body);
	}

	.m-mega__sub a {
		display: block;
		padding: .6875rem 0;
		transition: color .25s ease;
	}

	.m-mega__sub a:hover,
	.m-mega__sub a:focus-visible {
		color: var(--m-ink);
	}
}

/* ---------- 49 · Desktop category dropdown: a card sized to its links -------
   After vapeandgo.co.uk: the dropdown is a framed card that takes only the
   room its links need — a column per group, each under a heading with a
   hairline, links in plain sentence case, no picture. The script hangs it
   under its own category (--m-navpanel-x). Tablet and desktop; the phone menu is
   the drawer and is untouched.
   ------------------------------------------------------------------------- */

@media (min-width: 768px) {
	.m-navpanel {
		left: var(--m-navpanel-x, var(--m-gutter));
		right: auto;
		width: max-content;
		max-width: calc(100vw - 2 * var(--m-gutter));
		border: 1px solid var(--m-hairline);
		box-shadow: 0 16px 36px -18px rgba(0, 0, 0, .28);
	}

	.m-navpanel__inner {
		display: block;
		max-width: none;
		margin: 0;
		padding: 1.75rem 2.25rem 2rem;
	}

	.m-navpanel__cols {
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: minmax(12rem, max-content);
		gap: 0 2.5rem;
	}

	.m-navpanel__group {
		min-width: 0;
	}

	.m-navpanel__groupHead {
		display: block;
		margin: 0 0 .75rem;
		padding-bottom: .75rem;
		border-bottom: 1px solid var(--m-hairline);
		font: 500 1.125rem/1.2 var(--m-sans);
		letter-spacing: 0;
		text-transform: none;
		color: var(--m-ink);
	}

	.m-navpanel__list {
		gap: 0;
		font: 400 1.0625rem/1.4 var(--m-sans);
		color: var(--m-body);
	}

	.m-navpanel__list a {
		display: block;
		padding: .3125rem 0;
	}

	/* A long list splits in two under its one heading rather than running on. */
	.m-navpanel__list:has(> li:nth-child(9)) {
		display: block;
		columns: 2;
		column-gap: 2.5rem;
	}

	.m-navpanel__list:has(> li:nth-child(9)) li {
		break-inside: avoid;
	}
}

/* Switching from one category straight to another shows the new card at
   once — no fade — so it never draws over the one it replaces. */
@media (min-width: 768px) {
	.m-navbar__item.is-instant .m-navpanel__inner {
		transition: none;
	}
}

/* ---------- 50 · Footer lockup: the centred seal ----------------------------
   The owner's pick of four lockups: the name centred on the band and, under
   it, "vintage पुनर्स्थापना" set into a hairline that runs the width of the
   columns. The rule is the brand block's own ::before and ::after, placed on
   the second row of its grid either side of the tag, so the markup is as it
   was.
   ------------------------------------------------------------------------- */

.m-footer__brand {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto auto minmax(0, 1fr);
	align-items: center;
	gap: 1.75rem 1.5rem;
	text-align: center;
}

.m-footer__brand::before,
.m-footer__brand::after {
	content: '';
	grid-row: 2;
	height: 1px;
	background: var(--m-dark-hairline);
}

.m-footer__brand::before {
	grid-column: 1;
}

.m-footer__brand::after {
	grid-column: 4;
}

/* Tracked capitals carry their spacing after the last letter too; the same
   amount before the first puts the word on the true centre. */
.m-footer__wordmark {
	grid-row: 1;
	grid-column: 1 / -1;
	justify-self: center;
	padding-left: .28em;
	text-indent: 0;
	white-space: nowrap;
	font-size: 2rem;
}

.m-footer__vintage {
	grid-row: 2;
	grid-column: 2;
	margin: 0;
	padding-left: .3em;
	text-indent: 0;
	font-size: .625rem;
}

.m-footer__deva {
	grid-row: 2;
	grid-column: 3;
	font-size: 1.5rem;
	line-height: 1;
}

/* Desktop: large, centred in the dark band's spare height so what is left
   falls evenly above and below. rem tracks the viewport width up here. */
@media (min-width: 1024px) {
	.m-footer__brand {
		margin-top: auto;
		margin-bottom: auto;
		gap: 2.25rem 2rem;
	}

	.m-footer__wordmark {
		font-size: 7.5rem;
	}

	.m-footer__vintage {
		font-size: 1.5rem;
	}

	.m-footer__deva {
		font-size: 3rem;
	}
}

@media (max-width: 1023px) {
	.m-footer__brand {
		gap: 1rem .875rem;
	}

	.m-footer__wordmark {
		font-size: 1.625rem;
	}

	.m-footer__vintage {
		font-size: .5625rem;
	}

	.m-footer__deva {
		font-size: 1.125rem;
	}
}

/* The narrowest phones take the name down a step so it stays on one line. */
@media (max-width: 359px) {
	.m-footer__wordmark {
		font-size: 1.375rem;
	}
}


/* ---------- 51 · Lookbook index, and the way back from a lookbook -----------
   After kodangs.com/pages/lookbook: tall cover cards, three across and edge
   to edge on desktop, two on a tablet, one on a phone, each with its title
   and tagline over the foot of the picture. The cards run past the page
   gutter to the screen's edges, as the reference's do.
   ------------------------------------------------------------------------- */

/* Under the last row, the same hairline of white as between the cards. */
.m-lbkx {
	padding-bottom: 3px;
}

.m-lbkx__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 3px;
	margin: 0 calc(-1 * var(--m-gutter));
}

.m-lbkx__card {
	position: relative;
	display: block;
	aspect-ratio: 475 / 672;
	overflow: hidden;
	background: var(--m-tint);
	color: #fff;
}

.m-lbkx__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1.2s var(--m-ease);
}

.m-lbkx__card:hover .m-lbkx__img,
.m-lbkx__card:focus-visible .m-lbkx__img {
	transform: scale(1.03);
}

/* A shade under the words so they read on any picture. */
.m-lbkx__card::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0) 45%);
	pointer-events: none;
}

.m-lbkx__text {
	position: absolute;
	left: 1.75rem;
	right: 1.75rem;
	bottom: 1.75rem;
	z-index: 1;
	display: grid;
	gap: .625rem;
}

.m-lbkx__title {
	font: 300 2.25rem/1.1 var(--m-sans);
}

.m-lbkx__tag {
	font: 500 .75rem/1.5 var(--m-sans);
	letter-spacing: .2em;
	text-transform: uppercase;
	opacity: .85;
}

.m-lbk__back {
	display: inline-flex;
	align-items: center;
	gap: .625rem;
	margin-top: 2rem;
	font: 500 .75rem/1 var(--m-sans);
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--m-label);
	transition: color .3s;
}

.m-lbk__back:hover {
	color: var(--m-ink);
}

.m-lbk__back + .m-lbk__flipbook {
	margin-top: 1.5rem;
}

@media (max-width: 1023px) {
	.m-lbkx__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.m-lbkx__text {
		left: 1.25rem;
		right: 1.25rem;
		bottom: 1.25rem;
	}

	.m-lbkx__title {
		font-size: 1.5rem;
	}
}

@media (max-width: 599px) {
	.m-lbkx__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.m-lbkx__title {
		font-size: 1.75rem;
	}

	.m-lbk__back {
		margin-top: 1.5rem;
	}
}


/* ---------- 52 · A lookbook's PDF as a flipbook -----------------------------
   Where a lookbook has a PDF and no flipbook of the owner's own, PDF.js draws
   it here page by page (assets/js/pdf-flipbook.js). The page takes the PDF's
   own shape — 16:9 for the Aura Collection — no taller than 80% of the
   screen, with the arrows and page count under it. A turn lifts the page
   from its right edge over to the left, uncovering the next.
   ------------------------------------------------------------------------- */

.m-lbk__flipbook--pdf {
	width: 100%;
	aspect-ratio: auto;
	max-height: none;
	overflow: visible;
	background: none;
}

/* StPageFlip sets the book's height from its width, so the width is what is
   capped — to whatever keeps the page, or the two-page spread, within 80% of
   the screen's height. The script sets --m-pdf-spread to that shape. */
.m-pdfbook__stage {
	position: relative;
	width: min(100%, calc(80vh * var(--m-pdf-spread, 1.7778)));
	margin: 0 auto;
	user-select: none;
	-webkit-user-select: none;
	outline-offset: .5rem;
}

/* Until the book is built, hold its place at the PDF's usual shape. */
.m-pdfbook:not(.is-ready) .m-pdfbook__stage {
	aspect-ratio: 16 / 9;
	background: var(--m-tint);
}

/* Above a phone the book opens on two facing pages, so it holds a spread's place. */
@media (min-width: 768px) {
	.m-pdfbook:not(.is-ready) .m-pdfbook__stage {
		aspect-ratio: 32 / 9;
	}
}

.m-pdfbook__status {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: grid;
	place-items: center;
	margin: 0;
	font: 500 .75rem/1 var(--m-sans);
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--m-label);
}

.m-pdfbook__status a {
	padding-bottom: .25rem;
	border-bottom: 1px solid currentColor;
	color: var(--m-ink);
}

/* Shut, the book is slid to the centre (the script sets the offset); it slides
   back over the length of a page turn as it opens. The empty half that slides
   out of the frame meanwhile is clipped sideways only, so the page's corner
   can still lift above and below while turning. */
.m-pdfbook__flip {
	transition: transform .9s var(--m-ease);
}

.m-pdfbook__stage {
	overflow-x: clip;
}

/* StPageFlip places, bends and turns the pages; they only carry the paper. */
.m-pdfbook__page {
	overflow: hidden;
	background: var(--m-ground);
}

/* A page still being drawn says so — the PDF's photographs are JPEG 2000,
   which take the viewer a moment. */
.m-pdfbook__page:empty::after {
	content: 'Loading';
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	font: 500 .75rem/1 var(--m-sans);
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--m-label);
}

.m-pdfbook__page canvas {
	display: block;
	width: 100%;
	height: 100%;
}

.m-pdfbook__bar {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 1.5rem;
	margin-top: 1.25rem;
}

.m-pdfbook:not(.is-ready) .m-pdfbook__bar {
	visibility: hidden;
}

.m-pdfbook__arrow {
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	border: 1px solid var(--m-hairline);
	background: var(--m-ground);
	color: var(--m-ink);
	cursor: pointer;
	transition: border-color .3s, opacity .3s;
}

.m-pdfbook__arrow:hover {
	border-color: var(--m-ink);
}

.m-pdfbook__arrow[disabled] {
	opacity: .3;
	cursor: default;
	border-color: var(--m-hairline);
}

.m-pdfbook__arrow::before {
	content: '';
	width: .5625rem;
	height: .5625rem;
	border-left: 1px solid currentColor;
	border-bottom: 1px solid currentColor;
}

.m-pdfbook__arrow--prev::before {
	transform: translateX(20%) rotate(45deg);
}

.m-pdfbook__arrow--next::before {
	transform: translateX(-20%) rotate(-135deg);
}

.m-pdfbook__count {
	min-width: 5rem;
	text-align: center;
	font: 500 .75rem/1 var(--m-sans);
	letter-spacing: .2em;
	color: var(--m-label);
	font-variant-numeric: tabular-nums;
}


/* The concept column now has more to say: its section heads are set in the
   site's tracked capitals, its lists in the body's measure. */
.m-lbk__body h2,
.m-lbk__body h3 {
	margin: 2.5rem 0 1rem;
	font: 500 .8125rem/1.3 var(--m-sans);
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--m-ink);
}

.m-lbk__body ul {
	margin: 0 0 1.25rem;
	padding-left: 1.1rem;
	font: 400 1.25rem/1.8 var(--m-sans);
	color: var(--m-body);
}

/* A vertical book pasted in from a flipbook service, such as Heyzine: shaped
   for two portrait pages side by side, and for one page on a phone. */
.m-lbk__flipbook--vertical {
	width: min(100%, calc(85vh * 1.414));
	aspect-ratio: 1414 / 1000;
}

@media (max-width: 767px) {
	.m-lbk__flipbook--vertical {
		width: min(100%, calc(80vh * 5 / 7));
		aspect-ratio: 5 / 7;
		max-height: 80vh;
	}
}


/* ---------- 53 · A lookbook's longer sections, the full width ---------------
   Everything after the More block in a lookbook's text runs the full width
   under the cover and concept: the inspiration as a pulled-out line beside
   its paragraphs, on the same 5:6 split as the cover and concept above; the
   pieces in the book as a numbered reading list, no table; a closing line in
   the display serif.
   Group blocks carry the class names (m-lbk-inspire, m-lbk-pieces,
   m-lbk-signoff), so it is all still written and edited in the editor. A
   classic theme wraps a group's contents in an inner container, so the
   layouts are set on whichever of the two holds the blocks.
   ------------------------------------------------------------------------- */

.m-lbk__more.m-entry {
	max-width: none;
	margin: 0;
	padding: 0;
}

.m-lbk__more h2 {
	margin: 0;
	font: 500 .8125rem/1.3 var(--m-sans);
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--m-ink);
}

/* --- Inspiration ----------------------------------------------------------- */

.m-lbk-inspire {
	margin-top: 3.5rem;
	padding-top: 2.5rem;
	border-top: 1px solid var(--m-hairline);
}

.m-lbk-inspire:not(:has(> .wp-block-group__inner-container)),
.m-lbk-inspire > .wp-block-group__inner-container {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	gap: 1.5rem 6rem;
	align-items: start;
}

.m-lbk-inspire h2 {
	grid-column: 1 / -1;
	margin-bottom: .25rem;
}

.m-lbk-inspire .wp-block-quote {
	grid-column: 1;
	grid-row: 2 / span 4;
	margin: 0;
	padding: 0;
	border: 0;
}

.m-lbk-inspire .wp-block-quote p {
	margin: 0;
	font: 300 2.375rem/1.25 var(--m-display);
	color: var(--m-ink);
}

.m-lbk-inspire > p,
.m-lbk-inspire > .wp-block-group__inner-container > p {
	grid-column: 2;
	max-width: 38rem;
	margin: 0;
	font: 400 1.25rem/1.8 var(--m-sans);
	color: var(--m-body);
}

.m-lbk-inspire .m-lbk-motto {
	margin-top: .75rem;
	font: 500 .75rem/1.7 var(--m-sans);
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--m-ink);
}

/* --- The pieces in the book ------------------------------------------------ */

.m-lbk-pieces {
	margin-top: 6rem;
	padding-top: 4rem;
	border-top: 1px solid var(--m-hairline);
}

.m-lbk-pieces h2 {
	margin-bottom: 3rem;
}

/* A reading list rather than a table — no boxes, no rules between pieces —
   in two columns on the same 5:6 split as the sections above. Each piece is
   its number and sign, its name set large under them, and the sign's traits
   beneath that. */
.m-lbk-pieces ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	gap: 3rem 6rem;
	counter-reset: piece;
}

.m-lbk-pieces li {
	counter-increment: piece;
	margin: 0;
	font: 300 1.75rem/1.25 var(--m-sans);
	color: var(--m-ink);
}

.m-lbk-pieces li::before {
	content: counter(piece, decimal-leading-zero);
	margin-right: 1.25rem;
	font: 500 .75rem/1 var(--m-sans);
	letter-spacing: .22em;
	color: var(--m-label);
	font-variant-numeric: tabular-nums;
	vertical-align: middle;
}

.m-lbk-pieces li strong {
	font: 500 .75rem/1 var(--m-sans);
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--m-ink);
	vertical-align: middle;
}

.m-lbk-pieces li a {
	display: block;
	width: fit-content;
	margin-top: .875rem;
	color: inherit;
	text-decoration: none;
	background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
	transition: background-size .4s var(--m-ease);
}

.m-lbk-pieces li a:hover,
.m-lbk-pieces li a:focus-visible {
	background-size: 100% 1px;
}

.m-lbk-pieces li em {
	display: block;
	margin-top: .625rem;
	font: 400 1rem/1.5 var(--m-sans);
	font-style: normal;
	color: var(--m-label);
}

/* --- Closing line ---------------------------------------------------------- */

.m-lbk__more .m-lbk-signoff {
	margin: 3.5rem auto 0;
	max-width: 40rem;
	text-align: center;
	font: 300 2rem/1.3 var(--m-display);
	color: var(--m-ink);
}

@media (max-width: 1023px) {
	.m-lbk-inspire:not(:has(> .wp-block-group__inner-container)),
	.m-lbk-inspire > .wp-block-group__inner-container {
		grid-template-columns: minmax(0, 1fr);
		gap: 1.25rem;
	}

	.m-lbk-inspire .wp-block-quote {
		grid-row: auto;
		margin-bottom: 1rem;
	}

	.m-lbk-inspire > p,
	.m-lbk-inspire > .wp-block-group__inner-container > p {
		grid-column: 1;
	}

	.m-lbk-pieces ul {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 2.5rem 2rem;
	}
}

@media (max-width: 599px) {
	.m-lbk-inspire {
		margin-top: 3rem;
		padding-top: 2rem;
	}

	.m-lbk-inspire .wp-block-quote p {
		font-size: 1.75rem;
	}

	.m-lbk-pieces {
		margin-top: 4rem;
		padding-top: 3rem;
	}

	.m-lbk-pieces ul {
		grid-template-columns: minmax(0, 1fr);
		gap: 2rem;
	}

	.m-lbk-pieces li {
		font-size: 1.375rem;
	}

	.m-lbk-pieces li em {
		font-size: .875rem;
	}

	.m-lbk__more .m-lbk-signoff {
		margin-top: 2.5rem;
		font-size: 1.5rem;
	}
}

/* After the closing line the contact block needs less of a run-up. */
.m-lbk__more + .m-lbk__contact {
	margin-top: 4rem;
}

@media (max-width: 767px) {
	.m-lbk__more + .m-lbk__contact {
		margin-top: 3rem;
	}
}

/* Preview jumps here; land the book below the sticky header, not under it. */
#m-lookbook-flipbook {
	scroll-margin-top: calc(var(--m-header-h, 6rem) + 1.5rem);
}

/* ---------- 54 · Footer, redrawn --------------------------------------------
   To the owner's design study: the letter on a cream band, then a dark panel
   carrying the lockup, three columns of links, and the sprig with the motto
   behind a hairline; the copyright and the ship-to selector close it.

   The footer is set in DM Sans, but for the wordmark and the line under
   it, which keep Jost.
   The footer keeps its own small palette rather than the site's dark tokens,
   because this is the one warm, low-lit surface on the site. Below 1024px the
   columns fold into accordions, as they did before (mitesh.js).
   ------------------------------------------------------------------------- */

.m-ft {
	--ft-cream: #dcdcdc;
	--ft-cream-ink: #1a1a1a;
	--ft-cream-body: #555555;
	--ft-cream-rule: #a8a8a8;
	--ft-dark: #121212;
	--ft-gold: #e9e9e9;
	--ft-gold-soft: #9c9c9c;
	--ft-light: #ffffff;
	--ft-link: #cfcfcf;
	--ft-line: #333333;

	background: var(--ft-dark);
	color: var(--ft-gold);
	font-family: var(--m-text-sans);
}

/* --- The letter ------------------------------------------------------------ */

/* --- Stay in touch: the sign-up in the right-hand column ---------------- */

.m-ft__touchCopy {
	max-width: 19rem;
	margin: 0;
	font: 300 1.0625rem/1.65 var(--m-text-sans);
	color: var(--ft-gold-soft);
}

.m-ft__sub {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-top: 2.25rem;
	border-bottom: 1px solid #5a5a5a;
	transition: border-color .3s;
}

.m-ft__sub:focus-within {
	border-bottom-color: var(--ft-light);
}

.m-ft__sub input {
	flex: 1;
	min-width: 0;
	padding: .75rem 0;
	border: 0;
	background: none;
	color: var(--ft-light);
	font: 300 1.0625rem/1.4 var(--m-text-sans);
	outline: 0;
}

.m-ft__sub input::placeholder {
	color: #8a8a8a;
}

.m-ft__sub button {
	flex: none;
	display: inline-flex;
	padding: .75rem 0 .75rem .5rem;
	border: 0;
	background: none;
	color: var(--ft-light);
	cursor: pointer;
	transition: transform .3s;
}

.m-ft__sub button svg {
	width: 1.75rem;
	height: auto;
}

.m-ft__sub button:hover {
	transform: translateX(.25rem);
}

.m-ft__msg {
	margin: .875rem 0 0;
	font: 400 .9375rem/1.5 var(--m-text-sans);
	color: var(--ft-link);
}

/* --- The dark panel -------------------------------------------------------- */

.m-ft__body {
	position: relative;
	overflow: hidden;
}

/* A whisper of grain, so the dark reads as cloth rather than paint. */
.m-ft__body::before {
	content: '';
	position: absolute;
	inset: 0;
	opacity: .05;
	pointer-events: none;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
}

.m-ft__inner {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) repeat(3, minmax(0, .6fr)) minmax(0, 1fr);
	align-items: start;
	padding: 7rem var(--m-gutter) 0;
}

/* The two hairlines that bracket the columns. */
.m-ft__brand {
	align-self: stretch;
	padding-right: 3rem;
	border-right: 1px solid var(--ft-line);
}

/* Every column carries the same inset, so the three start at equal intervals. */
.m-ft__inner > .m-ft__col {
	padding-left: 5rem;
}

/* The drawn lockup, standing in for the wordmark + deva text lines. */
.m-ft__lockup {
	display: block;
	width: 100%;
	max-width: 19rem;
	height: auto;
}

.m-ft__wordmark {
	margin: 0;
	font: 300 2.5rem/1 var(--m-sans);
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--ft-light);
}

.m-ft__deva {
	margin: 0.7812rem 0 0;
	font: 400 1.7188rem/1.3 var(--m-deva);
	color: var(--ft-gold);
}

/* Set apart in a neutral gray, ahead of the Devanagari word. */
.m-ft__devaTag {
	font-family: var(--m-text-sans);
	font-size: 1.5rem;
	letter-spacing: .02em;
	text-transform: lowercase;
	color: #8c8c8c;
}

.m-ft__note {
	margin: 2.1875rem 0 0;
	font: 400 1.09375rem/1.75 var(--m-sans);
	color: var(--ft-gold-soft);
}

.m-ft__social {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 2.75rem;
	margin: 0;
	padding: 0;
}

.m-ft__social a {
	display: inline-block;
	padding-bottom: 0.3125rem;
	border-bottom: 1px solid transparent;
	font: 300 1.328125rem/1 var(--m-text-sans);
	color: var(--ft-light);
	transition: border-color .3s;
}

.m-ft__social a:hover {
	border-bottom-color: var(--ft-gold);
}

/* Icon links: the glyph is the target, no underline rule. */
.m-ft__social .m-ft__icon {
	display: inline-flex;
	padding: 0;
	border: 0;
	transition: color .3s;
}

.m-ft__social .m-ft__icon svg {
	width: 1.5rem;
	height: 1.5rem;
}

.m-ft__social .m-ft__icon:hover {
	color: var(--ft-gold);
}

/* --- The columns ----------------------------------------------------------- */

.m-ft__col {
	min-width: 0;
}

summary.m-ft__head,
.m-ft__head--touch {
	display: block;
	margin: 0 0 2rem;
	font: 500 1rem/1 var(--m-text-sans);
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--ft-light);
	list-style: none;
	cursor: default;
}

summary.m-ft__head::after {
	content: '';
	display: block;
	width: 2.75rem;
	height: 1px;
	margin-top: 1.25rem;
	background: #6a6a6a;
}

summary.m-ft__head::-webkit-details-marker {
	display: none;
}

summary.m-ft__head::marker {
	content: '';
}

.m-ft__chev {
	display: none;
}

.m-ft__col .m-linklist {
	display: grid;
	gap: 1.1rem;
	font: 300 1.125rem/1.4 var(--m-text-sans);
	color: var(--ft-link);
}

.m-ft__col .m-linklist a {
	color: inherit;
	transition: color .3s;
}

.m-ft__col .m-linklist a:hover {
	color: var(--ft-light);
}

/* --- Stay in touch column ------------------------------------------------- */

.m-ft__touch {
	align-self: stretch;
	padding-left: 4.5rem;
	border-left: 1px solid var(--ft-line);
}

.m-ft__touch .m-ft__social {
	margin: 2.75rem 0 0;
}

/* --- The bottom bar -------------------------------------------------------- */

.m-ft__bar span {
	white-space: nowrap;
}

/*
 * Sits in the gap above the bottom bar's divider. Its own margins, plus the
 * bar's own reduced margin-top, plus this line's own text-row height net out
 * to the original 3.75rem gap, so adding it doesn't push the divider — and
 * the footer's total height — any lower.
 */
.m-ft__tagline {
	margin: 4.5rem var(--m-gutter) 0;
	text-align: center;
	font: 500 0.8594rem/1 var(--m-text-sans);
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--ft-gold-soft);
}

.m-ft__bar {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.875rem;
	margin: 2.75rem var(--m-gutter) 0;
	padding: 2rem 0 3rem;
	border-top: 1px solid var(--ft-line);
	font: 400 1.0156rem/1 var(--m-text-sans);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ft-gold-soft);
}

.m-ft__bar .m-ship {
	gap: 0.7812rem;
	width: auto;
	justify-content: flex-end;
}

.m-ft__bar .m-ship__label {
	font: 500 0.8594rem/1 var(--m-text-sans);
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--ft-gold-soft);
}

/* The select takes its width from the country chosen, not from the longest
   in the list, so the bar stays one line on a phone. */
.m-ft__bar .m-ship__select {
	padding: 0;
	field-sizing: content;
	max-width: 9rem;
	min-width: 0;
	text-overflow: ellipsis;
	border: 0;
	background: none;
	color: var(--ft-link);
	font: 400 1.0938rem/1 var(--m-text-sans);
	letter-spacing: .12em;
	text-transform: uppercase;
	cursor: pointer;
}

.m-ft__bar .m-ship__select option {
	text-transform: uppercase;
}

/* --- Tablet and phone ------------------------------------------------------ */

@media (max-width: 1023px) {
	/*
	 * To the owner's reference: the lockup, the vintage line baked into it,
	 * the note, the accordions, then the social row — each block centred on
	 * its own axis. .m-ft__brand's children (the lockup, the note, the
	 * social list) are pulled out of its box with `display: contents` so
	 * they can be ordered as siblings of the accordions rather than stuck
	 * together ahead of them.
	 */
	.m-ft__inner {
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: 0;
		padding-top: 2.5rem;
	}

	.m-ft__brand {
		display: contents;
	}

	/* Smaller on a phone, with room before the first accordion. */
	.m-ft__lockup {
		order: 1;
		width: min(60%, 13rem);
		margin: .5rem auto 2.5rem;
	}

	.m-ft__note {
		order: 2;
		margin: 20px 0;
		font-size: 1.02rem;
		line-height: 1.6;
	}

	.m-ft__brand {
		padding: 0;
		border: 0;
	}

	.m-ft__inner > .m-ft__col {
		padding-left: 0;
	}

	summary.m-ft__head::after {
		display: none;
	}

	/* Icons centred, then the sign-up full width under the accordions. */
	.m-ft__touch {
		order: 4;
		width: 100%;
		padding: 2.25rem 0 0;
		border: 0;
		text-align: left;
	}

	.m-ft__touch .m-ft__social {
		justify-content: center;
		margin-top: 2.25rem;
	}

	.m-ft__head--touch {
		font-size: .875rem;
	}

	.m-ft__touchCopy {
		max-width: none;
	}

	/* The link columns: no headings, nothing folds. */
	.m-ft__col {
		order: 3;
		text-align: left;
	}

	summary.m-ft__head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 1rem;
		min-height: 2.75rem;
		margin: 0;
		padding: 1.25rem 0;
		font-size: 0.75rem;
		color: var(--ft-light);
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
	}

	.m-ft__chev {
		display: block;
		flex: none;
		width: .5rem;
		height: .5rem;
		margin-right: .25rem;
		border-right: 1px solid currentColor;
		border-bottom: 1px solid currentColor;
		transform: translateY(-25%) rotate(45deg);
	}


	/* The turn is switched on only once the script has closed the groups. */
	.m-ft__inner.is-ready .m-ft__chev {
		transition: transform .3s var(--m-ease);
	}

	.m-ft__col .m-linklist {
		padding-bottom: 1.25rem;
	}

	/* One line on a phone too: copyright left, ship-to right. */
	.m-ft__bar {
		gap: 1rem;
		margin-top: 20px;
	}

	.m-ft__bar .m-ship {
		flex: none;
		width: auto;
	}

	.m-ft__tagline {
		font-size: 0.625rem;
		letter-spacing: .16em;
	}
}

/* On a phone the bar has 342px to hold both halves, so its type steps down
   rather than the line breaking in two. */
@media (max-width: 767px) {
	.m-ft__bar {
		font-size: .6875rem;
		letter-spacing: .1em;
	}

	.m-ft__bar .m-ship {
		gap: .5rem;
	}

	.m-ft__bar .m-ship__label {
		font-size: .625rem;
		letter-spacing: .14em;
	}

	.m-ft__bar .m-ship__select {
		max-width: 7rem;
		min-height: 0;
		font-size: .75rem;
		letter-spacing: .08em;
	}
}

/* --- Tablet: two halves ----------------------------------------------------
   To the owner's tablet reference. The lockup and note sit left with the
   karigar drawing opposite; the link groups run down the left beside the
   social links and the ship-to selector, behind a hairline; the copyright
   and the motto share the last row. The ship-to and the motto live in other
   containers in the markup, so on a tablet the body becomes one grid and
   the wrappers between are dissolved with `display: contents` — nothing
   moves in footer.php, and phone and desktop are untouched.
   ------------------------------------------------------------------------- */

@media (min-width: 768px) and (max-width: 1023px) {
	.m-ft__body {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		grid-template-areas:
			"lockup touch"
			"note   touch"
			"shop   touch"
			"about  touch"
			"help   ship"
			"rule   rule"
			"copy   tag";
		column-gap: 2.5rem;
		padding: 2.5rem var(--m-gutter) 1.25rem;
	}

	.m-ft__inner,
	.m-ft__brand,
	.m-ft__bar {
		display: contents;
	}

	/* The lockup, with the note centred under it. */
	.m-ft__lockup {
		grid-area: lockup;
		justify-self: start;
		width: 15rem;
		max-width: 100%;
		margin: 0;
	}

	.m-ft__note {
		grid-area: note;
		justify-self: start;
		width: 15rem;
		max-width: 100%;
		margin: .5rem 0 1.75rem;
		font-size: .9375rem;
		line-height: 1.55;
		text-align: center;
	}

	.m-ft__touch {
		grid-area: touch;
		padding: .625rem 0 1.5rem 2.5rem;
		border-left: 1px solid var(--ft-line);
	}

	.m-ft__touch .m-ft__social {
		justify-content: flex-start;
	}

	/* The three link lists stack down the left half. */
	.m-ft__col--shop {
		grid-area: shop;
	}

	.m-ft__col--about {
		grid-area: about;
	}

	.m-ft__col--help {
		grid-area: help;
	}

	.m-ft__col .m-linklist {
		padding: 0 0 1.5rem;
	}

	summary.m-ft__head {
		min-height: 2.75rem;
		padding: .625rem 0;
		font-size: 1rem;
		font-weight: 400;
		letter-spacing: 0;
		text-transform: capitalize;
	}

	.m-ft__chev {
		transform: rotate(-45deg);
	}


	.m-ft__bar .m-ship {
		grid-area: ship;
		justify-content: flex-end;
		gap: .75rem;
		width: auto;
		padding-left: 2.5rem;
		border-left: 1px solid var(--ft-line);
		font-size: .8125rem;
	}

	.m-ft__bar .m-ship__select {
		min-height: 0;
	}

	/* The last row: a rule across, the copyright left, the motto right. */
	.m-ft__body::after {
		content: '';
		grid-area: rule;
		height: 1px;
		margin-top: 1.5rem;
		background: var(--ft-line);
	}

	.m-ft__bar > span {
		grid-area: copy;
		align-self: center;
		padding-top: 1.125rem;
		font-size: .8125rem;
	}

	.m-ft__tagline {
		grid-area: tag;
		align-self: center;
		margin: 0;
		padding-top: 1.125rem;
		font-size: .8125rem;
		letter-spacing: .14em;
		text-align: right;
	}
}

/* ---------- 55 · Tablet header: the desktop category bar ---------------------
   Tablets take the desktop menu — the categories spelled out, each dropping
   its card — rather than the burger and the phone drawer (§40 and §49 now
   start at 768px). Five tracked categories do not fit beside a centred
   wordmark at this width, so the header takes two rows: the wordmark and the
   utilities, then the bar centred beneath. Only where the bar has rendered;
   with it switched off the burger row is left as it was.
   ------------------------------------------------------------------------- */

@media (min-width: 768px) and (max-width: 1023px) {
	/* The two-row header that sat here is gone: tablets take the phone's
	   burger header now (the navbar shows from 1024px). */

	/* A card with more than two groups deals them two across, so All
	   collections stays inside a 768px screen instead of running off it. */
	.m-navpanel__cols:has(> .m-navpanel__group:nth-child(3)) {
		grid-auto-flow: row;
		grid-template-columns: repeat(2, minmax(12rem, max-content));
		gap: 1.75rem 2.5rem;
	}
}

/* ==========================================================================
   Rounded media, contained bands (v1.9)
   Every photograph sits in a 12px-cornered frame. Below the hero, which stays
   edge to edge, nothing on the homepage runs to the screen's edge: the
   featured piece, the making-of pair and the two cloth crops sit inside the
   page gutters like the rest of the content.
   ========================================================================== */

:root {
	--m-radius: 12px;
	--m-radius-sm: 8px;
}

/* --- Frames that hold an image -------------------------------------------- */

.m-tile,
.m-band,
.m-making,
.m-collrow__img,
.m-lbk__img,
.m-lbkx__img,
.m-lbkx__card,
.woocommerce-product-gallery__image,
.m-pagehead img,
.m-article__hero img,
.m-article figure img,
.entry-content .wp-block-image img,
.entry-content figure img,
.m-sg__garment img {
	border-radius: var(--m-radius);
	overflow: hidden;
}

/* Small thumbnails: the same idea, scaled to their size. */
.m-cart__thumb,
.m-cart__thumb img,
.m-sr__thumb,
.m-cartpage .wc-block-cart-item__image img,
.wc-block-components-order-summary-item__image img {
	border-radius: var(--m-radius-sm);
	overflow: hidden;
}

/* The hero is the one full-bleed image left; it keeps square edges. */
.m-hero,
.m-hero .m-tile {
	border-radius: 0;
}

/* --- Homepage: bands pulled inside the gutters ------------------------------ */

.m-featured .m-band,
.m-making {
	margin-left: var(--m-gutter);
	margin-right: var(--m-gutter);
}

.m-making {
	margin-top: 5rem;
	margin-bottom: 5rem;
}

.m-cloth {
	display: grid;
	gap: 0;
	padding-left: var(--m-gutter);
	padding-right: var(--m-gutter);
}

@media (max-width: 1023px) {
	.m-making {
		margin-top: 3rem;
		margin-bottom: 3rem;
	}
}

/* ==========================================================================
   Homepage system (v2.0)
   One page, one set of rules, from the announcement bar to the footer's
   last line:
     margin   40px each side (24 tablet, 16 phone), shared by header,
              sections and footer so every edge lines up down the page
     grid     12 columns, 24px gutter: four-up = 3 columns each,
              three-up = 4 each; outer edges always meet the margin
     rhythm   120px between sections (88 tablet, 64 phone);
              40px from a title to what it introduces
     type     Jost only, four voices —
                label  12px / 500 / .16em / capitals  (nav, buttons, credits,
                       footer headings, motto, bar)
                body   14px / 400                    (names, prices, links)
                title  28px / 400 / .12em / capitals  (section titles)
                quote  24px / 300 italic             (press)
     shape    images 2:3, 12px corners; no rules except the footer's own
   ========================================================================== */

body.home {
	--m-gutter: 40px;
	--h-gap: 24px;
	--h-space: 120px;
	--h-title-gap: 40px;
	--h-label: 500 12px/1.4 var(--m-sans);
	--h-body: 400 14px/1.5 var(--m-sans);
}

/* The header keeps the theme's own margin and styling. */
body.home .m-header {
	--m-gutter: 4rem;
}

@media (max-width: 1023px) {
	body.home .m-header {
		--m-gutter: 1.5rem;
	}
}

/* --- Voices ----------------------------------------------------------------- */

body.home .m-hero__cta,
body.home .m-press__meta,
body.home .m-ft__head,
body.home summary.m-ft__head,
body.home .m-ft__tagline,
body.home .m-ft__bar,
body.home .m-ft__bar .m-ship__label,
body.home .m-ft__bar .m-ship__select {
	font: var(--h-label);
	letter-spacing: .16em;
	text-transform: uppercase;
}

body.home .m-rail__name,
body.home .m-tilecard__name,
body.home .m-tilecard__price,
body.home .m-diary__name,
body.home .m-ft__touchCopy,
body.home .m-ft__sub input {
	font: var(--h-body);
	letter-spacing: 0;
	text-transform: none;
}

/* Always smaller than the header wordmark (1.45rem, 1rem below 1024px). */
body.home .m-h2 {
	font: 400 1.15rem/1.2 var(--m-sans);
	letter-spacing: .12em;
	text-transform: uppercase;
}

/* --- Hero ------------------------------------------------------------------- */

body.home .m-hero__cta {
	padding: 14px 24px;
	border: 0;
	border-radius: var(--m-radius-sm);
	background: rgba(255, 255, 255, .94);
	color: var(--m-ink);
	transition: background-color .3s;
}

body.home .m-hero__cta:hover {
	background: #fff;
}

/* --- Sections: margin, rhythm, titles -------------------------------------- */

body.home .m-collections,
body.home .m-new,
body.home .m-plates,
body.home .m-diaries,
body.home .m-press {
	margin: var(--h-space) 0 0;
	padding: 0 var(--m-gutter);
}

body.home .m-press {
	padding-bottom: var(--h-space);
}

body.home .m-sechead {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 0 0 var(--h-title-gap);
	padding: 0;
	border: 0;
	text-align: center;
}

/* --- Grids: four-up and three-up on the same 24px gutter -------------------- */

body.home .m-collections .m-rail,
body.home .m-newgrid,
body.home .m-plates__grid,
body.home .m-diaries__grid {
	display: grid;
	gap: var(--h-gap);
	align-items: start;
	margin: 0;
	padding: 0;
	overflow: visible;
	cursor: default;
}

body.home .m-collections .m-rail,
body.home .m-newgrid {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

body.home .m-plates__grid,
body.home .m-diaries__grid {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

body.home .m-collections .m-rail__item,
body.home .m-plates__grid > *,
body.home .m-diaries__grid > * {
	width: auto;
	margin: 0;
	padding: 0;
}

/* Every photograph: the same 2:3 frame. */
body.home .m-collections .m-tile,
body.home .m-newgrid .m-tile,
body.home .m-plates__grid .m-tile,
body.home .m-diaries__grid .m-tile {
	width: 100%;
	height: auto;
	aspect-ratio: 2 / 3;
}

/* Card text: one line under the photograph, 12px below it. */
body.home .m-rail__meta,
body.home .m-tilecard__meta {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	margin-top: 12px;
	padding: 0;
}

body.home .m-tilecard__price {
	color: var(--m-label);
}

body.home .m-diary__name {
	padding-top: 12px;
	text-align: left;
	text-transform: capitalize;
}

/* --- Press ------------------------------------------------------------------ */

body.home .m-press__quote {
	max-width: 760px;
	margin: 0 auto;
	font: italic 300 24px/1.5 var(--m-sans);
}

body.home .m-press__meta {
	margin-top: 24px;
	gap: 12px;
	color: var(--m-label);
}

body.home .m-press__meta strong {
	font-weight: 500;
	color: var(--m-ink);
}

body.home .m-press__dash {
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--m-label);
}

body.home .m-press__dots {
	margin-top: 32px;
}

body.home .m-press__dot {
	width: 20px;
	background: radial-gradient(circle, #cfcfcf 0 3px, transparent 3.5px) center / 100% 100% no-repeat;
}

body.home .m-press__dot.is-active {
	background-image: radial-gradient(circle, var(--m-ink) 0 3px, transparent 3.5px);
}

/* --- Footer: same margin and voices as the page above ----------------------- */

body.home .m-ft,
body.home .m-ft * {
	font-family: var(--m-sans);
}

body.home .m-ft__inner {
	padding: var(--h-space) var(--m-gutter) 0;
}

body.home .m-ft__tagline {
	margin: 72px var(--m-gutter) 0;
}

body.home .m-ft__bar {
	margin: 32px var(--m-gutter) 0;
	padding: 24px 0 32px;
}

body.home .m-ft__col .m-linklist {
	gap: 14px;
}

/* --- Tablet ----------------------------------------------------------------- */

@media (max-width: 1023px) {
	body.home {
		--m-gutter: 24px;
		--h-space: 88px;
		--h-title-gap: 32px;
	}

	body.home .m-ft__inner {
		padding-top: 64px;
	}

	body.home .m-h2 {
		font-size: .8125rem;
	}
}

/* --- Phone ------------------------------------------------------------------ */

@media (max-width: 767px) {
	body.home {
		--m-gutter: 16px;
		--h-gap: 12px;
		--h-space: 64px;
		--h-title-gap: 24px;
	}

	body.home .m-h2 {
		font-size: .8125rem;
	}

	body.home .m-collections .m-rail,
	body.home .m-newgrid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		row-gap: 24px;
	}

	body.home .m-plates__grid,
	body.home .m-diaries__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		row-gap: 24px;
	}

	/* Three across a phone: the first leads full width, two pair beneath. */
	body.home .m-plates__grid > :first-child,
	body.home .m-diaries__grid > :first-child {
		grid-column: 1 / -1;
	}

	body.home .m-plates__grid > :first-child .m-tile,
	body.home .m-diaries__grid > :first-child .m-tile {
		aspect-ratio: 4 / 5;
	}

	body.home .m-press__quote {
		font-size: 18px;
	}

	body.home .m-ft__inner {
		padding-top: 48px;
	}
}

/* ==========================================================================
   Footer link columns without headings (v2.0)
   Shop, about and help lose their titles; the links stand on their own
   in the footer's body voice — 14px, normal case — at every width.
   ========================================================================== */

.m-ft__col .m-linklist {
	gap: 14px;
	font: 400 14px/1.4 var(--m-sans);
	letter-spacing: 0;
	text-transform: none;
}

/* Desktop: the lists start level with the top of the logo and the sign-up. */
@media (min-width: 1024px) {
	.m-ft__col {
		padding-top: .375rem;
	}
}

/* Phone: the three lists side by side under the logo, the sign-up beneath. */
@media (max-width: 767px) {
	.m-ft__inner {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		column-gap: 12px;
		align-items: start;
	}

	.m-ft__lockup,
	.m-ft__touch {
		grid-column: 1 / -1;
	}

	.m-ft__lockup {
		justify-self: center;
	}

	.m-ft__col .m-linklist {
		gap: 12px;
		padding: 0;
	}
}

/* ==========================================================================
   Footer, continuing the page (v2.0)
   No dark panel: the footer sits on the page's own white, separated from the
   last section by space alone, and speaks with the header's voices. It uses
   the page's 12-column grid so its edges meet the cards above: the logo over
   columns 1–3, the three link lists from column 4 (under the second card),
   the sign-up from column 10 (under the fourth).
   ========================================================================== */

.m-ft {
	--ft-dark: var(--m-ground, #fff);
	--ft-light: var(--m-ink, #000);
	--ft-gold: var(--m-ink, #000);
	--ft-link: var(--m-ink, #000);
	--ft-gold-soft: var(--m-label, #808080);
	--ft-line: #e8e8e8;
	background: var(--ft-dark);
	color: var(--ft-light);
}

/* No grain: it belonged to the dark cloth. */
.m-ft__body::before {
	display: none;
}

/* The drawn lockup is white on transparent; on the page it is ink. */
.m-ft__lockup {
	filter: invert(1);
}

.m-ft__col .m-linklist a:hover,
.m-ft__social .m-ft__icon:hover {
	color: var(--m-label, #808080);
}

/* Sign-up field: a soft filled box instead of a rule. */
.m-ft__sub {
	padding: 0 12px 0 16px;
	border-bottom: 0;
	border-radius: var(--m-radius-sm, 8px);
	background: #f3f3f3;
}

.m-ft__sub input {
	color: var(--m-ink, #000);
}

.m-ft__sub input::placeholder {
	color: var(--m-label, #808080);
}

.m-ft__sub button {
	color: var(--m-ink, #000);
}

.m-ft__head--touch {
	color: var(--m-ink, #000);
}

/* Motto and bar: label voice in grey, held apart by space, not rules. */
.m-ft__bar {
	border-top: 0;
	color: var(--m-label, #808080);
}

.m-ft__bar .m-ship__select {
	color: var(--m-ink, #000);
}

@media (min-width: 1024px) {
	.m-ft__inner {
		grid-template-columns: repeat(12, minmax(0, 1fr));
		column-gap: 24px;
	}

	.m-ft__brand {
		grid-column: 1 / 4;
		padding: 0;
		border: 0;
	}

	.m-ft__inner > .m-ft__col {
		padding: 0;
	}

	.m-ft__col--shop {
		grid-column: 4 / 6;
	}

	.m-ft__col--about {
		grid-column: 6 / 8;
	}

	.m-ft__col--help {
		grid-column: 8 / 10;
	}

	.m-ft__touch {
		grid-column: 10 / 13;
		padding: 0;
		border: 0;
	}

	.m-ft__lockup {
		max-width: 13rem;
	}
}

/* Tablet keeps its two halves, without the dividing rule. */
@media (min-width: 768px) and (max-width: 1023px) {
	.m-ft__touch,
	.m-ft__bar .m-ship {
		border-left: 0;
	}

	.m-ft__body::after {
		display: none;
	}
}

/* Site typeface: Chillax throughout, Jost behind it while it loads. */
:root,
body {
	--m-sans: 'Chillax', 'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--m-text-sans: 'Chillax', 'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--m-script: 'Chillax', 'Jost', sans-serif;
	font-family: var(--m-sans);
}

/* The brand name keeps its own typeface (Jost) whatever the page uses. */
.m-wordmark,
.m-wordmark *,
.m-ft__wordmark {
	font-family: 'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* ==========================================================================
   Palette from the homepage design study (Downloads/index.html), v2.1
   Warm paper, olive ink, a rust accent — replaces black on white.
     paper   #f5f2eb   page and header ground
     ink     #343729   text, buttons, active states
     muted   #706f62   secondary text
     line    #d7d2c5   hairlines
     rust    #93563f   hover, focus, small accents
     tints   #e4dfd4 image ground · #ece9e1 / #e9e5da soft panels
   Layout is untouched; only colour changes.
   ========================================================================== */

:root {
	--m-paper: #f5f2eb;
	--m-rust: #93563f;
	--m-panel: #ece9e1;
	--m-panel-2: #e9e5da;
	--m-image-ground: #e4dfd4;

	--m-ground: var(--m-paper);
	--m-ink: #343729;
	--m-body: #343729;
	--m-label: #706f62;
	--m-hairline: #d7d2c5;
	--m-hairline-soft: #d7d2c5;

	--m-dark: #343729;
	--m-dark-head: #f5f2eb;
	--m-dark-body: #c3c3b6;
	--m-dark-label: #909380;
	--m-dark-hairline: #535644;
	--m-dark-tile: #3f4233;
	--m-dark-link: #d4d1c1;

	--m-tint: var(--m-image-ground);
	--m-tint-ink: #989a83;
	--m-band: #909380;
	--m-band-ink: #e4dfd4;
	--m-field-ink: #989a83;
}

body {
	background: var(--m-paper);
	color: var(--m-ink);
}

::selection {
	background: #d7c5a9;
	color: var(--m-ink);
}

:focus-visible {
	outline: 2px solid var(--m-rust);
	outline-offset: 2px;
}

/* Every image frame waits on the same warm ground, whatever tint the
   template passed in. */
.m-tile,
.m-placeholder {
	background: var(--m-image-ground);
}

.m-entry pre,
.m-mega__railItem.is-current {
	background: var(--m-panel);
}

/* Footer field and press dots follow the palette. */
.m-ft__sub {
	background: var(--m-panel);
}

body.home .m-press__dot {
	background-image: radial-gradient(circle, var(--m-hairline) 0 3px, transparent 3.5px);
}

/* The rust accent: links warm to it on hover. */
.m-navbar__link:hover,
.m-nav__list a:hover,
.m-ft__col .m-linklist a:hover,
.m-ft__social .m-ft__icon:hover,
.m-tilecard__link:hover .m-tilecard__name,
.m-rail__item:hover .m-rail__name,
.m-link:hover,
.m-entry a:hover {
	color: var(--m-rust);
}

.m-navbar__link::after {
	background: var(--m-rust);
}

/* --------------------------------------------------------------------------
   Footer in the reference's dark olive (v2.1)
   ground #343729 · heads #f5f2eb · links #c3c3b6 → white on hover
   quiet text #909380 · field #3f4233 · logo back to its own white strokes
   -------------------------------------------------------------------------- */

.m-ft {
	--ft-dark: #343729;
	--ft-light: #f5f2eb;
	--ft-gold: #f5f2eb;
	--ft-link: #c3c3b6;
	--ft-gold-soft: #909380;
	--ft-line: #535644;
	background-color: #343729;
	color: #f5f2eb;
}

/* The drawn lockup is white already; on the dark ground it needs no inverting. */
.m-ft__lockup {
	filter: none;
}

.m-ft__col .m-linklist,
.m-ft__col .m-linklist a,
.m-ft__touchCopy {
	color: #c3c3b6;
}

.m-ft__col .m-linklist a:hover,
.m-ft__social .m-ft__icon:hover {
	color: #fff;
}

.m-ft__head--touch,
.m-ft__social .m-ft__icon {
	color: #f5f2eb;
}

.m-ft__sub {
	background: #3f4233;
}

.m-ft__sub input,
.m-ft__sub button {
	color: #f5f2eb;
}

.m-ft__sub input::placeholder {
	color: #909380;
}

.m-ft__tagline,
.m-ft__bar {
	color: #909380;
}

.m-ft__bar .m-ship__select {
	color: #f5f2eb;
}

.m-ft__bar .m-ship__select option {
	color: #343729;
}

/* Homepage: the last section keeps its own space before the dark ground. */
body.home .m-diaries {
	padding-bottom: var(--h-space);
}

body.home .m-ft__inner {
	padding-top: calc(var(--h-space) * .8);
}

/* ==========================================================================
   Homepage — closing statement (v2.1)
   From the design study, at its own measurements: 75px over, 80px under,
   a 35px rust sun 20px above two Cormorant lines (clamp 37–62px, 1.08
   leading, -.025em), the caption 25px below at 10px / .19em capitals.
   ========================================================================== */

@font-face {
	font-family: 'Cormorant';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/cormorant-regular.woff2') format('woff2');
}

@font-face {
	font-family: 'Cormorant';
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/cormorant-italic.woff2') format('woff2');
}

.m-manifesto {
	padding: 75px var(--m-gutter) 80px;
	text-align: center;
	color: var(--m-ink);
}

.m-manifesto > svg {
	display: block;
	width: 35px;
	height: 35px;
	margin: 0 auto 20px;
	color: var(--m-rust, #93563f);
}

.m-manifesto__title {
	max-width: 830px;
	margin: 0 auto;
	font: 400 clamp(37px, 4.2vw, 62px)/1.08 'Cormorant', Georgia, serif;
	letter-spacing: -.025em;
	text-transform: none;
}

.m-manifesto__title em {
	font-style: italic;
	font-weight: 400;
}

.m-manifesto__caption {
	margin: 25px 0 0;
	font: 500 10px/1.5 var(--m-sans);
	letter-spacing: .19em;
	text-transform: uppercase;
	color: var(--m-label);
}

/* The statement closes the page: the cards above keep the usual 120px
   to the sun, counting the statement's own 75px. */
body.home .m-diaries {
	padding-bottom: calc(var(--h-space) - 75px);
}

@media (max-width: 760px) {
	.m-manifesto {
		padding: 50px var(--m-gutter) 55px;
	}

	.m-manifesto__title {
		font-size: 38px;
	}

	.m-manifesto__caption {
		margin-top: 20px;
		font-size: 8px;
	}

	body.home .m-diaries {
		padding-bottom: calc(var(--h-space) - 50px);
	}
}

/* ==========================================================================
   Handcrafted in India — horizontal collage (v2.1)
   Five photographs on a 12 × 8 field held at 2 : 1, so every crop keeps its
   proportion at any width:
     a  cols 1–4,  rows 1–8   large portrait (2:3)
     b  cols 4–6,  rows 5–8   small, overlapping a's corner, framed in paper
     c  cols 7–9,  rows 1–5   portrait
     e  cols 7–9,  rows 6–8   landscape
     d  cols 10–12, rows 1–8  large portrait
   Soft 12px corners throughout.
   ========================================================================== */

.m-collage {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	grid-template-rows: repeat(8, minmax(0, 1fr));
	gap: 24px;
	aspect-ratio: 2 / 1;
}

.m-collage__item {
	position: relative;
	margin: 0;
	min-height: 0;
}

.m-collage__item .m-tile {
	width: 100%;
	height: 100%;
	aspect-ratio: auto;
	border-radius: var(--m-radius, 12px);
}

.m-collage__item .m-tile img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.m-collage__item--a { grid-column: 1 / 5;   grid-row: 1 / 9; }
.m-collage__item--c { grid-column: 7 / 10;  grid-row: 1 / 6; }
.m-collage__item--e { grid-column: 7 / 10;  grid-row: 6 / 9; }
.m-collage__item--d { grid-column: 10 / 13; grid-row: 1 / 9; }

/* The overlapping crop: on top of a, ringed in the page's paper. */
.m-collage__item--b {
	grid-column: 4 / 7;
	grid-row: 5 / 9;
	z-index: 1;
	margin: -9px;
}

.m-collage__item--b .m-tile {
	border: 9px solid var(--m-paper, #f5f2eb);
	border-radius: calc(var(--m-radius, 12px) + 9px);
}

.m-collage__caption {
	margin: 16px 0 0;
	font: 500 9px/1.5 var(--m-sans);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--m-label);
}

/* Phone: no overlap — one lead, then pairs. */
@media (max-width: 767px) {
	.m-collage {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-rows: none;
		gap: 12px;
		aspect-ratio: auto;
	}

	.m-collage__item--a,
	.m-collage__item--b,
	.m-collage__item--c,
	.m-collage__item--d,
	.m-collage__item--e {
		grid-column: auto;
		grid-row: auto;
		margin: 0;
	}

	.m-collage__item--a,
	.m-collage__item--d {
		grid-column: 1 / -1;
	}

	.m-collage__item--a .m-tile,
	.m-collage__item--d .m-tile {
		aspect-ratio: 4 / 5;
	}

	.m-collage__item--b .m-tile,
	.m-collage__item--c .m-tile,
	.m-collage__item--e .m-tile {
		aspect-ratio: 3 / 4;
		border: 0;
		border-radius: var(--m-radius, 12px);
	}

	.m-collage__item--e {
		grid-column: 1 / -1;
	}

	.m-collage__item--e .m-tile {
		aspect-ratio: 16 / 9;
	}
}

/* --- What each photograph shows (Customizer: Plate 0x — show) -------------- */

.m-collage__item .m-tile__inner {
	transition: none;
}

.m-focus--top .m-tile__inner          { object-position: 50% 8%; }
.m-focus--center .m-tile__inner       { object-position: 50% 50%; }
.m-focus--bottom .m-tile__inner       { object-position: 50% 92%; }

/* Close-ups: the same photograph enlarged about the chosen part. */
.m-focus--zoom-top .m-tile__inner,
.m-focus--zoom-center .m-tile__inner,
.m-focus--zoom-bottom .m-tile__inner {
	transform: scale(1.9);
}

.m-focus--zoom-top .m-tile__inner    { object-position: 50% 20%; transform-origin: 50% 20%; }
.m-focus--zoom-center .m-tile__inner { object-position: 50% 50%; transform-origin: 50% 50%; }
.m-focus--zoom-bottom .m-tile__inner { object-position: 50% 80%; transform-origin: 50% 80%; }

/* --------------------------------------------------------------------------
   Collage as a triptych (v2.1d)
   The full model stands in the centre at full height; the top's details
   stack on the left, the trousers' on the right — tall over short on one
   side, short over tall on the other, so the two flanks mirror loosely.
     a  centre        cols 5–8,  rows 1–8   full model (2:3)
     b  left, upper   cols 1–4,  rows 1–5
     c  left, lower   cols 1–4,  rows 6–8
     d  right, upper  cols 9–12, rows 1–3
     e  right, lower  cols 9–12, rows 4–8
   -------------------------------------------------------------------------- */

@media (min-width: 768px) {
	.m-collage__item--a { grid-column: 5 / 9;  grid-row: 1 / 9; }
	.m-collage__item--b { grid-column: 1 / 5;  grid-row: 1 / 6; z-index: auto; margin: 0; }
	.m-collage__item--c { grid-column: 1 / 5;  grid-row: 6 / 9; }
	.m-collage__item--d { grid-column: 9 / 13; grid-row: 1 / 4; }
	.m-collage__item--e { grid-column: 9 / 13; grid-row: 4 / 9; }

	/* No overlap here: the centre stands clear, so no paper ring is needed. */
	.m-collage__item--b .m-tile {
		border: 0;
		border-radius: var(--m-radius, 12px);
	}
}

/* Phone: the model first, full width; the details pair up beneath. */
@media (max-width: 767px) {
	.m-collage__item--a {
		grid-column: 1 / -1;
	}

	.m-collage__item--a .m-tile {
		aspect-ratio: 2 / 3;
	}

	.m-collage__item--b,
	.m-collage__item--c,
	.m-collage__item--d,
	.m-collage__item--e {
		grid-column: auto;
	}

	.m-collage__item--b .m-tile,
	.m-collage__item--c .m-tile,
	.m-collage__item--d .m-tile,
	.m-collage__item--e .m-tile {
		aspect-ratio: 1 / 1;
	}
}

/* Collage gaps, a touch tighter than the page grid. */
.m-collage {
	gap: 16px;
}

@media (max-width: 767px) {
	.m-collage {
		gap: 8px;
	}
}

/* --------------------------------------------------------------------------
   Collage as a staggered triptych (v2.1e)
   The model stands tall in the centre; the four close-ups are smaller and
   set at different heights with the page's paper around them, so they read
   as details rather than rival photographs. Outer details meet the page
   margin; inner ones step in. Percentages of a 2 : 1 field.
     a  model          34–66% across,  4–96% down
     b  top detail     0–24%,          20–62%
     c  top detail     10–26%,         68–94%
     d  trouser detail 74–90%,         6–32%
     e  trouser detail 76–100%,        38–80%
   -------------------------------------------------------------------------- */

@media (min-width: 768px) {
	.m-collage {
		position: relative;
		display: block;
		aspect-ratio: 2 / 1;
	}

	.m-collage__item {
		position: absolute;
		margin: 0;
	}

	.m-collage__item .m-tile {
		height: 100%;
		border: 0;
		border-radius: var(--m-radius, 12px);
	}

	.m-collage__item--a { left: 34%; top: 4%;  width: 32%; height: 92%; }
	.m-collage__item--b { left: 0;   top: 20%; width: 24%; height: 42%; }
	.m-collage__item--c { left: 10%; top: 68%; width: 16%; height: 26%; }
	.m-collage__item--d { left: 74%; top: 6%;  width: 16%; height: 26%; }
	.m-collage__item--e { left: 76%; top: 38%; width: 24%; height: 42%; }
}

/* ==========================================================================
   Homepage — the story (v2.2), after the design study's "story" section
   Two equal columns, 50–110px apart, centred on each other. Left: a 3:4
   photograph with 22% kept clear to its right and 46px under it, and a
   close-up 44% wide (3:4) set into that corner inside a 9px paper band.
   Right: rust label 10px / .19em, Cormorant heading 46–72px at -.035em,
   paragraph 14px / 1.95 in muted, an underlined link, and three numbered
   points over a hairline.
   ========================================================================== */

.m-story {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(50px, 7vw, 110px);
	align-items: center;
}

.m-story__images {
	position: relative;
	margin: 0;
	padding: 0 22% 46px 0;
}

.m-story__main .m-tile {
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 4;
	border-radius: var(--m-radius, 12px);
}

.m-story__detail {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 44%;
}

.m-story__detail .m-tile {
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 4;
	border: 9px solid var(--m-paper, #f5f2eb);
	border-radius: calc(var(--m-radius, 12px) + 9px);
}

.m-story__main .m-tile__inner,
.m-story__detail .m-tile__inner {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.m-story__caption {
	position: absolute;
	left: 0;
	bottom: 8px;
	font: 500 8px/1.5 var(--m-sans);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--m-label);
}

.m-story__eyebrow {
	margin: 0 0 22px;
	font: 500 10px/1.5 var(--m-sans);
	letter-spacing: .19em;
	text-transform: uppercase;
	color: var(--m-rust, #93563f);
}

.m-story__heading {
	max-width: 490px;
	margin: 0;
	font: 400 clamp(46px, 4.6vw, 72px)/1.04 'Cormorant', Georgia, serif;
	letter-spacing: -.035em;
	text-transform: none;
	color: var(--m-ink);
}

.m-story__heading em {
	font-style: italic;
	font-weight: 400;
}

.m-story__body {
	max-width: 440px;
	margin: 25px 0 29px;
	font: 400 14px/1.95 var(--m-sans);
	color: var(--m-label);
}

.m-story__link {
	display: inline-flex;
	align-items: center;
	gap: 26px;
	font: 500 11px/1.4 var(--m-sans);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--m-ink);
}

.m-story__link svg {
	width: 26px;
	height: 16px;
	transition: transform .3s var(--m-ease);
}

.m-story__link:hover svg {
	transform: translateX(5px);
}

.m-story__values {
	display: flex;
	gap: 25px;
	max-width: 440px;
	margin-top: 35px;
	padding-top: 24px;
	border-top: 1px solid var(--m-hairline);
}

.m-story__value {
	flex: 1;
}

.m-story__num {
	font: italic 400 30px/1 'Cormorant', Georgia, serif;
	color: var(--m-rust, #93563f);
}

.m-story__value p {
	margin: 10px 0 0;
	font: 400 13px/1.55 var(--m-sans);
	letter-spacing: .02em;
	color: var(--m-ink);
}

@media (max-width: 760px) {
	.m-story {
		grid-template-columns: 1fr;
		gap: 42px;
	}

	.m-story__images {
		max-width: 530px;
	}

	.m-story__heading {
		font-size: 52px;
	}

	.m-story__body {
		max-width: none;
		font-size: 13px;
	}

	.m-story__values {
		max-width: none;
		gap: 20px;
	}
}

@media (max-width: 420px) {
	.m-story__heading {
		font-size: 48px;
	}
}

/* Story: the link lives at the end of the paragraph. */
.m-story__more {
	margin-left: .25em;
	font-weight: 500;
	color: var(--m-ink);
	white-space: nowrap;
	transition: color .3s;
}

.m-story__more:hover {
	color: var(--m-rust, #93563f);
}

/* Story: the headline itself is the link. */
.m-story__heading a {
	color: inherit;
	transition: color .3s;
}

.m-story__heading a:hover {
	color: var(--m-rust, #93563f);
}

/* Lookbook: the inspiration quote and the closing line in Cormorant Garamond. */
.single-mitesh_lookbook .m-lbk-inspire .wp-block-quote,
.single-mitesh_lookbook .m-lbk-inspire .wp-block-quote p,
.single-mitesh_lookbook .m-lbk-signoff {
	font-family: 'Cormorant Garamond', 'Cormorant', Georgia, serif;
}

/* Lookbook listing: photographs keep square corners. (Contact now takes the
   soft corners, see "Contact page: soft corners".) */
body.m-page-lookbook {
	--m-radius: 0;
}

/* --------------------------------------------------------------------------
   Homepage rhythm, one value everywhere (v2.2)
   Every gap between sections is --h-space (120 / 88 / 64px), measured from
   the last thing you can see in one section to the first in the next:
     · the closing statement keeps the full space below it, not its own 80px;
     · the marquee's padded bar is counted, so its text sits the same
       distance from the first title as everything else does.
   -------------------------------------------------------------------------- */

body.home .m-manifesto {
	padding-bottom: var(--h-space);
}

body.home .m-marquee + .m-collections {
	margin-top: calc(var(--h-space) - 19px);
}

/* ==========================================================================
   Homepage — banner (v2.2)
   One wide photograph inside the margins, 21:9 (4:5 on a phone), 12px
   corners; an optional Cormorant headline and small link over its lower
   left, on a soft shade that only exists when there is text to carry.
   ========================================================================== */

body.home .m-banner {
	margin: var(--h-space) 0 0;
	padding: 0 var(--m-gutter);
}

.m-banner__frame {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 21 / 9;
	border-radius: var(--m-radius, 12px);
	background: var(--m-image-ground, #e4dfd4);
	color: #fff;
}

.m-banner picture,
.m-banner__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.m-banner__img {
	transition: transform 1.2s var(--m-ease);
}

a.m-banner__frame:hover .m-banner__img {
	transform: scale(1.02);
}

.m-banner__ph {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font: 500 10px/1 var(--m-sans);
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--m-tint-ink, #989a83);
}

.m-banner__copy {
	position: absolute;
	inset: auto 0 0 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
	padding: 120px 48px 44px;
	background: linear-gradient(transparent, rgba(30, 37, 20, .45));
}

.m-banner__title {
	max-width: 640px;
	font: 400 clamp(32px, 3.6vw, 56px)/1.05 'Cormorant', Georgia, serif;
	letter-spacing: -.02em;
}

.m-banner__cta {
	font: 500 11px/1.4 var(--m-sans);
	letter-spacing: .14em;
	text-transform: uppercase;
}

@media (max-width: 767px) {
	.m-banner__frame {
		aspect-ratio: 4 / 5;
	}

	.m-banner__copy {
		padding: 80px 20px 24px;
	}
}

/* --------------------------------------------------------------------------
   Banner as a carousel (v2.2b)
   Slides sit side by side in one track and slide across; the title and link
   are centred near the foot over a soft shade, the dots beneath them —
   round, the current one drawn out into a pill.
   -------------------------------------------------------------------------- */

.m-banner__track {
	display: flex;
	width: 100%;
	height: 100%;
	transition: transform .7s var(--m-ease);
	will-change: transform;
}

.m-banner__slide {
	position: relative;
	flex: 0 0 100%;
	height: 100%;
	color: #fff;
}

.m-banner__frame {
	touch-action: pan-y;
}

.m-banner__copy {
	inset: auto 0 0 0;
	align-items: center;
	gap: 10px;
	padding: 120px 24px 58px;
	text-align: center;
	background: linear-gradient(transparent, rgba(30, 37, 20, .42));
}

.m-banner__title {
	max-width: none;
	font: 600 22px/1.2 var(--m-sans);
	letter-spacing: .02em;
	text-transform: uppercase;
}

.m-banner__cta {
	font: 600 11px/1.4 var(--m-sans);
	letter-spacing: .08em;
	text-transform: uppercase;
}

.m-banner__dots {
	position: absolute;
	left: 50%;
	bottom: 20px;
	z-index: 2;
	display: flex;
	gap: 8px;
	transform: translateX(-50%);
}

.m-banner__dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: rgba(255, 255, 255, .55);
	cursor: pointer;
	transition: width .35s var(--m-ease), background-color .35s;
}

.m-banner__dot.is-active {
	width: 28px;
	background: #fff;
}

.m-banner[data-carousel]:focus-visible {
	outline: 2px solid var(--m-rust, #93563f);
	outline-offset: 4px;
}

@media (max-width: 767px) {
	.m-banner__copy {
		padding: 80px 16px 44px;
	}

	.m-banner__title {
		font-size: 17px;
	}

	.m-banner__dots {
		bottom: 14px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.m-banner__track {
		transition: none;
	}
}

/* As Worn By: as many columns as there are cards (up to four). */
@media (min-width: 768px) {
	body.home .m-diaries__grid {
		grid-template-columns: repeat(var(--m-diaries-n, 3), minmax(0, 1fr));
	}
}

/* Product listings (shop, categories, search): four across on desktop. */
@media (min-width: 1024px) {
	ul.products,
	ul.products.columns-4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* ==========================================================================
   Product cards — quick actions (v2.3)
   Two soft paper squares over the top corners of the photograph: the bag
   (left) and the heart (right), thin olive-ink line icons that warm to rust.
   A product in sizes opens a row of size chips across the foot of the photo.
   The layer matches the photograph's 2:3 frame and lets clicks through
   everywhere except on its own controls.
   ========================================================================== */

.m-tilecard {
	position: relative;
}

.m-quick {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	aspect-ratio: var(--m-crop, 2 / 3);
	pointer-events: none;
}

.m-quick__btn,
.m-quick__sizes {
	pointer-events: auto;
}

.m-quick__btn {
	position: absolute;
	top: 12px;
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 0;
	border-radius: 10px;
	background: rgba(245, 242, 235, .9);
	color: var(--m-ink, #343729);
	cursor: pointer;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	transition: color .25s, background-color .25s, transform .25s var(--m-ease);
}

.m-quick__btn--bag { left: 12px; }
.m-quick__btn--fav { right: 12px; }

.m-quick__btn:hover,
.m-quick.is-open .m-quick__btn--bag {
	color: var(--m-rust, #93563f);
	background: var(--m-paper, #f5f2eb);
}

.m-quick__btn:active {
	transform: scale(.94);
}

/* A saved favourite: the heart fills in rust. */
.m-quick__btn--fav.is-on {
	color: var(--m-rust, #93563f);
}

.m-quick__btn--fav.is-on svg path {
	fill: currentColor;
}

/* Sizes, across the foot of the photograph. */
.m-quick__sizes {
	position: absolute;
	left: 12px;
	right: 12px;
	bottom: 12px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
	padding: 10px;
	border-radius: 10px;
	background: rgba(245, 242, 235, .94);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

.m-quick__sizes[hidden] {
	display: none;
}

.m-quick__size {
	min-width: 38px;
	height: 32px;
	padding: 0 10px;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: var(--m-ink, #343729);
	font: 500 12px/1 var(--m-sans);
	letter-spacing: .04em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color .2s, color .2s;
}

.m-quick__size:hover {
	background: var(--m-ink, #343729);
	color: var(--m-paper, #f5f2eb);
}

.m-quick__size:disabled {
	color: var(--m-label, #706f62);
	text-decoration: line-through;
	opacity: .55;
	cursor: not-allowed;
	background: transparent;
}

@media (max-width: 767px) {
	.m-quick__btn {
		top: 8px;
		width: 34px;
		height: 34px;
		border-radius: 9px;
	}

	.m-quick__btn--bag { left: 8px; }
	.m-quick__btn--fav { right: 8px; }

	.m-quick__sizes {
		left: 8px;
		right: 8px;
		bottom: 8px;
		padding: 8px;
	}
}

/* Quick actions, quieter: bare icons, no square behind them, a size down.
   A faint paper halo keeps the line icon legible on a dark photograph. */
.m-quick__btn,
.m-quick__btn:hover,
.m-quick.is-open .m-quick__btn--bag {
	width: 30px;
	height: 30px;
	background: transparent;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

.m-quick__btn svg {
	width: 16px;
	height: 16px;
	filter: drop-shadow(0 0 2px rgba(245, 242, 235, .85));
}

.m-quick__btn--bag { left: 8px; }
.m-quick__btn--fav { right: 8px; }
.m-quick__btn { top: 8px; }

@media (max-width: 767px) {
	.m-quick__btn,
	.m-quick__btn:hover {
		width: 30px;
		height: 30px;
	}

	.m-quick__btn--bag { left: 4px; }
	.m-quick__btn--fav { right: 4px; }
	.m-quick__btn { top: 4px; }
}

/* Card sizes, lighter: no box — a soft shade rises from the foot of the
   photograph and the sizes sit on it as one line of small white capitals. */
.m-quick__sizes {
	left: 0;
	right: 0;
	bottom: 0;
	gap: 4px;
	padding: 56px 12px 14px;
	border-radius: 0 0 var(--m-radius, 12px) var(--m-radius, 12px);
	background: linear-gradient(transparent, rgba(30, 37, 20, .55));
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

.m-quick__size {
	min-width: 0;
	height: 28px;
	padding: 0 10px;
	border-radius: 0;
	background: transparent;
	color: #fff;
	font: 500 11px/1 var(--m-sans);
	letter-spacing: .14em;
	transition: opacity .2s;
}

.m-quick__size:hover {
	background: transparent;
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 5px;
	text-decoration-thickness: 1px;
}

.m-quick__size:disabled {
	color: #fff;
	opacity: .4;
}

@media (max-width: 767px) {
	.m-quick__sizes {
		padding: 44px 6px 10px;
	}

	.m-quick__size {
		padding: 0 7px;
	}
}

/* --------------------------------------------------------------------------
   Card size picker as a small popover (v2.3b)
   A paper card just under the bag: "Select size" with a close cross, then
   outlined chips that wrap — filled in olive ink on hover.
   -------------------------------------------------------------------------- */

.m-quick__sizes {
	top: 44px;
	left: 8px;
	right: auto;
	bottom: auto;
	display: block;
	width: min(232px, calc(100% - 16px));
	padding: 14px;
	border-radius: 12px;
	background: var(--m-paper, #f5f2eb);
	box-shadow: 0 10px 28px rgba(30, 37, 20, .14);
	z-index: 3;
}

.m-quick__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 12px;
}

.m-quick__label {
	font: 500 10px/1 var(--m-sans);
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--m-ink, #343729);
}

.m-quick__close {
	display: grid;
	place-items: center;
	width: 22px;
	height: 22px;
	margin: -4px -4px -4px 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--m-ink, #343729);
	font: 300 20px/1 var(--m-sans);
	cursor: pointer;
}

.m-quick__close:hover {
	color: var(--m-rust, #93563f);
}

.m-quick__list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 8px;
}

.m-quick__size,
.m-quick__size:hover {
	min-width: 0;
	height: 34px;
	padding: 0 4px;
	border: 1px solid var(--m-hairline, #d7d2c5);
	border-radius: 8px;
	background: transparent;
	color: var(--m-ink, #343729);
	font: 500 12px/1 var(--m-sans);
	letter-spacing: .04em;
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color .2s, color .2s, border-color .2s;
}

.m-quick__size:hover {
	border-color: var(--m-ink, #343729);
	background: var(--m-ink, #343729);
	color: var(--m-paper, #f5f2eb);
}

.m-quick__size:disabled,
.m-quick__size:disabled:hover {
	border-color: var(--m-hairline, #d7d2c5);
	background: transparent;
	color: var(--m-label, #706f62);
	opacity: .5;
	text-decoration: line-through;
}

@media (max-width: 767px) {
	.m-quick__sizes {
		top: 38px;
		left: 4px;
		width: calc(100% - 8px);
		padding: 12px;
	}

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

/* --------------------------------------------------------------------------
   Card size picker as a sheet (v2.3c)
   Tapping the bag slides a soft white shade up from the foot of the
   photograph, full width, carrying "Select size", a close cross and the
   chips; closing slides it back down. The photograph's frame clips it, so
   it rises out of the picture's own edge.
   -------------------------------------------------------------------------- */

.m-quick {
	overflow: hidden;
	border-radius: var(--m-radius, 12px);
}

.m-quick__sizes,
.m-quick__sizes[hidden] {
	top: auto;
	left: 0;
	right: 0;
	bottom: 0;
	display: block;
	width: auto;
	padding: 16px 16px 18px;
	border-radius: 0;
	background: rgba(250, 248, 243, .94);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	box-shadow: none;
	transform: translateY(100%);
	visibility: hidden;
	pointer-events: none;
	transition: transform .45s var(--m-ease), visibility 0s linear .45s;
}

.m-quick.is-open .m-quick__sizes {
	transform: translateY(0);
	visibility: visible;
	pointer-events: auto;
	transition: transform .45s var(--m-ease), visibility 0s;
}

.m-quick__list {
	grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
}

@media (max-width: 767px) {
	.m-quick__sizes,
	.m-quick__sizes[hidden] {
		top: auto;
		left: 0;
		width: auto;
		padding: 12px 10px 14px;
	}

	.m-quick__list {
		grid-template-columns: repeat(auto-fill, minmax(38px, 1fr));
		gap: 6px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.m-quick__sizes,
	.m-quick.is-open .m-quick__sizes {
		transition: none;
	}
}

/* Card size sheet, pared back: just the sizes — no heading, no cross, no
   outlines. Tapping the bag again, outside, or Escape closes it. */
.m-quick__head {
	display: none;
}

.m-quick__sizes,
.m-quick__sizes[hidden] {
	padding: 12px 12px 14px;
}

.m-quick__size,
.m-quick__size:hover,
.m-quick__size:disabled,
.m-quick__size:disabled:hover {
	border: 0;
}

/* Card size sheet: more of the photograph shows through. */
.m-quick__sizes,
.m-quick__sizes[hidden] {
	background: rgba(250, 248, 243, .72);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}

/* Product pages: the band under the product keeps square corners. */
.m-band--product,
.m-band--product .m-band__media,
.m-band--product img,
.m-band--product .m-tile {
	border-radius: 0;
}

/* Card size sheet: the sizes sit centred, however many there are. */
.m-quick__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px 10px;
}

.m-quick__size,
.m-quick__size:hover {
	min-width: 44px;
}

/* ==========================================================================
   Collections page — four square banners, two rows (v2.3)
   Each category a square photograph with its name and "shop now" centred
   near the foot over a soft shade; 24px apart, inside the page margins.
   ========================================================================== */

.m-colls__grid--squares {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
}

.m-csq {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 1 / 1;
	border-radius: var(--m-radius, 12px);
	background: var(--m-image-ground, #e4dfd4);
	color: #fff;
}

.m-csq__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1.2s var(--m-ease);
}

.m-csq:hover .m-csq__img {
	transform: scale(1.03);
}

.m-csq__copy {
	position: absolute;
	inset: auto 0 0 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: 140px 24px 44px;
	text-align: center;
	background: linear-gradient(transparent, rgba(30, 37, 20, .45));
}

.m-csq__name {
	font: 600 22px/1.2 var(--m-sans);
	letter-spacing: .02em;
	text-transform: uppercase;
}

.m-csq__cta {
	font: 600 11px/1.4 var(--m-sans);
	letter-spacing: .08em;
	text-transform: uppercase;
}

.m-csq:hover .m-csq__cta {
	text-decoration: underline;
	text-underline-offset: 5px;
}

@media (max-width: 767px) {
	.m-colls__grid--squares {
		grid-template-columns: 1fr;
		gap: 12px;
	}

	.m-csq__copy {
		padding: 100px 16px 28px;
	}

	.m-csq__name {
		font-size: 18px;
	}
}

/* Collections banners: landscape rectangles rather than squares. */
.m-csq {
	aspect-ratio: 3 / 2;
}

.m-csq__copy {
	padding-top: 100px;
}

@media (max-width: 767px) {
	.m-csq {
		aspect-ratio: 4 / 3;
	}

	.m-csq__copy {
		padding-top: 70px;
	}
}

/* Collections page: no rule under the heading. */
.m-colls__head {
	border-bottom: 0;
}

/* Collections page heading: centred, the intro on one line. */
.m-colls__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.m-colls__intro {
	max-width: none;
	white-space: nowrap;
}

@media (max-width: 767px) {
	.m-colls__intro {
		white-space: normal;
	}
}

/* Collections banners: category names at regular weight. */
.m-csq__name {
	font-weight: 400;
}

/* ==========================================================================
   About page (v2.4) — the homepage's language, one paper ground
   40px margins, 120px between sections, 24px between pictures; Cormorant
   for headlines, Chillax for text, rust for the small labels and numbers;
   12px picture corners; no dark bands.
   ========================================================================== */

.m-ab {
	--ab-gutter: 40px;
	--ab-space: 120px;
	--ab-gap: 24px;
	background: var(--m-paper, #f5f2eb);
	color: var(--m-ink);
	padding-bottom: var(--ab-space);
}

.m-ab > section {
	margin-top: var(--ab-space);
	padding: 0 var(--ab-gutter);
}

/* Labels, titles, body. */
.m-ab__label {
	margin: 0 0 18px;
	font: 500 10px/1.5 var(--m-sans);
	letter-spacing: .19em;
	text-transform: uppercase;
	color: var(--m-rust, #93563f);
}

.m-ab__label--center {
	text-align: center;
}

.m-ab__title {
	max-width: 620px;
	margin: 0;
	font: 400 clamp(34px, 3.4vw, 52px)/1.08 'Cormorant', Georgia, serif;
	letter-spacing: -.025em;
	text-transform: none;
}

.m-ab__body {
	max-width: 520px;
	margin-top: 24px;
	font: 400 14px/1.95 var(--m-sans);
	color: var(--m-label);
}

.m-ab__body p {
	margin: 0 0 16px;
}

/* Hero: centred headline and introduction. */
.m-ab__hero {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 96px var(--ab-gutter) 0;
	text-align: center;
}

.m-ab__headline {
	max-width: 900px;
	margin: 0;
	font: 400 clamp(44px, 5.2vw, 80px)/1.02 'Cormorant', Georgia, serif;
	letter-spacing: -.03em;
	text-transform: none;
	color: var(--m-ink);
}

.m-ab__intro {
	max-width: 620px;
	margin: 28px 0 0;
	font: 400 15px/1.9 var(--m-sans);
	color: var(--m-label);
}

/* Pictures: one frame, warm placeholder until chosen. */
.m-ab__pic {
	position: relative;
	overflow: hidden;
	border-radius: var(--m-radius, 12px);
	background: var(--m-image-ground, #e4dfd4);
}

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

.m-ab__pic--wide { aspect-ratio: 21 / 9; }
.m-ab__pic--portrait { aspect-ratio: 4 / 5; }
.m-ab__section--first { margin-top: 72px; }

.m-ab__wide {
	margin-top: 72px !important;
}

/* Where it began: photograph with an overlapping close-up, copy beside. */
.m-ab__split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(50px, 7vw, 110px);
	align-items: center;
}

.m-ab__pair {
	position: relative;
	margin: 0;
	padding: 0 22% 46px 0;
}

.m-ab__pic--main {
	aspect-ratio: 3 / 4;
}

.m-ab__pic--detail {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 44%;
	aspect-ratio: 3 / 4;
	border: 9px solid var(--m-paper, #f5f2eb);
	border-radius: calc(var(--m-radius, 12px) + 9px);
}

/* The makers and the archive: centred copy over pictures. */
.m-ab__center {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 56px;
	text-align: center;
}

.m-ab__center .m-ab__title,
.m-ab__center .m-ab__body {
	margin-left: auto;
	margin-right: auto;
}

.m-ab__duo,
.m-ab__trio {
	display: grid;
	gap: var(--ab-gap);
}

.m-ab__duo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.m-ab__trio { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* How a run happens: three numbered steps. */
.m-ab__steps {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 48px;
	max-width: 1120px;
	margin: 40px auto 0;
	padding: 0;
	list-style: none;
}

.m-ab__step {
	text-align: center;
}

.m-ab__num {
	display: block;
	font: italic 400 34px/1 'Cormorant', Georgia, serif;
	color: var(--m-rust, #93563f);
}

.m-ab__stepTitle {
	margin: 16px 0 10px;
	font: 500 12px/1.4 var(--m-sans);
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--m-ink);
}

.m-ab__step p {
	max-width: 300px;
	margin: 0 auto;
	font: 400 14px/1.85 var(--m-sans);
	color: var(--m-label);
}

/* What we will not do: three statements, one under another. */
.m-ab__wontList {
	max-width: 760px;
	margin: 32px auto 0;
	padding: 0;
	list-style: none;
	text-align: center;
}

.m-ab__wontList li {
	margin: 0 0 22px;
	font: 400 clamp(22px, 2vw, 30px)/1.35 'Cormorant', Georgia, serif;
	letter-spacing: -.01em;
	color: var(--m-ink);
}

/* Closing: the sun and two lines, as on the homepage. */
.m-ab__close {
	text-align: center;
}

.m-ab__close svg {
	display: block;
	width: 35px;
	height: 35px;
	margin: 0 auto 20px;
	color: var(--m-rust, #93563f);
}

.m-ab__closing {
	margin: 0;
	font: 400 clamp(37px, 4.2vw, 62px)/1.08 'Cormorant', Georgia, serif;
	letter-spacing: -.025em;
	color: var(--m-ink);
}

.m-ab__closing em {
	font-style: italic;
}

@media (max-width: 1023px) {
	.m-ab {
		--ab-gutter: 24px;
		--ab-space: 88px;
	}

	.m-ab__steps {
		gap: 32px;
	}
}

@media (max-width: 767px) {
	.m-ab {
		--ab-gutter: 16px;
		--ab-space: 64px;
		--ab-gap: 12px;
	}

	.m-ab__hero {
		padding-top: 56px;
	}

	.m-ab__wide {
		margin-top: 48px !important;
	}

	.m-ab__pic--wide { aspect-ratio: 4 / 3; }

	.m-ab__split {
		grid-template-columns: 1fr;
		gap: 42px;
	}

	/* Stacked, the story reads first and its photographs follow. */
	.m-ab__split .m-ab__pair {
		order: 2;
	}

	.m-ab__center {
		margin-bottom: 32px;
	}

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

	.m-ab__trio > :first-child {
		grid-column: 1 / -1;
	}

	.m-ab__steps {
		grid-template-columns: 1fr;
		gap: 36px;
	}
}

/* About: the sections carry the margin; the page wrapper adds none. */
main.m-ab {
	padding-left: 0;
	padding-right: 0;
	max-width: none;
}

/* About — from the archive, as a text-led essay: label and heading held to
   the left (and pinned while you read), the paragraphs set wide on the right. */
.m-ab__essay {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: clamp(40px, 6vw, 110px);
	align-items: start;
}

.m-ab__essayHead {
	position: sticky;
	top: calc(var(--m-header-h, 100px) + 24px);
}

.m-ab__essayBody {
	max-width: 640px;
	font: 400 16px/1.95 var(--m-sans);
	color: var(--m-ink);
}

.m-ab__essayBody p {
	margin: 0 0 24px;
}

.m-ab__essayBody p:first-child::first-letter {
	float: left;
	margin: 6px 12px 0 0;
	font: 400 64px/.8 'Cormorant', Georgia, serif;
	color: var(--m-rust, #93563f);
}

@media (max-width: 767px) {
	.m-ab__essay {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.m-ab__essayHead {
		position: static;
	}

	.m-ab__essayBody {
		font-size: 15px;
	}
}

/* Blog index: heading block centred; no rules between the posts. */
.m-blog__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.m-blog__rule {
	margin-left: auto;
	margin-right: auto;
}

.m-blog__intro {
	margin-left: auto;
	margin-right: auto;
}

.m-blogcard {
	border-bottom: 0;
}

/* Blog index: the same space under the heading as above it. */
.m-blog__head {
	margin-bottom: 64px;
}

@media (max-width: 767px) {
	.m-blog__head {
		margin-bottom: 40px;
	}
}

/* Blog index heading at medium weight. */
.m-blog__title {
	font-weight: 500;
}

/* Shipping and returns are reference pages, not essays: the 40rem reading
   column squeezed the rates and lists into a narrow strip. */
body.m-page-shipping-policy .m-posthead,
body.m-page-shipping-policy .m-entry,
body.m-page-refund_returns .m-posthead,
body.m-page-refund_returns .m-entry {
	max-width: 64rem;
}

/* Product listings: two across on phones too (desktop untouched). */
@media (max-width: 599px) {
	ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 2rem .75rem;
	}
}

/* Blog listing on phones: the cover runs the full column instead of a
   12rem stamp, cropped landscape so each post still fits one screen. */
@media (max-width: 599px) {
	.m-blogcard__crop {
		max-width: none;
	}

	.m-blogcard .m-tile--blog {
		aspect-ratio: 4 / 3;
	}
}

/* ---------- Listing header on phones --------------------------------------
   Two quiet rows instead of a wrapped tangle: the collection picker and the
   sort share the top line; availability, price and the tally sit in a ruled
   strip beneath. The h1 repeats the picker's own label, so it stays for screen
   readers only. Filter panels drop full width under the strip.
   ------------------------------------------------------------------------- */
@media (max-width: 767px) {
	.m-collhead {
		position: relative;
		display: grid;
		grid-template-columns: auto auto minmax(0, 1fr);
		grid-template-areas:
			"cats  cats  sort"
			"avail price count"
			"clear clear clear";
		align-items: center;
		gap: 0;
		padding: 1.5rem 0 0;
		margin-bottom: 2.25rem;
	}

	.m-collhead__name {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}

	.m-collhead .m-facets {
		display: contents;
	}

	.m-collhead__cats {
		grid-area: cats;
		margin: 0;
		padding-bottom: 1.125rem;
		color: var(--m-ink);
	}

	.m-collhead .m-facets__count {
		grid-area: count;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		margin: 0;
		font-size: .6875rem;
		letter-spacing: .16em;
		white-space: nowrap;
	}

	/* The strip: one hairline above, one below, cells flush. */
	.m-collhead .m-facet,
	.m-collhead .m-facets__count {
		position: static;
		min-height: 3rem;
		border-top: 1px solid var(--m-hairline);
		border-bottom: 1px solid var(--m-hairline);
	}

	.m-collhead .m-facet:nth-of-type(1) {
		grid-area: avail;
		padding-right: 1.25rem;
	}

	.m-collhead .m-facet:nth-of-type(2) {
		grid-area: price;
		padding-left: 1.25rem;
		border-left: 1px solid var(--m-hairline);
	}

	.m-collhead__sort {
		grid-area: sort;
		justify-self: end;
		padding-bottom: 1.125rem;
	}

	.m-collhead .m-facet__label,
	.m-collhead__sort {
		font-size: .6875rem;
		letter-spacing: .14em;
	}

	.m-collhead__sort select {
		min-height: 0;
		letter-spacing: .14em;
		text-align: right;
	}

	.m-collhead .m-facet__panel,
	.m-collhead .m-facet__panel--price {
		top: 100%;
		left: 0;
		right: 0;
		min-width: 0;
		margin-top: -1px;
	}

	.m-collhead .m-facets__clear {
		grid-area: clear;
		justify-self: start;
		margin-top: 1rem;
		font-size: .6875rem;
	}
}

/* ---------- Footer on phones (v2.2) ----------------------------------------
   One centred axis, the way the lockup already sits: the three link lists
   centred in a band ruled above and below with the footer's olive hairline,
   thin rules between them; the sign-up centred under it in the label voice;
   the motto and the bar closed off by a final hairline. Phone only — tablet
   and desktop keep their own layouts.
   ------------------------------------------------------------------------- */
@media (max-width: 767px) {
	.m-ft__inner {
		column-gap: 0;
		padding-top: 3.5rem;
	}

	.m-ft__lockup {
		width: min(52%, 11.5rem);
		margin: 0 auto 2.75rem;
	}

	/* The link band. */
	.m-ft__inner > .m-ft__col {
		padding: 1.75rem .5rem;
		text-align: center;
		border-top: 1px solid var(--ft-line);
		border-bottom: 1px solid var(--ft-line);
	}

	.m-ft__col--about {
		border-left: 1px solid var(--ft-line);
		border-right: 1px solid var(--ft-line);
	}

	.m-ft__col .m-linklist {
		gap: 1rem;
		font-size: .8125rem;
		line-height: 1.3;
		letter-spacing: .02em;
	}

	/* Stay in touch, centred under the band. */
	.m-ft__touch {
		padding: 2.75rem 0 0;
		text-align: center;
	}

	.m-ft__head--touch,
	body.home .m-ft__head--touch {
		margin: 0 0 1rem;
		font-size: .6875rem;
		letter-spacing: .24em;
	}

	.m-ft__touchCopy {
		max-width: 17rem;
		margin: 0 auto 1.5rem;
		font-size: .8125rem;
		line-height: 1.6;
	}

	.m-ft__sub {
		text-align: left;
	}

	.m-ft__sub input,
	body.home .m-ft__sub input {
		font-size: .8125rem;
		letter-spacing: .02em;
	}

	.m-ft__touch .m-ft__social {
		justify-content: center;
		gap: 1.75rem;
		margin-top: 2rem;
	}

	/* The close: motto, then a hairline, then copyright and ship-to. */
	.m-ft__tagline,
	body.home .m-ft__tagline {
		margin: 3rem var(--m-gutter) 0;
		font-size: .625rem;
		letter-spacing: .22em;
	}

	.m-ft__bar,
	body.home .m-ft__bar {
		margin: 1.5rem var(--m-gutter) 0;
		padding: 1.25rem 0 1.75rem;
		border-top: 1px solid var(--ft-line);
	}
}

/* ---------- Contact page: soft corners -------------------------------------
   Every framed surface on the page takes the site's radii: the photograph and
   the support panel the larger one, fields, button and FAQ boxes the smaller.
   ------------------------------------------------------------------------- */
.m-contact .m-chero__figure,
.m-contact .m-chero__figure img,
.m-contact .m-caside {
	border-radius: var(--m-radius);
	overflow: hidden;
}

.m-contact .m-field input,
.m-contact .m-field textarea,
.m-contact .m-cform__send,
.m-contact .m-cform__notice,
.m-contact .m-faq {
	border-radius: var(--m-radius-sm);
}

/* FAQs on phones: no boxes, just the questions on hairlines with their plus. */
@media (max-width: 767px) {
	.m-faq,
	.m-contact .m-faq {
		background: none;
		border: 0;
		border-bottom: 1px solid var(--m-hairline);
		border-radius: 0;
		margin: 0;
		box-shadow: none;
	}

	.m-cfaq__col:first-child .m-faq:first-child {
		border-top: 1px solid var(--m-hairline);
	}

	.m-cfaq__grid .m-faq + .m-faq,
	.m-cfaq__col + .m-cfaq__col {
		margin-top: 0;
	}

	.m-faq__q,
	.m-faq__q:hover,
	.m-faq[open] .m-faq__q {
		padding-left: 0;
		padding-right: 0;
		background: none;
	}

	.m-faq__a {
		padding-left: 0;
		padding-right: 0;
	}
}

/* Contact page on phones: the opener and the four details centred. */
@media (max-width: 1023px) {
	.m-chero__copy {
		align-items: center;
		text-align: center;
	}

	.m-chero__rule {
		margin-left: auto;
		margin-right: auto;
	}

	.m-chero__intro {
		margin-left: auto;
		margin-right: auto;
	}

	.m-cdetail {
		text-align: center;
	}
}

/* Half a phone holds the timing and its (IST) on one line. */
@media (max-width: 1023px) {
	.m-cdetail:nth-child(odd) {
		padding-right: .5rem;
	}

	.m-cdetail:nth-child(even) {
		padding-left: .5rem;
	}

	.m-cdetail__lead,
	.m-cdetail__note {
		font-size: .8125rem;
	}

	.m-cdetail__icon {
		display: flex;
		justify-content: center;
	}
}

/* Contact page closing note: one centred line of small print under the FAQs,
   with the same air above and below it instead of two stacked paddings. */
.m-cextra {
	padding: 0 var(--m-gutter) 5rem;
}

.m-cextra .m-entry {
	max-width: 34rem;
	padding: 0;
	text-align: center;
}

.m-cextra .m-entry p {
	margin: 0;
	font-size: .9375rem;
	line-height: 1.75;
	color: var(--m-label);
}

@media (max-width: 1023px) {
	/* Same 4rem below as the FAQ leaves above; the page carries the gutter. */
	.m-cextra {
		padding: 0 0 4rem;
	}

	.m-cextra .m-entry p {
		font-size: .8125rem;
	}
}

/* Contact opener at every width: the studio photograph becomes the banner,
   the title and intro sit on it in paper over a soft olive veil. */
@media all {
	.m-chero {
		position: relative;
		display: grid;
		grid-template-columns: 1fr;
		grid-template-areas: "banner";
		min-height: 26rem;
		margin: 1.5rem 0 0;
		border-radius: var(--m-radius);
		overflow: hidden;
	}

	.m-chero__figure,
	.m-chero__copy {
		grid-area: banner;
	}

	.m-chero__figure {
		position: relative;
		min-height: 100%;
		border-radius: 0;
	}

	.m-chero__figure .m-tile--bleed {
		position: absolute;
		inset: 0;
		height: 100%;
		aspect-ratio: auto;
		border-radius: 0;
	}

	.m-chero__figure img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		border-radius: 0;
	}

	/* The veil: darker at the foot and centre, so the paper type always reads. */
	.m-chero__figure::after {
		content: '';
		position: absolute;
		inset: 0;
		background: linear-gradient(180deg, rgba(52, 55, 41, .45) 0%, rgba(52, 55, 41, .62) 100%);
		pointer-events: none;
	}

	.m-chero__copy {
		position: relative;
		z-index: 1;
		justify-content: center;
		padding: 3rem 1.5rem;
	}

	.m-chero__title {
		color: #f5f2eb;
	}

	.m-chero__rule {
		background: #f5f2eb;
		margin-top: 1.25rem;
		margin-bottom: 1.5rem;
	}

	.m-chero__intro {
		color: #ece9e1;
		font-size: .9375rem;
		line-height: 1.75;
	}
}

/* As Worn By on phones: a plain two-by-two grid, every card the same size —
   no full-width lead. */
@media (max-width: 767px) {
	body.home .m-diaries__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	body.home .m-diaries__grid > *,
	body.home .m-diaries__grid > :first-child,
	body.home .m-diaries__grid > :first-child:nth-last-child(odd) {
		grid-column: auto;
	}

	body.home .m-diaries__grid .m-tile,
	body.home .m-diaries__grid > :first-child .m-tile,
	body.home .m-diaries__grid > :first-child:nth-last-child(odd) .m-tile {
		aspect-ratio: 2 / 3;
	}
}

/* ==========================================================================
   Product page on phones: the photographs as a swipe carousel (v2.5)
   Side by side, snapping one at a time, the next one peeking in at the edge;
   round dots beneath (the current one drawn into a pill), from mitesh.js.
   ========================================================================== */

@media (max-width: 1023px) {
	.m-pdp__gallery .woocommerce-product-gallery__wrapper {
		display: flex;
		gap: 8px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: 0;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		overscroll-behavior-x: contain;
	}

	.m-pdp__gallery .woocommerce-product-gallery__wrapper::-webkit-scrollbar {
		display: none;
	}

	.m-pdp__gallery .woocommerce-product-gallery__image {
		flex: 0 0 88%;
		margin: 0 !important;
		scroll-snap-align: start;
		scroll-snap-stop: always;
	}

	.m-pdp__gallery .woocommerce-product-gallery__image:last-child {
		scroll-snap-align: end;
	}

	.m-pdp__dots {
		display: flex;
		justify-content: center;
		gap: 6px;
		margin-top: 14px;
	}

	.m-pdp__dot {
		width: 6px;
		height: 6px;
		padding: 0;
		border: 0;
		border-radius: 999px;
		background: var(--m-hairline, #d7d2c5);
		cursor: pointer;
		transition: width .3s var(--m-ease), background-color .3s;
	}

	.m-pdp__dot.is-active {
		width: 20px;
		background: var(--m-ink, #343729);
	}
}

@media (min-width: 1024px) {
	.m-pdp__dots {
		display: none;
	}
}

/* Product page on phones: no full-screen "+" trigger over the carousel. */
@media (max-width: 1023px) {
	.m-pdp__gallery .woocommerce-product-gallery__trigger {
		display: none !important;
	}
}

/* ==========================================================================
   Product page buy panel on phones (v2.5b)
   Name and price, a quiet tax note; size chips with a size-guide link; a
   quantity stepper beside "Add to cart", "Buy it now" outlined beneath.
   No SKU / category / tags, no repeated title over the description.
   ========================================================================== */

.m-pdp__chips,
.m-qty {
	display: none;
}

@media (max-width: 1023px) {
	.m-pdp__buy {
		padding-top: 8px;
	}

	.m-pdp__buyTitle {
		margin: 0 0 6px;
		font: 400 22px/1.25 var(--m-sans);
		letter-spacing: 0;
		text-transform: none;
		color: var(--m-ink);
	}

	.m-pdp__vendor {
		display: none;
	}

	.m-pdp__buy .price {
		margin: 0;
		font: 500 17px/1.4 var(--m-sans);
		letter-spacing: 0;
		color: var(--m-ink);
	}

	.m-pdp__tax {
		margin: 4px 0 24px;
		font: 400 11px/1.5 var(--m-sans);
		letter-spacing: 0;
		text-transform: none;
		color: var(--m-label);
	}

	/* Size: label row with the guide link, then chips. */
	.m-pdp__buy table.variations,
	.m-pdp__buy table.variations tbody,
	.m-pdp__buy table.variations tr,
	.m-pdp__buy table.variations th,
	.m-pdp__buy table.variations td {
		display: block;
		width: 100%;
		padding: 0;
		border: 0;
	}

	.m-pdp__buy table.variations th.label {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		margin-bottom: 12px;
	}

	.m-pdp__buy table.variations th.label label {
		font: 500 11px/1 var(--m-sans);
		letter-spacing: .14em;
		text-transform: uppercase;
		color: var(--m-ink);
	}

	.m-pdp__guide {
		font: 400 12px/1 var(--m-sans);
		color: var(--m-label);
		text-decoration: underline;
		text-underline-offset: 4px;
	}

	.m-pdp__buy table.variations select {
		position: absolute;
		width: 1px;
		height: 1px;
		opacity: 0;
		pointer-events: none;
	}

	.m-pdp__chips {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
	}

	.m-pdp__chip {
		min-width: 52px;
		height: 44px;
		padding: 0 14px;
		border: 1px solid var(--m-hairline, #d7d2c5);
		border-radius: var(--m-radius-sm, 8px);
		background: transparent;
		color: var(--m-ink);
		font: 500 13px/1 var(--m-sans);
		letter-spacing: .04em;
		text-transform: uppercase;
		cursor: pointer;
		transition: background-color .2s, color .2s, border-color .2s;
	}

	.m-pdp__chip.is-on {
		border-color: var(--m-ink);
		background: var(--m-ink);
		color: var(--m-paper, #f5f2eb);
	}

	.m-pdp__buy .reset_variations {
		display: none !important;
	}

	.m-pdp__buy .woocommerce-variation-availability .stock {
		margin: 14px 0 0;
		font: 400 12px/1.4 var(--m-sans);
		letter-spacing: 0;
		text-transform: none;
		color: var(--m-label);
	}

	/* Quantity stepper beside Add to cart; Buy it now beneath. */
	.m-pdp__buy .variations_button,
	.m-pdp__buy form.cart:not(.variations_form) {
		display: grid;
		grid-template-columns: 116px minmax(0, 1fr);
		gap: 8px;
		margin-top: 20px;
	}

	.m-pdp__buy .quantity {
		display: grid;
		grid-template-columns: 36px 1fr 36px;
		align-items: center;
		height: 48px;
		margin: 0;
		border: 1px solid var(--m-hairline, #d7d2c5);
		border-radius: var(--m-radius-sm, 8px);
	}

	.m-qty {
		display: grid;
		place-items: center;
		height: 100%;
		padding: 0;
		border: 0;
		background: transparent;
		color: var(--m-ink);
		font: 300 18px/1 var(--m-sans);
		cursor: pointer;
	}

	.m-pdp__buy .quantity input.qty {
		width: 100%;
		height: 100%;
		padding: 0;
		border: 0;
		background: transparent;
		text-align: center;
		font: 500 14px/1 var(--m-sans);
		-moz-appearance: textfield;
	}

	.m-pdp__buy .quantity input.qty::-webkit-outer-spin-button,
	.m-pdp__buy .quantity input.qty::-webkit-inner-spin-button {
		margin: 0;
		-webkit-appearance: none;
	}

	.m-pdp__buy button.single_add_to_cart_button,
	.m-pdp__buy .m-pdp__buynow {
		height: 48px;
		margin: 0;
		border-radius: var(--m-radius-sm, 8px);
		font: 500 12px/1 var(--m-sans);
		letter-spacing: .14em;
		text-transform: uppercase;
	}

	.m-pdp__buy .m-pdp__buynow {
		grid-column: 1 / -1;
		border: 1px solid var(--m-ink);
		background: transparent;
		color: var(--m-ink);
	}

	.m-pdp__buy .product_meta {
		display: none;
	}

	/* The description column repeats the category and title: keep the
	   title for search engines and screen readers, hide it from view. */
	.m-pdp__desc .m-pdp__cat {
		display: none;
	}

	.m-pdp__desc .m-pdp__title {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}
}

@media (max-width: 1023px) {
	.m-pdp__buy form.cart button.button.m-pdp__buynow,
	.m-pdp__buy form.cart button.button.m-pdp__buynow:hover {
		border: 1px solid var(--m-ink);
		background: transparent;
		color: var(--m-ink);
	}
}

/* ==========================================================================
   Our story on phones (v2.5c)
   One reading line: the opening stays centred, everything after it reads
   from the left edge. Cormorant for headline, section titles and the step
   numbers; Chillax for labels, introduction and running text — tighter
   leading so long passages hold together; labels a size up to read; the
   first photograph wider with its close-up tucked into the corner.
   ========================================================================== */

@media (max-width: 767px) {
	/* Opening. */
	.m-ab__hero {
		padding-top: 48px;
	}

	.m-ab__headline {
		font-size: 40px;
		line-height: 1.04;
		letter-spacing: -.025em;
	}

	.m-ab__intro {
		margin-top: 20px;
		font-size: 14px;
		line-height: 1.75;
	}

	.m-ab__wide {
		margin-top: 40px !important;
	}

	/* Labels, titles, running text. */
	.m-ab__label {
		margin-bottom: 14px;
		font-size: 11px;
		letter-spacing: .16em;
	}

	.m-ab__title {
		font-size: 30px;
		line-height: 1.1;
	}

	.m-ab__body {
		max-width: none;
		margin-top: 18px;
		font-size: 14px;
		line-height: 1.8;
	}

	.m-ab__body p {
		margin-bottom: 14px;
	}

	/* Everything after the opening reads from the left. */
	.m-ab__center,
	.m-ab__label--center,
	.m-ab__step {
		align-items: flex-start;
		text-align: left;
	}

	.m-ab__center .m-ab__title,
	.m-ab__center .m-ab__body {
		margin-left: 0;
		margin-right: 0;
	}

	.m-ab__center {
		margin-bottom: 28px;
	}

	/* Where it began: copy first, the photographs under it, wider. */
	.m-ab__split {
		display: flex;
		flex-direction: column-reverse;
		gap: 32px;
	}

	.m-ab__pair {
		padding: 0 14% 36px 0;
	}

	.m-ab__pic--detail {
		width: 46%;
		border-width: 7px;
		border-radius: calc(var(--m-radius, 12px) + 7px);
	}

	/* From the archive: the essay a touch tighter. */
	.m-ab__essay {
		gap: 18px;
	}

	.m-ab__essayBody {
		font-size: 15px;
		line-height: 1.8;
	}

	.m-ab__essayBody p {
		margin-bottom: 18px;
	}

	.m-ab__essayBody p:first-child::first-letter {
		margin: 5px 10px 0 0;
		font-size: 56px;
	}

	/* How a run happens: numbered list down the left, hairline-free. */
	.m-ab__steps {
		gap: 28px;
		margin-top: 24px;
	}

	.m-ab__step {
		display: grid;
		grid-template-columns: 44px minmax(0, 1fr);
		column-gap: 8px;
	}

	.m-ab__num {
		grid-row: 1 / span 2;
		font-size: 30px;
		line-height: 1;
	}

	.m-ab__stepTitle {
		margin: 4px 0 6px;
		font-size: 11px;
	}

	.m-ab__step p {
		max-width: none;
		margin: 0;
		font-size: 14px;
		line-height: 1.75;
	}
}

@media (max-width: 767px) {
	/* The photograph pair keeps the full width in the stacked layout. */
	.m-ab__split > .m-ab__pair,
	.m-ab__split > .m-ab__copy {
		width: 100%;
	}

	.m-ab__pic--main {
		width: 100%;
	}

	/* The headline flows on a phone instead of breaking where desktop does. */
	.m-ab__headline br {
		display: none;
	}
}

@media (max-width: 767px) {
	/* Where it began: the words first, then the photographs (explicit order
	   — an older rule numbers the figure, which reversed a column-reverse). */
	.m-ab__split {
		flex-direction: column;
	}

	.m-ab__split > .m-ab__copy {
		order: 1;
	}

	.m-ab__split > .m-ab__pair {
		order: 2;
	}
}

/* ==========================================================================
   Journal (v2.5d)
   Every size: post titles in Cormorant, like the site's other titles.
   Phones: a smaller heading; each post reads date → title → excerpt under
   its photograph, the excerpt quiet, "read more" dropped (the photograph
   and title already link), and the posts closer together.
   ========================================================================== */

.m-blogcard__title,
.m-blogcard__title a {
	font-family: 'Cormorant', Georgia, serif;
	font-weight: 400;
	letter-spacing: -.01em;
	text-transform: none;
}

@media (max-width: 767px) {
	.m-blog__title {
		font-size: 30px;
		line-height: 1.1;
		letter-spacing: .2em;
	}

	.m-blog__head {
		margin-bottom: 36px;
	}

	.m-blog__grid {
		row-gap: 48px;
	}

	.m-blogcard {
		padding: 0;
	}

	.m-blogcard__crop .m-tile {
		aspect-ratio: 4 / 3;
	}

	.m-blogcard__body {
		display: flex;
		flex-direction: column;
		margin-top: 16px;
	}

	.m-blogcard__foot {
		order: -1;
		margin: 0 0 8px;
	}

	.m-blogcard__date {
		font: 500 10px/1.4 var(--m-sans);
		letter-spacing: .16em;
		text-transform: uppercase;
		color: var(--m-rust, #93563f);
	}

	.m-blogcard__more {
		display: none;
	}

	.m-blogcard__title {
		margin: 0;
		font-size: 26px;
		line-height: 1.15;
	}

	.m-blogcard__excerpt {
		margin: 10px 0 0;
		font: 400 14px/1.7 var(--m-sans);
		color: var(--m-label);
	}
}

/* Journal on larger screens: Cormorant sits small, so the titles step up. */
@media (min-width: 768px) {
	.m-blogcard__title {
		font-size: clamp(24px, 1.9vw, 30px);
		line-height: 1.15;
	}
}

/* Page titles ("Blog", "Collections") at regular weight. */
.m-blog__title,
.m-colls__title {
	font-weight: 400;
}

/* ==========================================================================
   Homepage on phones (v2.5e)
   The two Cormorant statements sized for a phone and to each other; the
   story paragraph at the body size; the small captions raised to a size
   that can be read; a little more air between the story's parts.
   ========================================================================== */

@media (max-width: 767px) {
	.m-story__heading {
		font-size: 40px;
		line-height: 1.05;
	}

	.m-story__body {
		margin: 18px 0 0;
		font-size: 14px;
		line-height: 1.8;
	}

	.m-story__eyebrow {
		margin-bottom: 14px;
		font-size: 11px;
		letter-spacing: .16em;
	}

	.m-story__caption {
		font-size: 10px;
		letter-spacing: .12em;
	}

	.m-story__values {
		margin-top: 28px;
		padding-top: 20px;
		gap: 16px;
	}

	.m-story__value p {
		font-size: 12px;
		line-height: 1.5;
	}

	.m-manifesto__title {
		font-size: 34px;
		line-height: 1.1;
	}

	.m-manifesto__caption {
		margin-top: 18px;
		font-size: 10px;
		letter-spacing: .16em;
		line-height: 1.6;
	}

	body.home .m-h2 {
		letter-spacing: .14em;
	}
}

@media (max-width: 767px) {
	/* Closing statement: balanced lines, no single word left on its own. */
	.m-manifesto__title {
		font-size: 32px;
		text-wrap: balance;
	}
}

@media (max-width: 1023px) {
	/* Footer on phones and tablets: no boxes round the link columns and no
	   rule over the bar — as on desktop. */
	.m-ft__col,
	.m-ft .m-ft__col {
		border: 0;
	}

	.m-ft__bar,
	body.home .m-ft__bar {
		border-top: 0;
	}
}

@media (max-width: 767px) {
	/* Homepage story on phones: the two photos sit side by side, bottoms
	   aligned, instead of the small one overlapping the large one. The
	   caption runs underneath. */
	.m-story__images {
		display: grid;
		grid-template-columns: 1.55fr 1fr;
		align-items: end;
		gap: 10px;
		max-width: none;
		padding: 0;
	}

	.m-story__detail {
		position: static;
		width: auto;
	}

	.m-story__detail .m-tile {
		border: 0;
		border-radius: var(--m-radius, 12px);
	}

	.m-story__caption {
		position: static;
		grid-column: 1 / -1;
		margin-top: 4px;
	}
}

@media (max-width: 767px) {
	/* The banner carousel above is already a full photo, so on phones the
	   story opens with its words and closes with one photo; the detail shot
	   stays on desktop only. */
	.m-story__copy {
		order: -1;
	}

	.m-story__images {
		display: block;
	}

	.m-story__detail {
		display: none;
	}

	.m-story__main .m-tile {
		aspect-ratio: 4 / 5;
	}

	.m-story__caption {
		margin-top: 10px;
	}
}

/* --- Homepage new arrivals: one side-swipe row ------------------------------ */

body.home .m-newrow {
	position: relative;
}

body.home .m-newgrid {
	display: flex;
	gap: var(--h-gap);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding: 0 var(--m-gutter);
	margin: 0 calc(-1 * var(--m-gutter));
	padding: 0 var(--m-gutter);
	scrollbar-width: none;
	overscroll-behavior-x: contain;
}

body.home .m-newgrid::-webkit-scrollbar {
	display: none;
}

/* Four and a bit across: the cut-off card says the row goes on. */
body.home .m-newgrid > * {
	flex: 0 0 calc((100% - 3 * var(--h-gap)) / 4.25);
	min-width: 0;
	scroll-snap-align: start;
}

body.home .m-newrow__btn {
	position: absolute;
	top: 38%;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(250, 248, 243, .86);
	color: var(--m-ink);
	cursor: pointer;
	transition: opacity .25s ease;
}

body.home .m-newrow__btn--prev {
	left: 12px;
}

body.home .m-newrow__btn--next {
	right: 12px;
}

body.home .m-newrow__btn:disabled {
	opacity: 0;
	pointer-events: none;
}

body.home .m-newrow__all {
	margin: 36px 0 0;
	text-align: center;
}

@media (max-width: 1023px) {
	body.home .m-newgrid > * {
		flex-basis: calc((100% - 2 * var(--h-gap)) / 3.3);
	}
}

@media (max-width: 767px) {
	/* One and a half across a phone; the thumb does the work, so no arrows. */
	body.home .m-newgrid {
		gap: 12px;
	}

	body.home .m-newgrid > * {
		flex-basis: 64%;
	}

	body.home .m-newrow__btn {
		display: none;
	}

	body.home .m-newrow__all {
		margin-top: 24px;
	}
}

/* New arrivals: cards the same size as the categories above — four whole
   cards to a frame on desktop, two on a phone, nothing cut off. */
body.home .m-newgrid > *,
body.home .m-newgrid > * {
	flex: 0 0 calc((100% - 3 * var(--h-gap)) / 4);
}

@media (max-width: 1023px) {
	body.home .m-newgrid > * {
		flex-basis: calc((100% - 3 * var(--h-gap)) / 4);
	}
}

@media (max-width: 767px) {
	body.home .m-newgrid {
		gap: var(--h-gap);
	}

	body.home .m-newgrid > * {
		flex-basis: calc((100% - var(--h-gap)) / 2);
	}
}

/* The row stops at the page gutter, so the next card never peeks in. */
body.home .m-newgrid {
	margin: 0;
	padding: 0;
	scroll-padding: 0;
}

/* --- Tablet (768–1023): the burger header of the phone, the footer of the
   desktop. The header half is the navbar rule above, now from 1024px; the
   footer half restates the desktop layout over the tablet stacking rules. */
@media (min-width: 768px) and (max-width: 1023px) {
	html body .m-ft__body {
		display: block;
		padding: 0;
		font-size: inherit;
	}

	html body .m-ft__inner {
		display: grid;
		grid-template-columns: repeat(12, minmax(0, 1fr));
		column-gap: 16px;
		row-gap: normal;
		align-items: start;
		padding: 96px var(--m-gutter) 0;
		text-align: start;
	}

	html body .m-ft__brand {
		display: block;
		grid-column: 1 / 4;
		grid-row: auto;
		padding: 0;
		border: 0;
		text-align: start;
	}

	html body .m-ft__inner > .m-ft__col {
		grid-row: auto;
		order: 0;
		padding: 0;
		border: 0;
		text-align: start;
	}

	html body .m-ft__col--shop {
		grid-column: 4 / 6;
	}

	html body .m-ft__col--about {
		grid-column: 6 / 8;
	}

	html body .m-ft__col--help {
		grid-column: 8 / 10;
	}

	html body .m-ft__col .m-linklist {
		padding: 0;
		align-items: normal;
		text-align: start;
	}

	html body .m-ft__touch {
		grid-column: 10 / 13;
		grid-row: auto;
		order: 0;
		padding: 0;
		border: 0;
		text-align: start;
	}

	html body .m-ft__head--touch,
	html body .m-ft__touchCopy,
	html body .m-ft__sub {
		text-align: start;
	}

	html body .m-ft__social {
		justify-content: flex-start;
	}


	html body .m-ft__tagline {
		grid-column: auto;
		grid-row: auto;
		margin: 72px var(--m-gutter) 0;
		padding: 0;
		text-align: center;
	}

	html body .m-ft__bar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 32px var(--m-gutter) 0;
		border-top: 0;
	}
}

@media (max-width: 767px) {
	/* Homepage on phones: card captions, the story copy and the As Worn By
	   names sit centred under their pictures. */
	body.home .m-new .m-tilecard__meta {
		align-items: center;
		justify-content: center;
		text-align: center;
	}

	body.home .m-story__copy,
	body.home .m-story__eyebrow,
	body.home .m-story__heading,
	body.home .m-story__body,
	body.home .m-story__value,
	body.home .m-story__caption {
		text-align: center;
	}

	body.home .m-story__body {
		margin-left: auto;
		margin-right: auto;
	}

	body.home .m-story__values {
		justify-items: center;
		justify-content: center;
	}

	body.home .m-diary__name {
		text-align: center;
	}
}

@media (min-width: 768px) and (max-width: 1023px) {
	/* Tablet footer: a smaller lockup with clear space before the links. */
	html body .m-ft__brand {
		padding-right: 32px;
	}

	html body .m-ft__lockup {
		display: block;
		width: 100%;
		max-width: 130px;
		height: auto;
	}
}

/* Banner: edge to edge with square corners at every width; shorter on phones. */
body.home .m-banner {
	padding: 0;
}

.m-banner__frame {
	border-radius: 0;
}

@media (max-width: 767px) {
	.m-banner__frame {
		aspect-ratio: 1 / 1;
	}
}

/* FAQs on tablet and desktop drawn as on phones: no boxes, just the
   questions on hairlines with their plus. Desktop keeps its two columns,
   each opening with a hairline of its own. */
@media (min-width: 768px) {
	.m-faq,
	.m-contact .m-faq {
		background: none;
		border: 0;
		border-bottom: 1px solid var(--m-hairline);
		border-radius: 0;
		margin: 0;
		box-shadow: none;
	}

	.m-cfaq__col:first-child .m-faq:first-child {
		border-top: 1px solid var(--m-hairline);
	}

	.m-cfaq__grid .m-faq + .m-faq,
	.m-cfaq__col + .m-cfaq__col {
		margin-top: 0;
	}

	.m-faq__q,
	.m-faq__q:hover,
	.m-faq[open] .m-faq__q {
		padding-left: 0;
		padding-right: 0;
		background: none;
	}

	.m-faq__a {
		padding-left: 0;
		padding-right: 0;
	}
}

@media (min-width: 1024px) {
	.m-cfaq__col .m-faq:first-child {
		border-top: 1px solid var(--m-hairline);
	}
}

@media (min-width: 768px) and (max-width: 1023px) {
	/* Size guide on tablets: the chart runs full width, then the model
	   photograph and How to measure sit side by side. */
	main.m-sg {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		column-gap: 40px;
		align-items: start;
	}

	main.m-sg > .m-sg__head {
		grid-column: 1 / -1;
	}

	main.m-sg > .m-sg__chart.has-model {
		display: contents;
	}

	main.m-sg .m-sg__chartMain {
		grid-column: 1 / -1;
	}

	main.m-sg .m-sg__model {
		grid-column: 1;
		width: 100%;
		margin: 40px 0 0;
		justify-self: stretch;
	}

	main.m-sg > .m-sg__chart.has-model + .m-sg__section {
		grid-column: 2;
		margin-top: 40px;
		padding-top: 0;
		border-top: 0;
	}

	main.m-sg > .m-sg__chart.has-model + .m-sg__section .m-sg__custom {
		width: 100%;
		max-width: none;
	}
}

/* --- Size guide selector (v2.6) ------------------------------------------
   The dark "Size chart" bar is gone (its heading stays for screen readers);
   the chart is picked from a row of quiet pills — hairline outline, the
   current one filled in ink. One row that swipes on phones, wraps above. */
.m-sg__bar.screen-reader-text {
	position: absolute;
	margin: 0;
	padding: 0;
}

.m-sg__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 2rem;
	padding: 0;
	border: 0;
}

.m-sg__tab,
.m-sg__tab:hover {
	display: inline-flex;
	align-items: center;
	min-height: 38px;
	margin: 0;
	padding: 0 18px;
	border: 1px solid var(--m-line, #d7d2c5);
	border-radius: 999px;
	background: transparent;
	font: 500 11px/1 var(--m-sans);
	letter-spacing: .12em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--m-muted, #706f62);
	cursor: pointer;
	transition: background-color .25s, color .25s, border-color .25s;
}

.m-sg__tab:hover {
	border-color: var(--m-ink);
	color: var(--m-ink);
}

.m-sg__tab.is-current,
.m-sg__tab.is-current:hover {
	border-color: var(--m-ink);
	background: var(--m-ink);
	color: var(--m-paper, #f5f2eb);
}

.m-sg__tab:focus-visible {
	outline: 2px solid var(--m-rust, #93563f);
	outline-offset: 2px;
}

@media (max-width: 767px) {
	.m-sg__tabs {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
		margin: 0 calc(-1 * var(--m-gutter)) 1.5rem;
		padding: 0 var(--m-gutter);
	}

	.m-sg__tabs::-webkit-scrollbar {
		display: none;
	}

	.m-sg__tab {
		flex: 0 0 auto;
		min-height: 36px;
		padding: 0 14px;
		font-size: 10px;
	}
}

@media (min-width: 768px) and (max-width: 1023px) {
	/* Tablet: How to measure beside the photo, and the custom-fit note on a
	   full-width row beneath both — words left, link right. */
	main.m-sg > .m-sg__chart.has-model + .m-sg__section,
	main.m-sg > .m-sg__chart.has-model + .m-sg__section .m-sg__measure {
		display: contents;
	}

	main.m-sg > .m-sg__head {
		grid-row: 1;
	}

	main.m-sg .m-sg__chartMain {
		grid-row: 2;
	}

	main.m-sg .m-sg__model {
		grid-column: 1;
		grid-row: 3 / span 2;
	}

	main.m-sg > .m-sg__chart.has-model + .m-sg__section .m-sg__label {
		grid-column: 2;
		grid-row: 3;
		margin-top: 40px;
	}

	main.m-sg > .m-sg__chart.has-model + .m-sg__section .m-sg__steps {
		grid-column: 2;
		grid-row: 4;
	}

	main.m-sg .m-sg__measure .m-sg__custom {
		grid-column: 1 / -1;
		grid-row: 5;
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		column-gap: 40px;
		align-items: center;
		width: 100%;
		max-width: none;
		margin-top: 48px;
	}

	main.m-sg .m-sg__customTitle,
	main.m-sg .m-sg__customText {
		grid-column: 1;
	}

	main.m-sg .m-sg__customLink {
		grid-column: 2;
		grid-row: 1 / span 2;
		align-self: center;
		margin: 0;
		white-space: nowrap;
	}
}

@media (min-width: 768px) and (max-width: 1023px) {
	/* Tablet product page: the phone carousel, with narrower slides so a
	   photograph fits the screen and the next one shows beside it. */
	.m-pdp__gallery .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image {
		flex: 0 0 62%;
	}
}

@media (max-width: 1023px) {
	/* Story headline below desktop: no forced break, so it runs on one line
	   where it fits and wraps evenly where it does not. */
	.m-story__heading br {
		display: none;
	}

	.m-story__heading {
		text-wrap: balance;
	}
}

@media (max-width: 767px) {
	/* The headline has a max width; centre the box, not just its text. */
	body.home .m-story__heading {
		margin-left: auto;
		margin-right: auto;
	}
}

/* ==========================================================================
   Orders (v2.7): the payment result panel and the Track order page
   One quiet panel per state: a ringed icon, the order number, a Cormorant
   headline, a plain sentence, then the next step as a button. Ok is ink,
   waiting is muted, failed is rust.
   ========================================================================== */

.m-result-wrap {
	max-width: 640px;
	margin: 0 auto;
}

.m-result {
	--m-result-tone: var(--m-ink);
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 8px 0 40px;
	text-align: center;
}

.m-result--wait {
	--m-result-tone: var(--m-label);
}

.m-result--bad {
	--m-result-tone: var(--m-rust, #93563f);
}

.m-result__icon {
	display: grid;
	place-items: center;
	width: 60px;
	height: 60px;
	margin: 0 0 22px;
	border: 1px solid var(--m-result-tone);
	border-radius: 50%;
	color: var(--m-result-tone);
}

.m-result__eyebrow {
	margin: 0 0 10px;
	font: 500 11px/1.4 var(--m-sans);
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--m-label);
}

.m-result__title,
.m-track__status {
	margin: 0;
	font: 400 clamp(34px, 4vw, 46px)/1.08 'Cormorant', Georgia, serif;
	letter-spacing: -.01em;
	color: var(--m-result-tone, var(--m-ink));
}

.m-result__note {
	max-width: 30rem;
	margin: 14px auto 0;
	font: 400 14px/1.75 var(--m-sans);
	color: var(--m-label);
}

.m-result__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin: 28px 0 0;
}

.m-result__btn,
.m-result__btn:visited {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0 28px;
	border: 1px solid var(--m-ink);
	border-radius: 0;
	background: var(--m-ink);
	font: 500 11px/1 var(--m-sans);
	letter-spacing: .16em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--m-paper, #f5f2eb);
	cursor: pointer;
	transition: background-color .25s, color .25s;
}

.m-result__btn:hover {
	background: transparent;
	color: var(--m-ink);
}

.m-result__btn--ghost,
.m-result__btn--ghost:visited {
	background: transparent;
	color: var(--m-ink);
}

.m-result__btn--ghost:hover {
	background: var(--m-ink);
	color: var(--m-paper, #f5f2eb);
}

.m-result__checking {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font: 400 13px/1.5 var(--m-sans);
	color: var(--m-label);
}

.m-result__checking::before {
	content: "";
	width: 14px;
	height: 14px;
	border: 1px solid var(--m-hairline);
	border-top-color: var(--m-ink);
	border-radius: 50%;
	animation: m-spin 1s linear infinite;
}

@keyframes m-spin {
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.m-result__checking::before {
		animation: none;
	}
}

/* --- Summary: four facts, then the pieces --------------------------------- */

.m-result__summary {
	border-top: 1px solid var(--m-hairline);
}

.m-result__facts {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
	margin: 0;
	padding: 24px 0;
	border-bottom: 1px solid var(--m-hairline);
}

.m-result__facts dt {
	margin: 0 0 6px;
	font: 500 10px/1.4 var(--m-sans);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--m-label);
}

.m-result__facts dd {
	margin: 0;
	font: 400 14px/1.5 var(--m-sans);
	color: var(--m-ink);
}

.m-result__items {
	margin: 0;
	padding: 0;
	list-style: none;
}

.m-result__item {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto auto;
	gap: 16px;
	align-items: baseline;
	padding: 16px 0;
	border-bottom: 1px solid var(--m-hairline);
	font: 400 14px/1.5 var(--m-sans);
	color: var(--m-ink);
}

.m-result__itemName small {
	display: block;
	margin-top: 2px;
	font-size: 12px;
	color: var(--m-label);
}

.m-result__itemQty {
	color: var(--m-label);
}

@media (max-width: 767px) {
	.m-result__facts {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		row-gap: 20px;
	}

	.m-result__actions {
		flex-direction: column;
		align-self: stretch;
	}

	.m-result__btn {
		width: 100%;
	}
}

/* Gateways' own thank-you notes (bank details and the like) under the panel. */
.m-result-wrap > section:not(.m-result):not(.m-result__summary),
.m-result-wrap > p {
	margin-top: 32px;
	font: 400 14px/1.7 var(--m-sans);
}

/* --- Email check before an older order is shown --------------------------- */

.m-verify {
	max-width: 420px;
	margin: 0 auto;
	text-align: center;
}

.m-verify__intro,
.m-verify__alt {
	font: 400 14px/1.7 var(--m-sans);
	color: var(--m-label);
}

.m-verify .form-row {
	display: flex;
	flex-direction: column;
	gap: 8px;
	text-align: left;
}

.m-verify input[type="email"] {
	min-height: 48px;
	padding: 0 14px;
	border: 1px solid var(--m-hairline);
	background: transparent;
	font: 400 14px/1 var(--m-sans);
}

.m-verify__alt a {
	color: var(--m-ink);
}

/* --- Track order ----------------------------------------------------------- */

.m-track {
	max-width: 640px;
	margin: 0 auto;
	padding: 72px var(--m-gutter) 120px;
	box-sizing: content-box;
}

.m-track__head {
	margin: 0 0 40px;
	text-align: center;
}

.m-track__title {
	margin: 0;
	font: 400 clamp(38px, 5vw, 56px)/1.05 'Cormorant', Georgia, serif;
	color: var(--m-ink);
}

.m-track__intro {
	max-width: 26rem;
	margin: 14px auto 0;
	font: 400 14px/1.7 var(--m-sans);
	color: var(--m-label);
}

.m-track__form {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
	gap: 16px;
	align-items: end;
}

.m-track__field {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
}

.m-track__field label {
	font: 500 10px/1.4 var(--m-sans);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--m-label);
}

.m-track__field input {
	width: 100%;
	min-height: 48px;
	padding: 0 14px;
	border: 1px solid var(--m-hairline);
	border-radius: 0;
	background: transparent;
	font: 400 15px/1 var(--m-sans);
	color: var(--m-ink);
	box-sizing: border-box;
}

.m-track__field input:focus {
	border-color: var(--m-ink);
	outline: none;
}

.m-track__submit {
	grid-column: 1 / -1;
	margin: 8px 0 0;
}

.m-track__submit .m-result__btn {
	width: 100%;
}

.m-track__result {
	margin-top: 48px;
}

.m-track__error {
	margin: 0;
	padding: 14px 16px;
	border-left: 2px solid var(--m-rust, #93563f);
	background: rgba(147, 86, 63, .06);
	font: 400 14px/1.6 var(--m-sans);
	color: var(--m-ink);
}

.m-track__card {
	--m-result-tone: var(--m-ink);
	padding-top: 40px;
	border-top: 1px solid var(--m-hairline);
	text-align: center;
}

.m-track__card--wait {
	--m-result-tone: var(--m-label);
}

.m-track__card--bad {
	--m-result-tone: var(--m-rust, #93563f);
}

/* Four steps on one line, a hairline running through the dots. */
.m-track__steps {
	position: relative;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	margin: 36px 0 8px;
	padding: 0;
	list-style: none;
}

.m-track__step {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	font: 500 10px/1.3 var(--m-sans);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--m-label);
}

.m-track__step::before {
	content: "";
	position: absolute;
	top: 5px;
	right: 50%;
	left: -50%;
	height: 1px;
	background: var(--m-hairline);
}

.m-track__step:first-child::before {
	display: none;
}

.m-track__step.is-done::before {
	background: var(--m-ink);
}

.m-track__dot {
	position: relative;
	z-index: 1;
	width: 11px;
	height: 11px;
	border: 1px solid var(--m-hairline);
	border-radius: 50%;
	background: var(--m-paper, #f5f2eb);
}

.m-track__step.is-done .m-track__dot {
	border-color: var(--m-ink);
	background: var(--m-ink);
}

.m-track__step.is-current {
	color: var(--m-ink);
}

.m-track__step.is-current .m-track__dot {
	box-shadow: 0 0 0 4px rgba(52, 55, 41, .12);
}

.m-track__ship {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin: 32px 0 0;
	padding: 18px 20px;
	border: 1px solid var(--m-hairline);
	text-align: left;
}

.m-track__shipLine {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 0;
	font: 400 13px/1.4 var(--m-sans);
	color: var(--m-label);
}

.m-track__shipLine strong {
	font-size: 16px;
	font-weight: 500;
	letter-spacing: .04em;
	color: var(--m-ink);
}

.m-track__card .m-result__items {
	margin-top: 32px;
	border-top: 1px solid var(--m-hairline);
	text-align: left;
}

.m-track__card .m-result__item {
	grid-template-columns: minmax(0, 1fr) auto;
}

.m-track__total {
	display: flex;
	justify-content: space-between;
	margin: 0;
	padding: 16px 0;
	font: 400 14px/1.5 var(--m-sans);
	color: var(--m-label);
}

.m-track__total strong {
	font-weight: 500;
	color: var(--m-ink);
}

.m-track__help {
	margin: 24px 0 0;
	font: 400 13px/1.6 var(--m-sans);
	color: var(--m-label);
}

.m-track__help a {
	color: var(--m-ink);
}

@media (max-width: 767px) {
	.m-track {
		padding-top: 48px;
		padding-bottom: 88px;
	}

	.m-track__form {
		grid-template-columns: 1fr;
	}

	.m-track__ship {
		flex-direction: column;
		align-items: stretch;
		text-align: center;
	}

	.m-track__ship .m-result__btn {
		width: 100%;
	}
}

/* Page link colours on the checkout and track pages outrank a lone class. */
.m-result-wrap a.m-result__btn,
.m-track a.m-result__btn,
.m-track button.m-result__btn,
.m-verify button.m-result__btn {
	color: var(--m-paper, #f5f2eb);
}

.m-result-wrap a.m-result__btn:hover,
.m-track a.m-result__btn:hover,
.m-track button.m-result__btn:hover,
.m-verify button.m-result__btn:hover,
.m-result-wrap a.m-result__btn--ghost {
	color: var(--m-ink);
}

.m-result-wrap a.m-result__btn--ghost:hover {
	color: var(--m-paper, #f5f2eb);
}

.m-result__address {
	padding: 20px 0 0;
}

.m-result__addressLabel {
	margin: 0 0 6px;
	font: 500 10px/1.4 var(--m-sans);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--m-label);
}

.m-result__address address {
	font: 400 14px/1.7 var(--m-sans);
	font-style: normal;
	color: var(--m-ink);
}

/* The result panel carries its own next steps; the header link would repeat them. */
.m-checkoutpage--received .m-checkoutpage__back--next {
	display: none;
}

/* --- Checkout, simplified (v2.7b) -------------------------------------------
   One delivery rate per address (inc/orders.php), so the shipping step has
   nothing to choose — its cost still shows in the order summary. Express
   pay buttons and the empty order-notes step go too. */
.wp-block-woocommerce-checkout-shipping-methods-block,
.wp-block-woocommerce-checkout-shipping-method-block,
.wp-block-woocommerce-checkout-express-payment-block,
.wc-block-components-express-payment-continue-rule,
.wp-block-woocommerce-checkout-additional-information-block:empty {
	display: none !important;
}

/* --- Checkout fields as lines (v2.7c) ---------------------------------------
   No boxes: every field is a single hairline underneath, on the page colour,
   its label sitting flush left above the line. The line darkens to ink on
   focus and turns rust when the field has an error. */
.m-checkoutpage .wc-block-components-text-input input[type],
.m-checkoutpage .wc-block-components-text-input input,
.m-checkoutpage .wc-blocks-components-select .wc-blocks-components-select__select,
.m-checkoutpage .wc-block-components-textarea,
.m-checkoutpage .wc-block-components-combobox .components-combobox-control input.components-combobox-control__input {
	border: 0;
	border-bottom: 1px solid var(--m-hairline);
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	padding-left: 0;
	padding-right: 0;
}

.m-checkoutpage .wc-blocks-components-select .wc-blocks-components-select__container {
	border-radius: 0;
	background: transparent;
}

.m-checkoutpage .wc-block-components-text-input label,
.m-checkoutpage .wc-blocks-components-select .wc-blocks-components-select__label,
.m-checkoutpage .wc-block-components-combobox .components-combobox-control label {
	left: 0;
}

.m-checkoutpage .wc-blocks-components-select .wc-blocks-components-select__expand {
	right: 0;
	left: auto;
}

.m-checkoutpage .wc-block-components-text-input input:focus,
.m-checkoutpage .wc-blocks-components-select .wc-blocks-components-select__select:focus,
.m-checkoutpage .wc-block-components-textarea:focus {
	border-bottom-color: var(--m-ink);
	outline: none;
	box-shadow: none;
}

.m-checkoutpage .wc-block-components-text-input.has-error input,
.m-checkoutpage .has-error .wc-blocks-components-select__select {
	border-bottom-color: var(--m-rust, #93563f);
}

/* The saved-address card and the payment choices: a line, not a box. */
.m-checkoutpage .wc-block-components-address-card {
	border: 0;
	border-bottom: 1px solid var(--m-hairline);
	border-radius: 0;
	padding-left: 0;
	padding-right: 0;
}

.m-checkoutpage .wc-block-components-radio-control--highlight-checked,
.m-checkoutpage .wc-block-components-radio-control--highlight-checked::after,
.m-checkoutpage .wc-block-components-radio-control-accordion-option,
.m-checkoutpage .wc-block-components-radio-control-accordion-option::after,
.m-checkoutpage .wc-block-components-radio-control__option::after {
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

.m-checkoutpage .wc-block-components-radio-control-accordion-option {
	border-bottom: 1px solid var(--m-hairline);
}

/* Order summary on checkout: no frame — the pieces, coupon and totals sit
   flush in the column, divided by the same hairlines as the form above. */
.m-checkoutpage .wp-block-woocommerce-checkout-order-summary-block,
.m-checkoutpage .checkout-order-summary-block-fill {
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	background: transparent;
}

.m-checkoutpage .checkout-order-summary-block-fill > *,
.m-checkoutpage .wc-block-components-order-summary,
.m-checkoutpage .wc-block-components-totals-wrapper,
.m-checkoutpage .wc-block-components-totals-item,
.m-checkoutpage .wc-block-components-panel__button,
.m-checkoutpage .wc-block-components-panel__content,
.m-checkoutpage .wp-block-woocommerce-checkout-order-summary-coupon-form-block,
.m-checkoutpage .wp-block-woocommerce-checkout-order-summary-totals-block {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

.m-checkoutpage .checkout-order-summary-block-fill {
	border-top: 1px solid var(--m-hairline) !important;
}

/* Apply: paper type on the ink button, not grey on ink. */
.m-checkoutpage .wc-block-components-totals-coupon__button,
.m-checkoutpage .wc-block-components-totals-coupon__button:disabled {
	color: var(--m-paper, #f5f2eb) !important;
}

.m-checkoutpage .wc-block-components-totals-coupon__button:disabled {
	opacity: .55;
}

.m-checkoutpage .wc-block-components-totals-coupon.wc-block-components-panel {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* Track order: the title in Chillax, the line under it in Cormorant. */
.m-track__title {
	font: 500 clamp(30px, 3.6vw, 42px)/1.1 var(--m-sans);
	letter-spacing: -.01em;
}

.m-track__intro {
	font: 400 19px/1.5 'Cormorant', Georgia, serif;
	color: var(--m-label);
}

/* ==========================================================================
   Homepage rhythm (v2.9)
   One step between sections — 96px on desktop, 72 on tablet, 56 on a phone —
   measured content to content, the same above the footer. A section's title
   sits 28 / 24 / 20px over what it introduces. The thin marquee under the
   hero is a strip, not a section, so the first section follows it at two
   thirds of a step. The manifesto takes the step above and below itself.
   ========================================================================== */

body.home {
	--h-space: 96px;
	--h-title-gap: 28px;
}

@media (max-width: 1023px) {
	body.home {
		--h-space: 72px;
		--h-title-gap: 24px;
	}
}

@media (max-width: 767px) {
	body.home {
		--h-space: 56px;
		--h-title-gap: 20px;
	}
}

body.home .m-marquee + * {
	margin-top: calc(var(--h-space) * .66);
}

body.home .m-diaries {
	padding-bottom: 0;
}

body.home .m-manifesto {
	padding-top: var(--h-space);
	padding-bottom: var(--h-space);
}

/* About: the page title in Chillax, as on Track order. */
.m-ab__headline {
	font: 500 clamp(30px, 3.6vw, 42px)/1.1 var(--m-sans) !important;
	letter-spacing: -.01em;
}

/* About: the line under the title in Cormorant, as on Track order. */
.m-ab__intro {
	font: 400 19px/1.5 'Cormorant', Georgia, serif !important;
	letter-spacing: 0;
}

/* About · From the archive: a size smaller, title and text. */
.m-ab__essay .m-ab__title {
	font-size: clamp(30px, 2.9vw, 44px);
}

.m-ab__essayBody {
	font-size: 14.5px;
	line-height: 1.9;
}

.m-ab__essayBody p:first-child::first-letter {
	font-size: 56px;
}

@media (max-width: 767px) {
	.m-ab__essay .m-ab__title {
		font-size: 27px;
	}

	.m-ab__essayBody {
		font-size: 14px;
	}

	.m-ab__essayBody p:first-child::first-letter {
		font-size: 50px;
	}
}

/* Blog, Shipping, Returns, Size guide and Contact: one page-title style —
   Chillax 400, sentence case, as on Track order. */
.m-blog__title,
.m-posthead__title,
.m-sg__title,
.m-chero__title,
.m-colls__title {
	font: 400 clamp(30px, 3.6vw, 42px)/1.1 var(--m-sans) !important;
	letter-spacing: -.01em !important;
	text-transform: none !important;
}

/* Contact on desktop: a breath between the header and the opening photo,
   a taller banner, and the words centred on it as on a phone. */
@media (min-width: 1024px) {
	.m-chero {
		min-height: 34rem;
		margin-top: 32px;
	}

	.m-chero__copy {
		align-items: center;
		text-align: center;
	}

	.m-chero__rule,
	.m-chero__intro {
		margin-left: auto;
		margin-right: auto;
	}
}

/* Contact banner: the intro a size up. */
.m-chero__intro {
	font-size: 16px !important;
	line-height: 1.7 !important;
}

@media (min-width: 1024px) {
	.m-chero__intro {
		max-width: 620px;
		font-size: 16px !important;
	}
}

/* Contact: the closing note a size up too. */
.m-cextra .m-entry p {
	font-size: 16px !important;
	line-height: 1.7 !important;
}

@media (min-width: 1024px) {
	.m-cextra .m-entry p {
		font-size: 17px !important;
	}
}

/* Contact banner on phones and tablets: the intro flows as one paragraph,
   slightly smaller, so it settles into four even lines. */
@media (max-width: 1023px) {
	.m-chero__intro {
		font-size: 15px !important;
		text-wrap: balance;
	}

	.m-chero__intro br {
		display: none;
	}

	.m-chero__copy {
		padding-left: 1rem;
		padding-right: 1rem;
	}
}

/* Contact banner: the rule under the title, twice as long. */
.m-chero__rule {
	width: 8rem;
}

/* Lookbook pages: section headings stay in Chillax, in normal case. */
body.single-mitesh_lookbook h2.wp-block-heading {
	letter-spacing: 0 !important;
	text-transform: none !important;
}

/* Lookbook: with the cover column gone, the concept runs as one centred column. */
.m-lbk__about {
	display: block !important;
}

.m-lbk__concept {
	max-width: 720px;
	margin: 0 auto;
	text-align: center;
}

.m-lbk__concept ul,
.m-lbk__concept ol {
	padding-left: 0;
	list-style: none;
}

/* Lookbook flipbook, larger: the book may take up to 92% of the screen's
   height (was 80%), and while it loads it holds a full 16:9 place. */
.m-pdfbook__stage {
	width: min(100%, calc(92vh * var(--m-pdf-spread, 1.7778)));
}

@media (min-width: 768px) {
	.m-pdfbook:not(.is-ready) .m-pdfbook__stage {
		aspect-ratio: 16 / 9;
	}
}

/* Lookbook flipbook: from a tablet up the book runs edge to edge, less a
   small margin, so the two facing pages can be as large as the screen allows. */
@media (min-width: 768px) {
	.m-lbk__flipbook--pdf {
		width: calc(100vw - 48px);
		max-width: none;
		margin-left: calc(50% - 50vw + 24px);
		margin-right: 0;
	}

	.m-pdfbook__stage {
		width: min(100%, calc(94vh * var(--m-pdf-spread, 1.7778)));
	}
}

/* Lookbook: title and line centred above the flipbook. */
.m-lbk__head {
	max-width: 720px;
	margin: 24px auto 36px;
	text-align: center;
}

.m-lbk__head .m-lbk__title {
	margin: 0;
}

.m-lbk__head .m-lbk__lead {
	margin: 12px 0 0;
}

/* Lookbook title: a size smaller, a step heavier. */
.m-lbk__head .m-lbk__title {
	font-size: clamp(28px, 2.8vw, 38px) !important;
	font-weight: 400 !important;
}