/*
 * Marigold & Thread — demo stylesheet.
 *
 * Every colour is from build/06-images/demos/marigold-thread/design-tokens.json, sampled
 * from the mock rather than approximated by eye. The gold in particular was read off three
 * separate buttons in three separate bands and came back the same each time.
 *
 * SCOPING
 * -------
 * Everything is under .jsk-demo-body, the class the plugin's template puts on <body>.
 * Nothing here reaches the gallery, the admin bar or the rest of the site, and the site's
 * own stylesheet is never loaded on a demo, so there is nothing to fight with.
 *
 * NO THIRD-PARTY REQUESTS
 * -----------------------
 * No @import, no remote font, no remote image. verify_deploy.py fails the whole build if
 * the site loads any third-party host, so a convenient CDN reference here would break
 * production rather than just this page.
 *
 * SQUARE CORNERS ARE THE POINT
 * ----------------------------
 * The single strongest signal in this mock is that almost nothing is rounded: tiles, cards
 * and buttons are all 2-4px at most. The play school demo was pills at 14-24px throughout.
 * Two demos sharing one plugin have to look like different studios made them, and this is
 * the cheapest, most visible way that happens. Do not soften these.
 */

/* ---------------------------------------------------------------- tokens */

.jsk-demo-body {
	/* surfaces */
	--mt-page: #fcf9f5;
	--mt-surface: #fefefe;
	--mt-tile: #ebdfd4;
	--mt-blush: #f2e4d9;

	/* the maroon family, darkest last */
	--mt-maroon: #470e17;
	--mt-maroon-deep: #32060b;
	--mt-maroon-btn: #4b1019;
	--mt-cocoa: #271007;
	--mt-ink: #1b070a;

	/* metals */
	--mt-gold: #deb67c;
	--mt-gold-deep: #c09d6b;
	--mt-star: #edad3e;

	/* type colours */
	--mt-text: #1a1a1a;
	--mt-muted: #5a5553;
	--mt-on-dark: #ffffff;
	--mt-on-dark-muted: #e8d9cf;

	/* rhythm */
	--mt-gap: clamp(1rem, 2.5vw, 1.75rem);
	--mt-section: clamp(3rem, 7vw, 5.5rem);
	--mt-rule: rgba(71, 14, 23, 0.16);

	background: var(--mt-page);
	color: var(--mt-text);
	font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
	font-size: clamp(0.94rem, 0.9rem + 0.2vw, 1rem);
	line-height: 1.65;
	margin: 0;
	-webkit-font-smoothing: antialiased;
}

.jsk-demo-body * {
	box-sizing: border-box;
}

.jsk-demo-body img {
	max-width: 100%;
	height: auto;
	display: block;
}

/*
 * Headings state their own family, size and colour.
 *
 * Learned on the play school: an ancestor rule loses to an element rule, and any host
 * theme that styles h2 directly will win unless each heading says what it is.
 */
.jsk-demo-body h1,
.jsk-demo-body h2,
.jsk-demo-body h3,
.mt-wordmark__name {
	font-family: "Playfair Display", Georgia, "Times New Roman", serif;
	font-weight: 400;
	color: var(--mt-text);
	line-height: 1.15;
	margin: 0;
}

.mt-container {
	width: 100%;
	max-width: 1180px;
	margin-inline: auto;
	padding-inline: clamp(1rem, 4vw, 2.25rem);
}

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

/*
 * The rule-flanked section heading.
 *
 * In the mock a hairline runs out from each side of the heading to the container edge,
 * ending in a small diamond. Flex with two growing pseudo-elements does it without any
 * fixed widths, so it survives every string length and every breakpoint.
 */
.mt-heading {
	display: flex;
	align-items: center;
	gap: clamp(0.75rem, 3vw, 2rem);
	margin: 0 0 clamp(1.75rem, 4vw, 2.75rem);
}

.mt-heading::before,
.mt-heading::after {
	content: "";
	flex: 1;
	height: 1px;
	background: linear-gradient(to right, transparent, var(--mt-rule));
}

.mt-heading::after {
	background: linear-gradient(to left, transparent, var(--mt-rule));
}

.mt-heading h2 {
	font-size: clamp(1.15rem, 0.95rem + 0.9vw, 1.6rem);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	text-align: center;
	white-space: nowrap;
}

