/*
 * MOREONYX Furniture Collection — stylesheet.
 *
 * ⛔ The network typography is fixed and is set here, not in a config file,
 * because it is a rule rather than a brand choice:
 *
 *     body      17px / 24.99px line height / -0.102px letter spacing
 *     headings  weight 600
 *     measure   max-width:30em  (em, never ch)
 *
 * ⛔ THE COLOURS ARE NOT HERE. The palette lives in config/moreonyx.php and is
 * written into :root by functions.php. Everything below reads the variables,
 * so this file holds no brand colour at all. Changing the brand means changing
 * the config, and no change here can reach another station.
 *
 * ⛔ THE BRAND GOLD IS NEVER A TEXT COLOUR. On the paper ground it measures
 * 2.17:1, which fails for body text. --gold is for rules and accents;
 * --gold-soft is the version that can carry words.
 */

:root {
	--ink: #16130F;
	--ink-soft: #3A342C;
	--paper: #F2ECE1;
	--paper-alt: #E9E1D3;
	--gold: #C9A86A;
	--gold-soft: #7A5C1E;
	--line: #D8CDB8;

	--body-size: 17px;
	--body-line: 24.99px;
	--body-track: -0.102px;
	--head-weight: 600;
	--measure: 30em;
	--font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;

	--gutter: clamp(20px, 5vw, 64px);
	--maxw: 1440px;
	--radius: 2px;
}

/* ── Reset ─────────────────────────────────────────────────────────── */

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

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

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--font);
	font-size: var(--body-size);
	line-height: var(--body-line);
	letter-spacing: var(--body-track);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

/* ⛔ THE MEASURE IS IN em. A sentence is allowed 30em of width. */
p, li, dd, dt, figcaption, td, th {
	max-width: var(--measure);
}

h1, h2, h3, h4, h5, h6 {
	font-weight: var(--head-weight);
	letter-spacing: -0.015em;
	line-height: 1.22;
	margin: 0 0 0.6em;
	text-wrap: balance;
}

h1 { font-size: clamp(34px, 5.2vw, 62px); }
h2 { font-size: clamp(26px, 3.2vw, 38px); }
h3 { font-size: clamp(21px, 2.2vw, 27px); }
h4 { font-size: 19px; }

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

hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }

blockquote {
	margin: 2rem 0;
	padding-left: 1.2rem;
	border-left: 2px solid var(--gold);
	font-size: 20px;
	line-height: 1.5;
}

/* ── Layout ────────────────────────────────────────────────────────── */

.mo-wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.mo-wrap--narrow { max-width: 900px; }

.mo-section { padding: clamp(48px, 7vw, 104px) 0; }
.mo-section--alt { background: var(--paper-alt); }
.mo-section--tight { padding: clamp(32px, 4vw, 56px) 0; }

.mo-section__head { margin-bottom: clamp(24px, 3vw, 44px); }
.mo-section__title { margin-bottom: 0.4em; }
.mo-section__body { color: var(--ink-soft); margin-top: 0.8em; }

.mo-kicker {
	font-size: 12px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--gold-soft);
	margin: 0 0 0.7em;
	font-weight: var(--head-weight);
}

/* ⛔ THE HERO H1 CARRIES THE SAME WEIGHT AS THE REST OF THE HEADINGS.
 * A general h1..h4 rule cannot reach it, so this rule is deliberately later
 * and the same specificity. */
.mo-hero h1,
.mo-page-head h1 {
	font-weight: var(--head-weight);
	letter-spacing: -0.015em;
}

/* ── Header ────────────────────────────────────────────────────────── */

.mo-header {
	position: sticky;
	top: 0;
	z-index: 60;
	background: rgba(242, 236, 225, 0.94);
	backdrop-filter: saturate(140%) blur(14px);
	border-bottom: 1px solid var(--line);
}

.mo-header__inner {
	display: flex;
	align-items: center;
	gap: clamp(16px, 3vw, 44px);
	min-height: 66px;
	flex-wrap: wrap;
}

