/*
 * Homepage sections.
 *
 * Tokens measured from the live WoodMart rendering: 1222px container, Rubik
 * 14px/1.6 on #777, headings #242424, accent #EA6801, buttons 12px/20px
 * uppercase 13px/600 square, rules rgba(0,0,0,.106).
 */

.mrn-home__inner {
	width: 100%;
	max-width: 1222px;
	margin-inline: auto;
	padding-inline: 15px;
}

.mrn-home-proof,
.mrn-home-invite,
.mrn-home-tiles,
.mrn-home-banners,
.mrn-home-quote,
.mrn-home-featured,
.mrn-home-spotlight,
.mrn-home-partner,
.mrn-home-posts,
.mrn-home-instagram {
	--mrn-accent: var(--wp--preset--color--primary, #ea6801);
	--mrn-heading: var(--wp--preset--color--heading, #242424);
	--mrn-body: var(--wp--preset--color--body, #767676);
	--mrn-rule: var(--wp--custom--rule, rgba(0, 0, 0, 0.106));
	padding-block: 60px;
}

/*
 * The page is a run of full-bleed grounds, so nothing may sit between two of
 * them. The post-content wrapper is a flow layout and was giving every section
 * a 20px block gap, which is invisible between two white sections and reads as
 * a white seam every time a paper section meets anything - the thin light
 * stripe above and below each quote. The grounds butt directly now.
 */
.mrn-home-proof,
.mrn-home-invite,
.mrn-home-heading,
.mrn-home-tiles,
.mrn-home-banners,
.mrn-home-quote,
.mrn-home-featured,
.mrn-home-spotlight,
.mrn-home-partner,
.mrn-home-posts,
.mrn-home-instagram { margin-block: 0; }

/*
 * Two grounds, one rule: paper is a voice, white is the work. The evidence
 * band and the author quotes are the house and its authors speaking, so they
 * take paper. The catalogue, the spotlights, the blog and the partner block
 * are the work itself, so they stay white.
 *
 * The alternation was previously incidental - paper meant "this is a quote" -
 * which put two paper sections back to back at the top of the page and left a
 * 2,200px white run with an unexplained paper island in the middle of it.
 */
/*
 * Settled: white is the page, and paper has to earn its place.
 *
 * A ground change now means "this is a different kind of block", so the page
 * gets exactly one - the partner invitation, which is the only section asking
 * for something rather than showing something. The quotes lost their fill; they
 * are content, and content sits on the page.
 */
.mrn-home-invite { background: var(--wp--preset--color--surface, #f7f1e8); }

/*
 * A heading belongs to the section under it, so the two share one block of
 * space rather than stacking two paddings and drifting apart.
 */
.mrn-home-heading { padding-block: 60px 0; text-align: center; }
.mrn-home-heading + section { padding-top: 24px; }
.mrn-home-heading__eyebrow { margin: 0 0 6px; color: var(--wp--preset--color--primary, #ea6801); font-size: 14px; font-weight: 600; text-transform: uppercase; }
.mrn-home-heading__title { margin: 0; color: var(--wp--preset--color--heading, #242424); font-size: 32px; font-weight: 400; }

/* tiles */
.mrn-home-tiles__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }
.mrn-tile { position: relative; display: block; padding-inline: 20px; text-align: center; text-decoration: none; }
.mrn-tile:not(:first-child)::before { content: ""; position: absolute; top: 8px; bottom: 8px; left: -15px; width: 1px; background: var(--mrn-rule); }
.mrn-tile__icon { width: 72px; height: 72px; padding: 16px; border-radius: 50%; background: var(--wp--preset--color--surface, #f7f1e8); object-fit: contain; }
.mrn-tile__title { margin: 12px 0 6px; color: var(--mrn-heading); font-size: 16px; font-weight: 600; text-transform: uppercase; }
.mrn-tile__text { margin: 0 0 8px; color: var(--mrn-body); font-size: 14px; line-height: 1.6; }
.mrn-tile__more { color: var(--mrn-accent); font-size: 13px; font-weight: 600; text-transform: uppercase; }

/* banners */
.mrn-home-banners__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.mrn-banner { position: relative; display: block; overflow: hidden; text-decoration: none; }
.mrn-banner__bg { display: block; width: 100%; height: auto; transition: transform .5s ease; }
.mrn-banner:hover .mrn-banner__bg { transform: scale(1.04); }
/*
 * An inset translucent panel, matching the original: the photo shows through
 * around the edges while the copy sits on a light field. A dark gradient was
 * the first attempt and read as a completely different design.
 */
.mrn-banner__body { position: absolute; inset: 22px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 24px 20px; background: rgba(255,255,255,.86); text-align: center; }
.mrn-banner__eyebrow { color: var(--mrn-accent); font-size: 16px; font-weight: 600; text-transform: uppercase; }
.mrn-banner__title { color: #000; font-size: 14px; line-height: 1.6; }
.mrn-banner__cta { margin-top: 4px; padding-bottom: 2px; border-bottom: 2px solid var(--mrn-accent); color: #000; font-size: 13px; font-weight: 600; text-transform: uppercase; }

/* quotes -- ground is assigned with the other grounds above */
.mrn-quote { display: grid; grid-template-columns: 240px 1fr; gap: 45px; align-items: center; max-width: 1080px; }
.mrn-quote__portrait img { display: block; width: 100%; height: auto; border-radius: 50%; }
.mrn-quote__body { margin: 0; }
.mrn-quote__text { margin: 0 0 14px; color: var(--mrn-heading); font-size: clamp(22px, 2.3vw, 28px); font-style: italic; line-height: 1.45; }
.mrn-quote__author { display: block; margin-bottom: 12px; color: var(--mrn-accent); font-size: 14px; font-style: normal; font-weight: 600; }
.mrn-quote__bio { margin: 0; color: var(--mrn-body); font-size: 14px; line-height: 1.7; }

/* featured books */
.mrn-home-featured__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; max-width: 1080px; }
.mrn-featured { display: block; overflow: hidden; }
.mrn-featured img { display: block; width: 100%; height: auto; transition: transform .4s ease; }
.mrn-featured:hover img { transform: scale(1.04); }

/* spotlights */
.mrn-spotlight { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 55px; align-items: center; max-width: 1080px; }
.mrn-home-spotlight--image-right .mrn-spotlight__visual { order: 2; }
/*
 * Cap the cover by height, not by width. Capping width alone let a tall
 * artwork render 500x822 while the squarer one next to it rendered 448x560:
 * the same rule produced covers of visibly different size, and the tall one
 * pushed its section to 912px so that a single book outweighed everything
 * around it. Height is what the eye actually compares between two spotlights,
 * so height is what the rule holds - both now land on one 440px measure and
 * the artwork keeps its own proportions inside it.
 */
.mrn-spotlight__visual { display: flex; justify-content: center; }
.mrn-spotlight__visual img {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 440px;
	object-fit: contain;
}
.mrn-spotlight__eyebrow { margin: 0 0 6px; color: var(--mrn-accent); font-size: 14px; font-weight: 600; text-transform: uppercase; }
.mrn-spotlight__title { margin: 0 0 15px; color: var(--mrn-heading); font-size: 32px; font-weight: 400; line-height: 1.25; }
.mrn-spotlight__text { color: var(--mrn-body); font-size: 14px; line-height: 1.7; }
.mrn-spotlight__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 25px; }

/* buttons */
.mrn-button { display: inline-flex; align-items: center; justify-content: center; min-height: var(--wp--custom--control--height, 46px); padding: var(--wp--custom--control--padding, 12px 24px); border: 1px solid var(--mrn-accent); border-radius: var(--wp--custom--radius--button, 999px); font-size: 13px; font-weight: 600; letter-spacing: var(--wp--custom--control--tracking, .045em); text-decoration: none; text-transform: uppercase; transition: background-color .25s ease, border-color .25s ease, color .25s ease, transform .25s ease; }
.mrn-button:hover, .mrn-button:focus-visible { transform: translateY(-2px); }
.mrn-button--primary { background: var(--mrn-accent); color: #fff; }
.mrn-button--primary:hover, .mrn-button--primary:focus-visible { background: #c25601; border-color: #c25601; color: #fff; }
.mrn-button--secondary { background: #fff; color: var(--mrn-accent); }
.mrn-button--secondary:hover, .mrn-button--secondary:focus-visible { background: var(--mrn-accent); color: #fff; }

/* partner */
.mrn-partner { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(280px, .9fr) minmax(180px, .48fr); gap: 0; align-items: stretch; }
.mrn-partner__visual { min-height: 420px; overflow: hidden; background: #ede5d9; }
.mrn-partner__visual img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: left center; }
.mrn-partner__body { display: flex; flex-direction: column; justify-content: center; padding: 42px 38px; background: #4a4a4a; }
.mrn-partner__eyebrow { margin: 0 0 6px; color: var(--mrn-accent); font-size: 14px; font-weight: 600; text-transform: uppercase; }
.mrn-partner__title { margin: 0 0 15px; color: #fff; font-size: 32px; font-weight: 400; }
.mrn-partner__text { margin-bottom: 20px; color: rgba(255,255,255,.78); font-size: 14px; line-height: 1.7; }
.mrn-partner__text p:first-child { margin-top: 0; }
.mrn-partner__marks { display: grid; grid-template-rows: repeat(2, minmax(0, 1fr)); background: #ede5d9; }
.mrn-partner__marks img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* blog */
.mrn-home-posts__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.mrn-post-card__image { display: block; overflow: hidden; border-radius: var(--wp--custom--radius--card, 22px); box-shadow: var(--wp--custom--shadow--card, 0 14px 40px rgba(36,32,28,.06)); transition: box-shadow .35s ease, transform .35s ease; }
.mrn-post-card__image:hover, .mrn-post-card__image:focus-visible { box-shadow: var(--wp--custom--shadow--lift, 0 18px 55px rgba(36,32,28,.11)); transform: translateY(var(--wp--custom--lift, -4px)); }
.mrn-post-card__image img { display: block; width: 100%; height: auto; transition: transform .4s ease; }
.mrn-post-card__image:hover img { transform: scale(1.04); }
.mrn-post-card__title { margin: 12px 0 4px; font-size: 16px; font-weight: 400; line-height: 1.4; }
.mrn-post-card__title a { color: var(--wp--preset--color--entity, #333); text-decoration: none; }
.mrn-post-card__title a:hover { color: var(--mrn-accent); }
.mrn-post-card__date { margin: 0; color: var(--mrn-body); font-size: 13px; }

/* instagram */
.mrn-home-instagram__handle { margin: 0 0 15px; text-align: center; font-size: 16px; font-weight: 600; text-transform: uppercase; }
.mrn-home-instagram__handle a { color: var(--mrn-accent); text-decoration: none; }
.mrn-home-instagram__grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.mrn-home-instagram__grid img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }

@media (max-width: 1024px) {
	.mrn-home-tiles__grid, .mrn-home-featured__grid { grid-template-columns: repeat(2, 1fr); }
	.mrn-tile:nth-child(odd)::before { display: none; }
	.mrn-home-banners__grid, .mrn-home-posts__grid { grid-template-columns: 1fr; }
	.mrn-spotlight { grid-template-columns: 1fr; gap: 30px; }
	.mrn-partner { grid-template-columns: 1.2fr 1fr; }
	.mrn-partner__marks { grid-column: 1 / -1; grid-template-columns: repeat(2, 1fr); grid-template-rows: none; }
	.mrn-partner__marks img { aspect-ratio: 16 / 9; }
	.mrn-home-spotlight--image-right .mrn-spotlight__visual { order: 0; }
	.mrn-home-instagram__grid { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 767px) {
	.mrn-home-tiles__grid, .mrn-home-featured__grid { grid-template-columns: 1fr; }
	.mrn-tile { padding: 10px 0 28px; }
	.mrn-tile::before { display: none; }
	.mrn-spotlight__visual img { max-height: 320px; }
	.mrn-quote { grid-template-columns: 1fr; }
	.mrn-quote__portrait { max-width: 180px; margin-inline: auto; }
	.mrn-quote__text { font-size: 20px; text-align: center; }
	.mrn-quote__author { text-align: center; }
	.mrn-home-instagram__grid { grid-template-columns: repeat(3, 1fr); }
	.mrn-spotlight__actions .mrn-button { flex: 1 1 145px; text-align: center; }
	.mrn-partner { grid-template-columns: 1fr; }
	.mrn-partner__visual { min-height: 280px; }
	.mrn-partner__body { padding: 34px 26px; }
	.mrn-partner__marks { grid-column: auto; }
}

.mrn-home-heading__text { margin: 8px auto 0; max-width: 70ch; color: var(--wp--preset--color--body, #767676); font-size: 14px; line-height: 1.7; }
.mrn-home-instagram__intro { margin: 0 auto 12px; max-width: 70ch; text-align: center; color: var(--wp--preset--color--body, #767676); font-size: 14px; line-height: 1.7; }

/*
 * Depth and zoom are atmosphere, never meaning. Everything here collapses when
 * the visitor has asked for less motion.
 */
@media (prefers-reduced-motion: reduce) {
	.mrn-post-card__image,
	.mrn-post-card__image img,
	.mrn-featured img,
	.mrn-banner__bg { transition: none; }

	.mrn-post-card__image:hover { transform: none; }
	.mrn-post-card__image:hover img,
	.mrn-featured:hover img,
	.mrn-banner:hover .mrn-banner__bg { transform: none; }
}

/* ------------------------------------------------------------------ proof */

/*
 * The evidence band, on white: the seals themselves are the paper here. The
 * previous version inverted that - white boxes floating on the paper ground -
 * which read as five generic cards rather than as credentials, and with five
 * items in a flexible row the fifth was orphaned onto a line of its own at
 * every desktop width. A fixed-width chip in a moving track cannot orphan,
 * because there is no row for it to fall out of.
 */
.mrn-home-proof { --mrn-seal-gap: 14px; }

.mrn-home-proof__inner { text-align: center; }

.mrn-home-proof__title {
	max-width: 26ch;
	margin: 0 auto 32px;
	color: var(--mrn-heading);
	font-size: 32px;
	font-weight: 400;
	line-height: 1.25;
	text-wrap: balance;
}

.mrn-home-proof__action { margin-top: 32px; text-align: center; }

/*
 * Full-bleed, so the track visibly continues past both edges rather than
 * stopping at the shell. The mask does the stopping instead: chips fade into
 * the ground at each end, which is what tells the eye the row is longer than
 * the window without drawing an edge to say so.
 */
.mrn-proof-ticker {
	position: relative;
	left: 50%;
	width: 100vw;
	margin-left: -50vw;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 90px, #000 calc(100% - 90px), transparent);
	mask-image: linear-gradient(90deg, transparent, #000 90px, #000 calc(100% - 90px), transparent);
}

.mrn-proof-ticker__track { display: flex; width: max-content; }

/*
 * Three identical copies, translated by exactly one third. The spacing is a
 * margin on the chip, never a flex gap: with a gap, one copy's width and one
 * third of the track's width differ by the gap, and the loop jumps every pass.
 *
 * 52s is a reading pace, not a carousel pace - about 30px a second. The Two-
 * Speed Rule puts content at the slow end, and a credential that hurries reads
 * as an advertisement.
 */
.mrn-proof-ticker__set {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
	animation: mrn-proof-scroll 52s linear infinite;
}

@keyframes mrn-proof-scroll {
	to { transform: translateX(-100%); }
}

.mrn-proof-ticker:hover .mrn-proof-ticker__set,
.mrn-proof-ticker:focus-within .mrn-proof-ticker__set { animation-play-state: paused; }

/*
 * A credential is a piece of paper laid on the page: warm paper inside a
 * hairline, square corners, the awarding body set as a fact underneath the
 * distinction. No gold, no ribbon, no rosette - the name is what a teacher
 * recognises, and ornament around a real distinction makes it look decorative.
 */
.mrn-seal {
	display: flex;
	flex-direction: column;
	gap: 5px;
	/*
	 * Top-aligned, not centred. Centring each chip's own block made the seal
	 * names sit on four different lines across the row, because the names run
	 * one to two lines and the issuers one to three. A register aligns where
	 * the eye reads, so every name starts on the same line and the issuer
	 * hangs below it.
	 */
	justify-content: flex-start;
	flex: 0 0 auto;
	width: 296px;
	min-height: 104px;
	margin-right: var(--mrn-seal-gap);
	padding: 18px 22px;
	border: 1px solid var(--mrn-rule);
	background: var(--wp--preset--color--surface, #f7f1e8);
	text-align: left;
}

.mrn-seal__name {
	color: var(--mrn-heading);
	font-family: var(--wp--preset--font-family--display, Literata, Georgia, serif);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.3;
}

.mrn-seal__issuer {
	color: var(--mrn-body);
	font-size: 12px;
	font-weight: 400;
	line-height: 1.5;
}

@media (max-width: 767px) {
	.mrn-seal { width: 252px; min-height: 96px; padding: 16px 18px; }
	.mrn-proof-ticker {
		-webkit-mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent);
		mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent);
	}
}

/*
 * Motion is never load-bearing for meaning. With reduced motion asked for, the
 * track stops being a track: the duplicate copies leave, and the five real
 * seals wrap and centre as a static group.
 */
@media (prefers-reduced-motion: reduce) {
	.mrn-proof-ticker {
		left: auto;
		width: auto;
		margin-left: 0;
		-webkit-mask-image: none;
		mask-image: none;
	}

	.mrn-proof-ticker__track {
		width: 100%;
		max-width: 1222px;
		margin-inline: auto;
		padding-inline: 15px;
	}

	.mrn-proof-ticker__set { animation: none; }
	.mrn-proof-ticker__set[aria-hidden="true"] { display: none; }
	.mrn-proof-ticker__set:first-child { flex-wrap: wrap; justify-content: center; width: 100%; }
	.mrn-seal { margin-bottom: var(--mrn-seal-gap); }
}

/* ----------------------------------------------------------------- invite */

.mrn-home-invite__inner { text-align: center; }

.mrn-home-invite__eyebrow {
	margin: 0 0 6px;
	color: var(--mrn-accent);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.mrn-home-invite__title {
	max-width: 34ch;
	margin: 0 auto 25px;
	color: var(--mrn-heading);
	font-size: 32px;
	font-weight: 400;
	line-height: 1.25;
	text-transform: uppercase;
}

.mrn-home-invite__text {
	max-width: 62ch;
	margin: 0 auto 25px;
	color: var(--mrn-body);
	font-size: 14px;
	line-height: 1.7;
}

@media (max-width: 767px) {
	.mrn-home-proof__list { grid-template-columns: 1fr; }
	.mrn-home-proof__title,
	.mrn-home-invite__title { font-size: 28px; }
}