/* ---------------------------------------------------------------- buttons */

/*
 * Not <button> and not <a class=button> with a border-radius.
 *
 * KSES strips <button> from post content saved without unfiltered_html, so every control
 * on this page is an anchor or a span. The corners are 2px because the mock's are.
 */
.mt-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	padding: 0.85em 1.6em;
	border: 1px solid transparent;
	border-radius: 2px;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: default;
	transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.mt-btn--gold {
	background: var(--mt-gold);
	border-color: var(--mt-gold);
	color: var(--mt-maroon-deep);
}

.mt-btn--gold:hover {
	background: var(--mt-gold-deep);
	border-color: var(--mt-gold-deep);
}

.mt-btn--maroon {
	background: var(--mt-maroon-btn);
	border-color: var(--mt-maroon-btn);
	color: var(--mt-on-dark);
}

.mt-btn--maroon:hover {
	background: var(--mt-maroon-deep);
	border-color: var(--mt-maroon-deep);
}

/*
 * The outline button states BOTH its colours.
 *
 * On the live site an outline button inherited a token that resolved to the band colour
 * itself and rendered as an empty pill: text painted in the colour of the thing behind it,
 * 1:1 contrast, invisible in one scheme only. Nothing here inherits a text colour.
 */
.mt-btn--outline {
	background: transparent;
	border-color: rgba(255, 255, 255, 0.55);
	color: var(--mt-on-dark);
}

.mt-btn--outline:hover {
	border-color: var(--mt-on-dark);
	background: rgba(255, 255, 255, 0.08);
}

.mt-arrow {
	font-size: 1.1em;
	line-height: 1;
}

/* ---------------------------------------------------- 01 announcement bar */

.mt-announce {
	background: var(--mt-ink);
	color: var(--mt-on-dark-muted);
	font-size: 0.7rem;
	letter-spacing: 0.04em;
}

.mt-announce__inner {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.5rem 1.5rem;
	padding-block: 0.6rem;
}

.mt-announce__links {
	display: flex;
	gap: 1.5rem;
}

.mt-announce span {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
}

/* ---------------------------------------------------------- 02 the header */

.mt-header {
	background: var(--mt-page);
	border-bottom: 1px solid var(--mt-rule);
	position: sticky;
	top: 0;
	z-index: 20;
}

.mt-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: clamp(1rem, 3vw, 2.5rem);
	padding-block: 0.9rem;
}

.mt-wordmark {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.15rem;
	text-decoration: none;
	flex: none;
}

.mt-wordmark .mt-ico {
	color: var(--mt-gold);
	font-size: 1.45rem;
}