.mo-brand {
	display: inline-flex;
	align-items: baseline;
	gap: 10px;
	text-decoration: none;
	font-weight: var(--head-weight);
	letter-spacing: 0.02em;
	flex: 0 0 auto;
}

.mo-brand__mark {
	font-size: 19px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
}

.mo-brand__sub {
	font-size: 11px;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--gold-soft);
}

.mo-nav { display: flex; gap: clamp(12px, 2vw, 30px); margin-left: auto; flex-wrap: wrap; }
.mo-nav a {
	text-decoration: none;
	font-size: 14px;
	letter-spacing: 0.02em;
	padding: 6px 0;
	border-bottom: 1px solid transparent;
}
.mo-nav a:hover { border-bottom-color: var(--gold); }
.mo-nav a.is-current { border-bottom-color: var(--gold); color: var(--gold-soft); }

.mo-header__actions { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; margin-left: auto; }

.mo-toggle {
	display: none;
	background: none;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 7px 11px;
	font: inherit;
	font-size: 13px;
	cursor: pointer;
	color: var(--ink);
}

/* ── Buttons ───────────────────────────────────────────────────────── */

.mo-btn {
	display: inline-block;
	padding: 11px 20px;
	border: 1px solid var(--ink);
	border-radius: var(--radius);
	background: var(--ink);
	color: var(--paper);
	text-decoration: none;
	font-size: 14px;
	letter-spacing: 0.03em;
	font-weight: var(--head-weight);
	cursor: pointer;
	line-height: 1.3;
}

.mo-btn:hover { background: var(--ink-soft); border-color: var(--ink-soft); color: var(--paper); }
.mo-btn--ghost { background: transparent; color: var(--ink); }
.mo-btn--ghost:hover { background: var(--ink); color: var(--paper); }
.mo-btn--wa { background: #1B7F3E; border-color: #1B7F3E; color: #fff; }
.mo-btn--wa:hover { background: #14612F; border-color: #14612F; color: #fff; }
.mo-btn--row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 1.6em; }

/* ── Hero ──────────────────────────────────────────────────────────── */

.mo-hero { padding: clamp(48px, 8vw, 120px) 0 clamp(36px, 5vw, 72px); }

.mo-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(28px, 5vw, 72px);
	align-items: end;
}

.mo-hero__lede { color: var(--ink-soft); margin-top: 1.2em; font-size: 19px; line-height: 1.55; }

/* ⛔ THE HERO'S CONTACT BUTTON IS ONLY SHOWN ON A PHONE. */
.mo-hero__contact { display: none; }

.mo-hero__figure { margin: 0; }
.mo-hero__figure img { width: 100%; border-radius: var(--radius); }

/* ── Cards ─────────────────────────────────────────────────────────── */

.mo-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: clamp(14px, 2vw, 26px);
}

.mo-grid--4 { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.mo-grid--3 { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.mo-grid--2 { grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); }

.mo-card {
	display: block;
	text-decoration: none;
	background: var(--paper-alt);
	border-radius: var(--radius);
	overflow: hidden;
	transition: transform .18s ease, box-shadow .18s ease;
}
.mo-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(22, 19, 15, 0.11); }

.mo-card__media {
	display: block;
	aspect-ratio: 4 / 3;
	background: #EDE6D9;
	overflow: hidden;
}
.mo-card__media img { width: 100%; height: 100%; object-fit: contain; padding: 6%; }

.mo-card__body { display: block; padding: 13px 14px 16px; }
.mo-card__stone { display: block; font-weight: var(--head-weight); font-size: 15px; }
.mo-card__name { display: block; color: var(--ink-soft); font-size: 13.5px; margin-top: 2px; }
.mo-card__size { display: block; color: var(--ink-soft); font-size: 12.5px; margin-top: 4px; font-variant-numeric: tabular-nums; }
.mo-card__code { display: block; color: var(--gold-soft); font-size: 11.5px; margin-top: 6px; letter-spacing: 0.08em; }

/* ── Page head ─────────────────────────────────────────────────────── */

.mo-page-head { padding: clamp(34px, 5vw, 68px) 0 clamp(20px, 3vw, 34px); }
.mo-page-head__lede { color: var(--ink-soft); font-size: 19px; line-height: 1.55; margin-top: 0.9em; max-width: var(--measure); }

.mo-breadcrumb { font-size: 13px; color: var(--ink-soft); margin-bottom: 1.4em; }
.mo-breadcrumb a { text-decoration: none; }
.mo-breadcrumb a:hover { text-decoration: underline; }
.mo-breadcrumb span { margin: 0 7px; color: var(--line); }

/* ── Filters ───────────────────────────────────────────────────────── */

.mo-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 16px 0;
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	margin: 8px 0 30px;
}
.mo-filters__label {
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--gold-soft);
	align-self: center;
	margin-right: 4px;
}
.mo-filters a {
	font-size: 13px;
	text-decoration: none;
	padding: 5px 11px;
	border: 1px solid var(--line);
	border-radius: 100px;
	color: var(--ink-soft);
}
.mo-filters a:hover { border-color: var(--gold); color: var(--ink); }
.mo-filters a.is-current { background: var(--ink); border-color: var(--ink); color: var(--paper); }

/* ── Piece (single product) ────────────────────────────────────────── */

.mo-piece { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: start; }

.mo-piece__media { background: var(--paper-alt); border-radius: var(--radius); padding: 6%; }
.mo-piece__media img { width: 100%; }

.mo-piece__title { margin-bottom: 0.25em; }
.mo-piece__stone { font-size: 13px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--gold-soft); margin-bottom: 1.2em; }

.mo-spec { width: 100%; border-collapse: collapse; margin: 0 0 1.8em; font-size: 15px; }
.mo-spec th, .mo-spec td { text-align: left; padding: 10px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.mo-spec th { font-weight: var(--head-weight); color: var(--ink-soft); width: 42%; }
.mo-spec td { max-width: none; }

.mo-note {
	background: var(--paper-alt);
	border-left: 2px solid var(--gold);
	padding: 15px 17px;
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--ink-soft);
	margin: 0 0 1.6em;
	max-width: var(--measure);
}

/* ── Answers ───────────────────────────────────────────────────────── */

.mo-answer { max-width: 780px; }
.mo-answer__lead {
	font-size: 20px;
	line-height: 1.58;
	color: var(--ink);
	margin-bottom: 2em;
	padding-bottom: 1.6em;
	border-bottom: 1px solid var(--line);
}

.mo-q { margin: 0 0 2.6em; }
.mo-q__title { font-size: 23px; margin-bottom: 0.6em; }
.mo-q__a { font-size: 17px; }

.mo-table { width: 100%; border-collapse: collapse; margin: 1.4em 0 0.8em; font-size: 15px; }
.mo-table caption { text-align: left; font-size: 13px; color: var(--ink-soft); padding-bottom: 8px; }
.mo-table th, .mo-table td { border-bottom: 1px solid var(--line); padding: 9px 12px 9px 0; text-align: left; vertical-align: top; max-width: none; }
.mo-table th { font-weight: var(--head-weight); color: var(--ink-soft); font-size: 13px; letter-spacing: 0.03em; }

.mo-sources { font-size: 12.5px; color: var(--ink-soft); margin: 0.6em 0 0; }
.mo-sources strong { color: var(--gold-soft); font-weight: var(--head-weight); letter-spacing: 0.04em; }

.mo-boundary {
	margin: 3em 0 0;
	padding: 20px 22px;
	background: var(--paper-alt);
	border-radius: var(--radius);
}
.mo-boundary__title {
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--gold-soft);
	margin: 0 0 0.7em;
	font-weight: var(--head-weight);
}
.mo-boundary p { font-size: 14.5px; line-height: 1.65; color: var(--ink-soft); margin: 0; }

/* ── Answer index ──────────────────────────────────────────────────── */