.mt-ico--marigold { --mt-i: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 21c0-6 3-10 8-11-1 6-4 10-8 11Z%22/%3E%3Cpath d=%22M12 21c0-6-3-10-8-11 1 6 4 10 8 11Z%22/%3E%3Cpath d=%22M12 20c0-7 2-12 5-14-1 8-2 12-5 14Z%22/%3E%3Cpath d=%22M12 20c0-7-2-12-5-14 1 8 2 12 5 14Z%22/%3E%3Cpath d=%22M12 19V4%22/%3E%3C/svg%3E"); }
.mt-ico--truck { --mt-i: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M2.5 7h11v10h-11z%22/%3E%3Cpath d=%22M13.5 10h4l3.5 3.5V17h-7.5z%22/%3E%3Ccircle cx=%226.5%22 cy=%2218%22 r=%221.6%22/%3E%3Ccircle cx=%2217%22 cy=%2218%22 r=%221.6%22/%3E%3C/svg%3E"); }
.mt-ico--search { --mt-i: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2211%22 cy=%2211%22 r=%227%22/%3E%3Cpath d=%22m20 20-3.5-3.5%22/%3E%3C/svg%3E"); }
.mt-ico--heart { --mt-i: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 20s-7-4.5-7-9.5A4 4 0 0 1 12 8a4 4 0 0 1 7 2.5C19 15.5 12 20 12 20Z%22/%3E%3C/svg%3E"); }
.mt-ico--user { --mt-i: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%228%22 r=%223.6%22/%3E%3Cpath d=%22M5 20c0-3.6 3.1-6 7-6s7 2.4 7 6%22/%3E%3C/svg%3E"); }
.mt-ico--bag { --mt-i: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M6 8h12l-1 12H7L6 8Z%22/%3E%3Cpath d=%22M9 8V6a3 3 0 0 1 6 0v2%22/%3E%3C/svg%3E"); }
.mt-ico--shield { --mt-i: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 3 5 6v6c0 4.2 2.9 7.6 7 9 4.1-1.4 7-4.8 7-9V6l-7-3Z%22/%3E%3Cpath d=%22m9 12 2 2 4-4%22/%3E%3C/svg%3E"); }
.mt-ico--lock { --mt-i: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%225%22 y=%2211%22 width=%2214%22 height=%229%22 rx=%221.5%22/%3E%3Cpath d=%22M8.5 11V8a3.5 3.5 0 0 1 7 0v3%22/%3E%3C/svg%3E"); }
.mt-ico--pencil { --mt-i: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22m4 20 1-4 10-10 3 3-10 10-4 1Z%22/%3E%3Cpath d=%22m14.5 6.5 3 3%22/%3E%3C/svg%3E"); }
.mt-ico--gem { --mt-i: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22m12 4 7 5-7 11-7-11 7-5Z%22/%3E%3Cpath d=%22M5 9h14M12 4v16%22/%3E%3C/svg%3E"); }
.mt-ico--mail { --mt-i: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%223%22 y=%226%22 width=%2218%22 height=%2213%22 rx=%221.5%22/%3E%3Cpath d=%22m3.5 7 8.5 6.5L20.5 7%22/%3E%3C/svg%3E"); }
.mt-ico--instagram { --mt-i: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%224%22 y=%224%22 width=%2216%22 height=%2216%22 rx=%224.5%22/%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%223.6%22/%3E%3Ccircle cx=%2217%22 cy=%227%22 r=%221%22/%3E%3C/svg%3E"); }
.mt-ico--facebook { --mt-i: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M14.5 8h2V5.2h-2.3c-2.1 0-3.2 1.3-3.2 3.2V10H9v3h2v6h3v-6h2.2l.4-3H14V8.6c0-.4.2-.6.5-.6Z%22/%3E%3C/svg%3E"); }
.mt-ico--pinterest { --mt-i: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%228.5%22/%3E%3Cpath d=%22M11 17.5 12.4 12%22/%3E%3Cpath d=%22M10.4 10.2c0-1.4 1.1-2.4 2.4-2.4 1.4 0 2.4 1 2.4 2.5 0 1.9-1.1 3.3-2.5 3.3-.8 0-1.4-.6-1.2-1.4%22/%3E%3C/svg%3E"); }
.mt-ico--youtube { --mt-i: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%223.5%22 y=%226.5%22 width=%2217%22 height=%2211%22 rx=%223%22/%3E%3Cpath d=%22m10.5 9.8 4.5 2.7-4.5 2.7V9.8Z%22/%3E%3C/svg%3E"); }

.mt-wordmark__name {
	font-size: clamp(1.05rem, 0.9rem + 0.6vw, 1.45rem);
	letter-spacing: 0.14em;
	color: var(--mt-maroon-deep);
	line-height: 1;
}

.mt-wordmark__sub {
	font-size: 0.55rem;
	letter-spacing: 0.42em;
	text-indent: 0.42em;
	color: var(--mt-maroon);
	text-transform: uppercase;
}

/*
 * The nav stays on ONE line, and the search gives way instead.
 *
 * "MARIGOLD & THREAD" is more than twice the width of the mock's "AURELIA", so the header
 * row ran out of space at 1440 and wrapped "Contact" onto a line of its own -- which
 * looked like a broken header rather than a long name. A wrapping nav is never the right
 * answer here: below 860px it is hidden entirely and replaced by nothing, because a demo
 * does not need a working mobile menu to sell a design.
 */
.mt-nav {
	display: flex;
	gap: clamp(0.7rem, 1.6vw, 1.5rem);
	flex-wrap: nowrap;
	justify-content: center;
}

.mt-nav a {
	color: var(--mt-text);
	text-decoration: none;
	font-size: 0.82rem;
	padding-block: 0.35rem;
	border-bottom: 2px solid transparent;
	white-space: nowrap;
}

.mt-nav a:hover {
	color: var(--mt-maroon);
}

.mt-nav a[aria-current] {
	color: var(--mt-maroon);
	border-bottom-color: var(--mt-gold);
}

.mt-header__tools {
	display: flex;
	align-items: center;
	gap: clamp(0.6rem, 1.6vw, 1.1rem);
	flex: none;
}

/*
 * The search box is a div, and so is the newsletter field further down.
 *
 * Two reasons, and the second is the one that matters. KSES removes <input> from saved
 * post content, so a real field would vanish and leave an orphaned label. And a demo must
 * not present a field that looks live: someone would type a real name and a real email
 * into it and nothing would happen to either.
 */
.mt-search {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	flex: 0 1 auto;
	min-width: 0;
	max-width: clamp(130px, 16vw, 210px);
	padding: 0.5rem 0.75rem;
	border: 1px solid var(--mt-rule);
	border-radius: 2px;
	background: var(--mt-surface);
	color: var(--mt-muted);
	font-size: 0.78rem;
}

.mt-search__icon {
	margin-left: auto;
	color: var(--mt-maroon);
}

.mt-icon-btn {
	display: inline-flex;
	position: relative;
	color: var(--mt-text);
	text-decoration: none;
}

.mt-icon-btn__count {
	position: absolute;
	top: -6px;
	right: -8px;
	min-width: 15px;
	height: 15px;
	border-radius: 999px;
	background: var(--mt-gold);
	color: var(--mt-maroon-deep);
	font-size: 0.55rem;
	font-weight: 700;
	display: grid;
	place-items: center;
	padding-inline: 3px;
}

/* ------------------------------------------------------------- 03 the hero */

.mt-hero {
	background: var(--mt-maroon-deep);
	position: relative;
}

/*
 * A real carousel with no JavaScript.
 *
 * The mock shows three dots, and three dots that do nothing are a lie in the UI. Scroll
 * snap gives a working carousel the visitor can swipe or scroll, and the dots below are
 * anchors into it — so they move the track rather than decorating it.
 */
.mt-hero__track {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
}

.mt-hero__track::-webkit-scrollbar {
	display: none;
}

.mt-hero__slide {
	flex: 0 0 100%;
	scroll-snap-align: start;
	position: relative;

	/* Belt and braces: nothing inside a slide may paint outside the band, whatever a
	   later rule does to an image's height. */
	overflow: hidden;
	min-height: clamp(380px, 46vw, 560px);
	display: grid;
	align-items: center;
}

/*
 * THESE SELECTORS CARRY .jsk-demo-body FOR ONE REASON: SPECIFICITY.
 *
 * The reset near the top of this file says `.jsk-demo-body img { height: auto }`, which
 * is (0,1,1). A bare `.mt-hero__img` is (0,1,0) and LOSES, so `height: 100%` was ignored,
 * object-fit had no constrained box to work in, and the hero image rendered at its
 * natural ratio -- 792px inside a 560px band, hanging 232px below it with no scrim on it.
 * Reported as a seam across the picture when scrolling.
 *
 * Measured: slide 560, scrim 560, img 792.
 *
 * This is the ghost button again in a different costume. There the theme's element rule
 * beat an ancestor rule; here this file's own two-part reset beat a one-class rule twelve
 * lines later. A later rule does not win -- a more specific rule does.
 */
.jsk-demo-body .mt-hero__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 78% center;
}

/*
 * The scrim is what makes the headline legible, and it is not decoration.
 *
 * The generated slides were briefed to keep their left third dark and they do — measured
 * at a 95th-percentile luminance under 11 out of 255. This gradient is the guarantee that
 * a LATER slide, generated by someone else, cannot break the headline by being brighter.
 */
/*
 * THE SCRIM HAS TO COVER WHERE THE TEXT ACTUALLY GOES, NOT WHERE THE BRIEF SAID.
 *
 * The images were briefed to keep their LEFT THIRD dark and they do -- measured at a
 * 95th-percentile luminance under 11 of 255. Then this layout let the headline run to 67%
 * of the viewport at 1440 and 82% at 768, straight across the model's face.
 *
 * The brief and the layout disagreed about how much room the copy needed, and the brief
 * was the thing that got verified. Two facts, both true, and nobody checked them against
 * each other.
 *
 * So the scrim now holds to roughly half the frame before it starts to fall away, and the
 * copy column below is capped as a PERCENTAGE of the viewport rather than a fixed 34rem --
 * a fixed column is what made this worse as the screen got narrower.
 */
.mt-hero__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(to right, rgba(27, 7, 10, 0.95) 0%, rgba(27, 7, 10, 0.9) 34%, rgba(27, 7, 10, 0.62) 52%, rgba(27, 7, 10, 0.12) 74%, transparent 88%);
}

/*
 * THE HERO COPY IS LEFT-ANCHORED, NOT CENTRED IN THE CONTENT COLUMN.
 *
 * It carries .mt-container, which centres inside 1180px. That is right for the sections
 * below and wrong here: the hero image is full-bleed, so on a 2560px screen the band ran
 * edge to edge while the text sat in a 1180px box centred inside it -- roughly 690px of
 * empty maroon before the first word, with the model away at the far right.
 *
 * The padding below aligns the copy with the content column at ordinary desktop widths
 * and then STOPS following it:
 *
 *   (100vw - 1180px) / 2 + gutter   is exactly where .mt-container's content begins
 *   capped at 11rem                 so it cannot drift into the middle of a wide screen
 *
 * At 1440 that computes to ~158px, which is the column edge to the pixel. At 2560 it
 * stays at 176px instead of 726px. The mock does the same thing -- its text sits about a
 * tenth of the way in, because it is a percentage layout and not a fixed column.
 */
.mt-hero__copy {
	position: relative;
	padding-block: clamp(2.5rem, 6vw, 4rem);
	max-width: none;
	margin-inline: 0;
	padding-left: min(max(2.25rem, (100vw - 1180px) / 2 + 2.25rem), 11rem);
	padding-right: clamp(1rem, 4vw, 2.25rem);
}

/* The text itself still has a measure; only its left edge changed. */
.mt-hero__copy > * {
	max-width: min(32rem, 46vw);
}

.mt-eyebrow {
	font-size: 0.68rem;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--mt-gold);
	margin: 0 0 1rem;
}

/*
 * Slides two and three carry .mt-hero__title instead of an h1 -- same type, one heading
 * per page. See the note in 03-hero.php.
 */
.mt-hero h1,
.mt-hero__title {
	font-family: "Playfair Display", Georgia, "Times New Roman", serif;
	font-weight: 400;
	line-height: 1.15;
	font-size: clamp(2rem, 1.2rem + 3.6vw, 3.6rem);
	color: var(--mt-on-dark);
	margin: 0 0 1rem;
}

.mt-hero__lede {
	color: var(--mt-on-dark-muted);
	margin: 0 0 1.75rem;
	max-width: 26rem;
}

.mt-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.mt-hero__dots {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 1.25rem;
	display: flex;
	justify-content: center;
	gap: 0.5rem;
	z-index: 2;
}

.mt-hero__dots a {
	width: 8px;
	height: 8px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.4);
	display: block;
}

/*
 * Which dot is lit.
 *
 * Without the script the container has no data-js and the first dot is lit -- correct
 * until the visitor moves, which is the best a stylesheet can do. The script adds data-js
 * and maintains aria-current, and the fallback switches itself off.
 *
 * The rule that shipped first was `a:first-child` alone, so the first dot stayed gold on
 * every slide. That is the bug this pair replaces.
 */
.mt-hero__dots:not([data-js]) a:first-child,
.mt-hero__dots[data-js] a[aria-current] {
	background: var(--mt-gold);
	transform: scale(1.15);
}

.mt-hero__dots a {
	transition: background-color 0.2s ease, transform 0.2s ease;
}

/* ------------------------------------------------------- 04 shop by category */

.mt-cats {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: var(--mt-gap);
	list-style: none;
	margin: 0;
	padding: 0;
}

.mt-cat a {
	display: block;
	text-decoration: none;
	color: var(--mt-text);
	background: var(--mt-tile);
	border-radius: 3px;
	overflow: hidden;
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.mt-cat a:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 26px rgba(71, 14, 23, 0.16);
}

.mt-cat img {
	aspect-ratio: 1;
	object-fit: cover;
	width: 100%;
}

.mt-cat__label {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	padding: 0.8rem 0.5rem;
	background: var(--mt-page);
	font-size: 0.82rem;
}

/* ----------------------------------------------------- 05 featured collection */

.mt-heading--split {
	justify-content: space-between;
}

.mt-viewall {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	color: var(--mt-maroon);
	text-decoration: none;
	font-size: 0.8rem;
	white-space: nowrap;
	flex: none;
}

.mt-products {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--mt-gap);
	list-style: none;
	margin: 0;
	padding: 0;
}

.mt-product {
	background: var(--mt-surface);
	border: 1px solid var(--mt-rule);
	border-radius: 3px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.mt-product__media {
	position: relative;
}

.mt-product__media img {
	aspect-ratio: 1;
	object-fit: cover;
	width: 100%;
}

.mt-product__wish {
	position: absolute;
	top: 0.6rem;
	right: 0.6rem;
	width: 28px;
	height: 28px;
	display: grid;
	place-items: center;
	background: rgba(255, 255, 255, 0.9);
	border-radius: 999px;
	color: var(--mt-maroon);
}

.mt-product__body {
	padding: 0.85rem 0.9rem 1rem;
}

/*
 * Product name and price each state their colour.
 *
 * They sit on a white card inside a cream page, and the demo has to survive being viewed
 * in a dark-scheme browser: inheriting here is how a card ends up with near-white text on
 * near-white paper.
 */
.mt-product__name {
	font-family: "Montserrat", system-ui, sans-serif;
	font-size: 0.82rem;
	color: var(--mt-text);
	margin: 0 0 0.35rem;
}

.mt-product__price {
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--mt-maroon-deep);
	margin: 0 0 0.4rem;
}

.mt-rating {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.72rem;
	color: var(--mt-muted);
}

.mt-rating__stars {
	color: var(--mt-star);
	letter-spacing: 0.06em;
}

/* ------------------------------------------------------------ 06 moments band */

.mt-moments {
	background: var(--mt-blush);
	position: relative;
	overflow: hidden;
}

/*
 * The flourish is laid on the band's own colour.
 *
 * Its background was shifted at conversion time to exactly --mt-blush so no edge shows
 * where the image stops. One point per channel survives the WebP encode, which is below
 * what an eye resolves on flat colour; the six points it arrived with were not.
 */
.mt-moments__leaf {
	position: absolute;
	top: 0;
	left: 0;
	width: clamp(200px, 26vw, 360px);
	opacity: 0.85;
	pointer-events: none;
}

.mt-moments__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: clamp(1.5rem, 4vw, 3rem);
	position: relative;
}

.mt-moments__copy {
	padding-block: clamp(2rem, 5vw, 3.5rem);
}

.mt-occasions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.9rem;
	font-family: "Playfair Display", Georgia, serif;
	font-size: clamp(1.25rem, 0.9rem + 1.5vw, 2rem);
	color: var(--mt-maroon-deep);
	margin: 0 0 1rem;
}

.mt-occasions span[aria-hidden] {
	color: var(--mt-gold-deep);
	font-size: 0.6em;
}

.jsk-demo-body .mt-moments__img {
	width: 100%;
	height: 100%;
	min-height: clamp(260px, 30vw, 420px);
	object-fit: cover;
}

/* ------------------------------------------------------------- 07 why choose */

.mt-why {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	list-style: none;
	margin: 0;
	padding: 0;
}

.mt-why li {
	display: flex;
	align-items: flex-start;
	gap: 0.85rem;
	padding-inline: clamp(0.75rem, 2vw, 1.75rem);
	border-left: 1px solid var(--mt-rule);
}

.mt-why li:first-child {
	border-left: 0;
	padding-left: 0;
}

.mt-why .mt-ico {
	color: var(--mt-maroon);
	font-size: 1.7rem;
	margin-top: 0.1rem;
}

.mt-why strong {
	display: block;
	font-size: 0.86rem;
	font-weight: 600;
	color: var(--mt-text);
}

.mt-why span {
	font-size: 0.76rem;
	color: var(--mt-muted);
}

/* ------------------------------------------------------------- 08 showroom */

.mt-showroom {
	background: var(--mt-cocoa);
	position: relative;
	overflow: hidden;
}

.mt-showroom__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: clamp(1.5rem, 4vw, 3rem);
}

.mt-showroom__copy {
	padding-block: clamp(2.25rem, 5vw, 3.5rem);
	color: var(--mt-on-dark);
}

.mt-showroom h2 {
	color: var(--mt-on-dark);
	font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.25rem);
	margin-bottom: 0.75rem;
}

.mt-showroom p {
	color: var(--mt-on-dark-muted);
	margin: 0 0 1.5rem;
	max-width: 28rem;
}

.jsk-demo-body .mt-showroom__img {
	width: 100%;
	height: 100%;
	min-height: clamp(240px, 28vw, 380px);
	object-fit: cover;
}

/* ------------------------------------------------------------ 09 newsletter */

.mt-news {
	background: var(--mt-maroon);
	color: var(--mt-on-dark);
	position: relative;
	overflow: hidden;
}


.mt-news__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: clamp(1.25rem, 3vw, 2.5rem);
	padding-block: clamp(1.75rem, 4vw, 2.75rem);
	position: relative;
}

.mt-news__lead {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.mt-news__lead .mt-ico {
	color: var(--mt-gold);
	font-size: 2.1rem;
}

.mt-news h2 {
	color: var(--mt-on-dark);
	font-size: clamp(1.1rem, 0.95rem + 0.7vw, 1.5rem);
	margin-bottom: 0.2rem;
}

.mt-news__lead p {
	margin: 0;
	font-size: 0.8rem;
	color: var(--mt-on-dark-muted);
}

.mt-subscribe {
	display: flex;
	flex: 1 1 340px;
	max-width: 480px;
	border-radius: 2px;
	overflow: hidden;
}

.mt-subscribe__field {
	flex: 1;
	background: var(--mt-surface);
	color: var(--mt-muted);
	padding: 0.85rem 1rem;
	font-size: 0.82rem;
}

.mt-subscribe .mt-btn {
	border-radius: 0;
	flex: none;
}

.mt-news__note {
	flex-basis: 100%;
	margin: 0;
	font-size: 0.68rem;
	color: rgba(255, 255, 255, 0.55);
}

/* ---------------------------------------------------------------- 10 footer */

.mt-footer {
	background: var(--mt-ink);
	color: var(--mt-on-dark-muted);
}

.mt-footer__top {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	padding-block: clamp(1.75rem, 4vw, 2.5rem);
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.mt-footer .mt-wordmark__name {
	color: var(--mt-on-dark);
}

.mt-footer .mt-wordmark__sub {
	color: var(--mt-gold);
}

.mt-footer__nav {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem 1.4rem;
	justify-content: center;
}

.mt-footer__nav a,
.mt-footer__legal a {
	color: var(--mt-on-dark-muted);
	text-decoration: none;
	font-size: 0.78rem;
}

.mt-footer__nav a:hover,
.mt-footer__legal a:hover {
	color: var(--mt-gold);
}

.mt-social {
	display: flex;
	gap: 0.9rem;
}

.mt-social a {
	color: var(--mt-on-dark-muted);
	display: inline-flex;
}

.mt-social a:hover {
	color: var(--mt-gold);
}

.mt-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.6rem 1.5rem;
	padding-block: 1.1rem;
	font-size: 0.72rem;
}

.mt-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem 1.25rem;
}

/* ---------------------------------------------------------------- responsive */

/*
 * Three breakpoints, because the demo is checked at 360, 768 and 1440.
 *
 * The six-across category row and the four-across product row are the two that break
 * first; both step down rather than shrinking, because a jewellery photograph at 90px
 * wide sells nothing.
 */
@media (max-width: 1080px) {
	.mt-cats {
		grid-template-columns: repeat(3, 1fr);
	}

	.mt-why {
		grid-template-columns: repeat(2, 1fr);
		gap: 1.5rem 0;
	}

	.mt-why li:nth-child(3) {
		border-left: 0;
		padding-left: 0;
	}
}

@media (max-width: 860px) {
	.mt-nav,
	.mt-search {
		display: none;
	}

	.mt-products {
		grid-template-columns: repeat(2, 1fr);
	}

	.mt-moments__grid,
	.mt-showroom__grid {
		grid-template-columns: 1fr;
	}

	.jsk-demo-body .mt-moments__img,
	.jsk-demo-body .mt-showroom__img {
		min-height: clamp(220px, 45vw, 320px);
	}

	.mt-heading h2 {
		white-space: normal;
	}
}

/*
 * Below 860 there is no room for copy beside a face, so stop pretending there is: the
 * scrim goes vertical and the copy takes the full width over a darkened image. This used
 * to happen only below 560, which left the 560-860 range with a headline across a cheek.
 */
@media (max-width: 860px) {
	.mt-hero__copy {
		padding-left: clamp(1rem, 4vw, 2.25rem);
	}

	.mt-hero__copy > * {
		max-width: none;
	}

	.mt-hero__scrim {
		background: linear-gradient(to bottom, rgba(27, 7, 10, 0.62) 0%, rgba(27, 7, 10, 0.86) 48%, rgba(27, 7, 10, 0.95) 100%);
	}

	.jsk-demo-body .mt-hero__img {
		object-position: 62% center;
	}
}

@media (max-width: 560px) {
	.mt-cats {
		grid-template-columns: repeat(2, 1fr);
	}

	.mt-why {
		grid-template-columns: 1fr;
	}

	.mt-why li {
		border-left: 0;
		padding-left: 0;
	}

	.mt-announce__inner {
		justify-content: center;
		text-align: center;
	}

	.mt-subscribe {
		flex-basis: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.jsk-demo-body * {
		transition: none !important;
		scroll-behavior: auto !important;
	}
}

/* ---------------------------------------------------------------- icons */

/*
 * ICONS ARE CSS MASKS, NOT INLINE SVG IN THE CONTENT.
 *
 * They were inline <svg> first. KSES removed all twenty of them and their forty-two
 * children the moment the post was saved: every icon on the page vanished, the markup
 * still looked right in the pattern file, and the only clue was that the render had gaps
 * where icons should be. wp_insert_post() filters content for any user without
 * unfiltered_html, and svg is not on its allowlist.
 *
 * Moving them here fixes it for good. A stylesheet is never run through KSES, so these
 * survive any save by any user in any editor -- which matters most for the case these
 * patterns exist for: a client pasting one into their own site.
 *
 * The mask takes its colour from `background: currentColor`, so an icon inherits the
 * colour of the text beside it exactly as an inline SVG would have.
 */

.mt-ico {
	display: inline-block;
	width: 1em;
	height: 1em;
	flex: none;
	background: currentColor;
	-webkit-mask: var(--mt-i) center / contain no-repeat;
	mask: var(--mt-i) center / contain no-repeat;
}

















/* ------------------------------------------------- icon sizes in context */

/*
 * Each icon is sized by font-size, because .mt-ico is 1em square and painted in
 * currentColor. That is the whole reason it is a mask and not an <img>: it takes the
 * colour of the text beside it without anyone passing a colour anywhere.
 */

.mt-announce .mt-ico {
	font-size: 0.9rem;
}

.mt-search .mt-ico {
	margin-left: auto;
	color: var(--mt-maroon);
	font-size: 0.95rem;
}

.mt-icon-btn .mt-ico {
	font-size: 1.2rem;
}

.mt-product__wish .mt-ico {
	font-size: 0.88rem;
}

.mt-social .mt-ico {
	font-size: 1.15rem;
}

/* ------------------------------------------------------- spacing repairs */

/*
 * Two sections in a row each pay a full --mt-section of padding, so the gap between them
 * was twice what the mock shows and read as a hole in the page. Halve the join.
 */
.mt-section + .mt-section {
	padding-top: 0;
}

/*
 * The occasions line wrapped "Festive" onto a line of its own, leaving a dot dangling at
 * the end of the first. The separators are what should never end a line, so they are tied
 * to the word before them.
 */
/*
 * Each occasion is one unwrappable item, separator included.
 *
 * As flex siblings the dot could end a line while its word moved to the next, which is
 * what "Bridal - Anniversary - Everyday -" / "Festive" was. text-wrap: balance did not
 * help, because the problem was the item boundaries and not the line breaking.
 */
.mt-occ {
	white-space: nowrap;
}

.mt-occ span[aria-hidden] {
	color: var(--mt-gold-deep);
	font-size: 0.6em;
	vertical-align: middle;
}