.mo-answer-list { display: grid; gap: 0; border-top: 1px solid var(--line); }
.mo-answer-list__item {
	display: block;
	text-decoration: none;
	padding: 20px 0;
	border-bottom: 1px solid var(--line);
}
.mo-answer-list__item:hover .mo-answer-list__title { color: var(--gold-soft); }
.mo-answer-list__title { font-size: 19px; margin: 0 0 5px; font-weight: var(--head-weight); }
.mo-answer-list__desc { color: var(--ink-soft); font-size: 15px; margin: 0; }
.mo-answer-list__meta { font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-soft); display: block; margin-bottom: 6px; }

/* ── Stone index ───────────────────────────────────────────────────── */

.mo-stone-index { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px 30px; }
.mo-stone-index__group { border-top: 1px solid var(--line); padding-top: 14px; }
.mo-stone-index__family { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-soft); margin: 0 0 12px; }
.mo-stone-index__item { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; font-size: 15px; }
.mo-stone-index__item a { text-decoration: none; }
.mo-stone-index__item a:hover { text-decoration: underline; }
.mo-stone-index__count { color: var(--ink-soft); font-variant-numeric: tabular-nums; font-size: 13.5px; }

/* ── Prose blocks ──────────────────────────────────────────────────── */

.mo-blocks { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(22px, 3vw, 44px); }
.mo-block h3 { font-size: 22px; margin-bottom: 0.5em; }
.mo-block p { color: var(--ink-soft); }
.mo-block a { color: var(--gold-soft); text-underline-offset: 3px; }

/* ── Footer ────────────────────────────────────────────────────────── */

.mo-footer {
	margin-top: clamp(50px, 7vw, 100px);
	border-top: 1px solid var(--line);
	background: var(--ink);
	color: var(--paper);
	padding: clamp(40px, 5vw, 72px) 0 28px;
}
.mo-footer a { color: var(--paper); text-decoration: none; }
.mo-footer a:hover { text-decoration: underline; text-underline-offset: 3px; }

.mo-footer__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 28px 32px; }
.mo-footer__title { font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); margin: 0 0 12px; font-weight: var(--head-weight); }
.mo-footer__list { list-style: none; margin: 0; padding: 0; }
.mo-footer__list li { margin-bottom: 7px; font-size: 14.5px; max-width: none; }

.mo-footer__base {
	margin-top: 36px;
	padding-top: 20px;
	border-top: 1px solid rgba(242, 236, 225, 0.18);
	display: flex;
	flex-wrap: wrap;
	gap: 14px 26px;
	justify-content: space-between;
	font-size: 13px;
	color: rgba(242, 236, 225, 0.72);
}
.mo-footer__base p { margin: 0; max-width: none; }

/* ⛔ The brand link on the footer is the point of this site on the network:
 * it is where the collection sends its readers to the wider brand. */
.mo-footer__brandlink { color: var(--gold); letter-spacing: 0.12em; text-transform: uppercase; font-size: 13px; }

/* ── Prose page ────────────────────────────────────────────────────── */

.mo-prose { max-width: 760px; }
.mo-prose h2 { margin-top: 2em; }
.mo-prose ul { padding-left: 1.2em; }
.mo-prose li { margin-bottom: 0.5em; }

/* ── Forms ─────────────────────────────────────────────────────────── */

.mo-form { display: grid; gap: 14px; max-width: 560px; }
.mo-form label { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold-soft); font-weight: var(--head-weight); }
.mo-form input, .mo-form textarea, .mo-form select {
	width: 100%;
	padding: 11px 13px;
	font: inherit;
	font-size: 16px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--paper);
	color: var(--ink);
}
.mo-form textarea { min-height: 130px; resize: vertical; }
.mo-form input:focus, .mo-form textarea:focus, .mo-form select:focus { outline: 2px solid var(--gold); outline-offset: 1px; }

/* ── Skip link + focus ─────────────────────────────────────────────── */

/* ⛔ THE SKIP LINK IS MOVED OUT OF THE VIEWPORT AND CLIPPED.
   Three attempts failed here and each one left a visible mark:

   1. left:-9999px — with no positioned ancestor the element still had a
      box at the origin, and a fragment of it sat in the corner.
   2. A one-pixel box with clip:rect(0,0,0,0) — the BOX was clipped, the
      TEXT was not, and the word "Skip to content" overflowed the box and
      painted a ">" in the corner of every page.
   3. clip-path: inset(50%) — clip-path clips the element's own painted
      content, and the text was OUTSIDE the one-pixel box, so it survived.
      The corner still showed the tip of a letter.

   What works is moving the whole thing out of the viewport AND clipping it,
   so that neither the box nor the text can be seen at the origin. The
   transform is used rather than a negative offset because it works without
   a positioned ancestor.
*/
.mo-skip {
	position: absolute;
	top: 0;
	left: 0;
	transform: translateY(-300%);
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
	background: var(--ink);
	color: var(--paper);
}
.mo-skip:focus {
	position: fixed;
	left: 8px;
	top: 8px;
	transform: none;
	width: auto;
	height: auto;
	margin: 0;
	overflow: visible;
	clip-path: none;
	padding: 10px 16px;
	z-index: 200;
}

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
	outline: 2px solid var(--gold);
	outline-offset: 2px;
}

/* ── Responsive ────────────────────────────────────────────────────── */

@media (max-width: 900px) {
	.mo-hero__grid { grid-template-columns: 1fr; }
	.mo-piece { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
	.mo-toggle { display: inline-block; }
	.mo-nav {
		display: none;
		width: 100%;
		order: 3;
		flex-direction: column;
		gap: 0;
		padding: 8px 0 14px;
	}
	.mo-nav.is-open { display: flex; }
	.mo-nav a { padding: 11px 0; border-bottom: 1px solid var(--line); }
	.mo-header__inner { flex-wrap: wrap; padding: 10px 0; gap: 10px; }

	/* ⛔ THE ENQUIRE BUTTON IS HIDDEN ON A PHONE, NOT CROPPED.
	   It is the second item in a flex row with a fixed gap, so at 390
	   pixels it wrapped onto a second line and hung off the right edge.
	   The contact route on a phone is the hero's own button and the footer,
	   so the header button is redundant there. */
	.mo-header__actions { margin-left: auto; }
	.mo-header__actions .mo-btn { display: none; }

	.mo-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
	.mo-card__body { padding: 10px 11px 13px; }
	.mo-card__stone { font-size: 14px; }
	.mo-card__size { font-size: 12px; }
	.mo-table { display: block; overflow-x: auto; white-space: nowrap; }
	.mo-answer__lead { font-size: 18px; }
	.mo-q__title { font-size: 20px; }
	.mo-hero__lede { font-size: 17px; }
	.mo-hero__contact { display: inline-block; }
	.mo-piece__media { padding: 4%; }
}

@media (prefers-reduced-motion: reduce) {
	* { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
	.mo-card:hover { transform: none; }
}

/* ── The enquiry form ───────────────────────────────────────────────── */

.mo-form__row { display: grid; gap: 6px; }
.mo-form__row label span { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--ink-soft); font-size: 12px; }
.mo-form__note { font-size: 13px; color: var(--ink-soft); margin: 4px 0 0; max-width: 52ch; }

.mo-form__done,
.mo-form__error {
	background: var(--paper-alt);
	border-left: 2px solid var(--gold);
	padding: 16px 18px;
	margin-bottom: 22px;
	max-width: 62ch;
}
.mo-form__done h3 { margin: 0 0 0.4em; font-size: 20px; }
.mo-form__done p,
.mo-form__error p { margin: 0; font-size: 15px; color: var(--ink-soft); }

/* ── The link chips ─────────────────────────────────────────────────── */

.mo-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.mo-chip {
	display: inline-flex;
	align-items: baseline;
	gap: 7px;
	border: 1px solid var(--line);
	border-radius: 999px;
	padding: 6px 13px;
	font-size: 13.5px;
	text-decoration: none;
	color: var(--ink);
	background: var(--paper);
}
.mo-chip:hover { border-color: var(--gold); color: var(--gold-soft); }
.mo-chip__count { font-size: 11.5px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }