/* Front page — "lab bench worksheet" layout.
 *
 * Constraints this file works under, chosen because the previous homepage was
 * a hero followed by three interchangeable card grids:
 *   BANNED  equal-size card grids as the primary rhythm
 *   BANNED  hairline rules as the main separator
 *   BANNED  a single row of oversized stat numbers
 *   BANNED  one accent colour doing all the work
 *   BANNED  h2 + small grey caption as every section head
 * Replacements: full-bleed bands that alternate ground, worksheet field rows,
 * a plotted control chart, editorial spreads, a dense index table, a colour
 * ladder, a spec matrix, and a horizontal shelf. Extraction state carries its
 * own semantic three-colour scale, separate from the amber brand accent.
 */

:root {
	--zone-under: #4E7FA8;
	--zone-ideal: #4C9A5B;
	--zone-over: #B4553C;
	--sheet-line: color-mix(in srgb, var(--text-muted) 28%, transparent);
}

/* ---- hero legibility ----
 * The fluid shader runs bright amber at full intensity, which drops the lede
 * and the worksheet labels well under AA against their real backdrop. A scrim
 * behind the content column (not a flat overlay on the whole canvas, which
 * would mute the signature effect) restores contrast while leaving the field
 * visible around the text. */
.mn-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background:
		linear-gradient(100deg,
			color-mix(in srgb, var(--bg-page) 88%, transparent) 0%,
			color-mix(in srgb, var(--bg-page) 72%, transparent) 42%,
			color-mix(in srgb, var(--bg-page) 22%, transparent) 72%,
			transparent 100%),
		linear-gradient(180deg, transparent 55%, color-mix(in srgb, var(--bg-page) 65%, transparent) 100%);
}
.mn-hero__lede { color: color-mix(in srgb, var(--text-main) 84%, var(--text-muted)); }

/* ---- worksheet field row (replaces the big-number stat bar) ---- */
.mn-sheet-fields {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: var(--space-5) var(--space-6);
	margin: var(--space-8) 0 0;
	padding: 0;
	max-width: 860px;
}
.mn-sheet-fields dt {
	font-family: var(--font-mono);
	font-size: var(--step--1);
	color: color-mix(in srgb, var(--text-main) 72%, var(--text-muted));
	margin-bottom: var(--space-2);
}
.mn-sheet-fields dd {
	margin: 0;
	padding-bottom: var(--space-2);
	border-bottom: 2px solid var(--border-accent);
	font-family: var(--font-mono);
	font-size: var(--step-2);
	color: var(--text-main);
	font-variant-numeric: tabular-nums;
}
.mn-sheet-fields dd i { font-style: normal; font-size: var(--step--1); color: var(--text-muted); }

/* ---- bands: alternating ground instead of hairline dividers ---- */
.mn-band { padding: var(--space-10) 0; background: var(--bg-page); }
.mn-band--alt { background: var(--bg-page-secondary); }
.mn-band--chart {
	background:
		radial-gradient(120% 100% at 80% 0%, var(--accent-glow-subtle) 0%, transparent 55%),
		var(--bg-page-secondary);
}
.mn-band--ladder { background: var(--bg-page-secondary); }
.mn-band--close {
	background: linear-gradient(180deg, var(--bg-page) 0%, var(--bg-page-secondary) 100%);
}
.mn-band__title { margin: var(--space-3) 0 var(--space-5); max-width: 22ch; }

/* ---- station marker (replaces the uppercase tracked eyebrow) ---- */
.mn-station {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	margin: 0;
	font-family: var(--font-mono);
	font-size: var(--step--1);
	color: var(--text-muted);
}
.mn-station span {
	display: inline-grid;
	place-items: center;
	min-width: 2.4em;
	padding: 0.25em 0.5em;
	background: var(--accent-primary);
	color: #1A120B;
	font-weight: 700;
	border-radius: 3px;
}
.mn-lede { color: var(--text-muted); max-width: 62ch; }
.mn-lede--wide { max-width: 78ch; }

/* ---- control chart ---- */
.mn-chart-layout {
	display: grid;
	grid-template-columns: minmax(280px, 26rem) 1fr;
	gap: var(--space-8);
	align-items: start;
}
.mn-chart-head h2 { margin: var(--space-3) 0 var(--space-4); }
.mn-zone-key { list-style: none; margin: var(--space-5) 0; padding: 0; display: grid; gap: var(--space-3); }
.mn-zone-key li {
	display: flex; align-items: center; gap: var(--space-3);
	font-size: var(--step--1); color: var(--text-muted);
}
.mn-zone-key__sw { width: 26px; height: 12px; border-radius: 3px; flex: none; }
.mn-zone-key__sw--under { background: color-mix(in srgb, var(--zone-under) 55%, transparent); }
.mn-zone-key__sw--ideal { background: color-mix(in srgb, var(--zone-ideal) 60%, transparent); }
.mn-zone-key__sw--over  { background: color-mix(in srgb, var(--zone-over) 55%, transparent); }

.mn-chart { margin: 0; }
.mn-chart__plot {
	position: relative;
	aspect-ratio: 16 / 10;
	min-height: 320px;
	border: 1px solid var(--border-glass);
	border-radius: var(--radius);
	background:
		linear-gradient(180deg, rgba(255,255,255,0.03), rgba(0,0,0,0.15)),
		var(--bg-card);
	overflow: hidden;
}
.mn-chart__zone { position: absolute; top: 0; bottom: 0; }
.mn-chart__zone--under { background: linear-gradient(90deg, color-mix(in srgb, var(--zone-under) 26%, transparent), transparent); }
.mn-chart__zone--over  { background: linear-gradient(270deg, color-mix(in srgb, var(--zone-over) 26%, transparent), transparent); }
.mn-chart__ideal {
	position: absolute;
	border: 1px dashed color-mix(in srgb, var(--zone-ideal) 75%, transparent);
	background: color-mix(in srgb, var(--zone-ideal) 16%, transparent);
	border-radius: 4px;
}
.mn-chart__ideal b {
	position: absolute; top: 6px; left: 8px;
	font-family: var(--font-mono); font-size: 0.7rem; font-weight: 600;
	color: color-mix(in srgb, var(--zone-ideal) 88%, white);
}
.mn-chart__rule {
	position: absolute; left: 0; right: 0; height: 0;
	border-top: 1px dotted color-mix(in srgb, var(--text-muted) 30%, transparent);
}
.mn-chart__rule em {
	position: absolute; left: 6px; top: -0.85em;
	font-family: var(--font-mono); font-size: 0.68rem; font-style: normal;
	color: var(--text-muted); font-variant-numeric: tabular-nums;
}
.mn-chart__lines {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	overflow: visible;
	pointer-events: none;
}
.mn-chart__dot {
	position: absolute;
	width: 16px; height: 16px;
	margin: -8px 0 0 -8px;
	border-radius: 50%;
	background: var(--dot, var(--accent-primary));
	box-shadow: 0 0 0 2px rgba(255,255,255,0.55), 0 3px 10px rgba(0,0,0,0.6);
	transition: transform 0.2s ease-out;
}
.mn-chart__dot:hover, .mn-chart__dot:focus-visible { transform: scale(1.45); z-index: 3; }
.mn-chart__label {
	position: absolute; left: 22px; top: 50%; transform: translateY(-50%);
	font-family: var(--font-mono); font-size: 0.66rem;
	color: var(--text-muted); white-space: nowrap;
	font-variant-numeric: tabular-nums;
	pointer-events: none;
}
.mn-chart__dot:hover .mn-chart__label, .mn-chart__dot:focus-visible .mn-chart__label { opacity: 0; }
.mn-chart__tip {
	position: absolute; bottom: 150%; left: 50%; transform: translateX(-50%);
	white-space: nowrap;
	padding: var(--space-2) var(--space-3);
	background: var(--bg-page);
	border: 1px solid var(--border-accent);
	border-radius: 8px;
	font-family: var(--font-mono); font-size: 0.7rem; color: var(--text-main);
	opacity: 0; pointer-events: none; transition: opacity 0.16s ease-out;
}
.mn-chart__tip b { display: block; color: var(--accent-highlight); }
.mn-chart__dot:hover .mn-chart__tip, .mn-chart__dot:focus-visible .mn-chart__tip { opacity: 1; }
.mn-chart figcaption {
	display: flex; justify-content: space-between; gap: var(--space-4);
	margin-top: var(--space-3);
	font-family: var(--font-mono); font-size: var(--step--1); color: var(--text-muted);
}
.mn-chart figcaption em { font-style: normal; opacity: 0.7; }

/* ---- bench station list (replaces the tool card grid) ---- */
.mn-bench { list-style: none; margin: 0; padding: 0; counter-reset: bench; }
.mn-bench__row + .mn-bench__row { margin-top: var(--space-3); }
.mn-bench__row a {
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: var(--space-5);
	align-items: start;
	padding: var(--space-5) var(--space-6);
	text-decoration: none;
	color: inherit;
	background: var(--bg-card);
	border-left: 3px solid var(--border-accent);
	border-radius: 0 var(--radius) var(--radius) 0;
	transition: background 0.2s ease-out, border-color 0.2s ease-out, transform 0.2s ease-out;
}
.mn-bench__row a:hover, .mn-bench__row a:focus-visible {
	background: color-mix(in srgb, var(--accent-primary) 9%, var(--bg-card));
	border-left-color: var(--accent-primary);
	transform: translateX(4px);
}
.mn-bench__no {
	font-family: var(--font-mono);
	font-size: var(--step-3);
	color: color-mix(in srgb, var(--accent-primary) 65%, transparent);
	line-height: 1;
	font-variant-numeric: tabular-nums;
}
.mn-bench__body { display: grid; gap: var(--space-2); }
.mn-bench__body strong { font-size: var(--step-2); }
.mn-bench__body code {
	font-family: var(--font-mono);
	font-size: var(--step--1);
	color: var(--accent-highlight);
	background: var(--badge-bg);
	border: 1px solid var(--badge-border);
	border-radius: 5px;
	padding: 0.2em 0.55em;
	justify-self: start;
}
.mn-bench__body em { font-style: normal; color: var(--text-muted); max-width: 72ch; }
.mn-bench__go { font-size: var(--step-2); color: var(--accent-primary); }

/* ---- editorial lot spreads ---- */
.mn-spread {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	align-items: stretch;
	margin-top: var(--space-8);
}
.mn-spread--flip .mn-spread__media { order: 2; }
.mn-spread__media { position: relative; min-height: 360px; }
.mn-spread__media img { width: 100%; height: 100%; object-fit: cover; }
.mn-spread__score {
	position: absolute; top: var(--space-5); left: var(--space-5);
	display: grid; place-items: center; gap: 2px;
	padding: var(--space-3) var(--space-4);
	background: var(--bg-page);
	border: 1px solid var(--border-accent);
	border-radius: var(--radius);
	font-family: var(--font-mono); font-size: var(--step-2);
	font-variant-numeric: tabular-nums;
	color: var(--accent-highlight);
}
.mn-spread__score i { font-style: normal; font-size: 0.62rem; color: var(--text-muted); letter-spacing: 0.08em; }
.mn-spread__sheet {
	padding: var(--space-8) clamp(var(--space-5), 5vw, var(--space-9));
	background: var(--bg-page);
	display: grid;
	align-content: center;
	gap: var(--space-4);
}
.mn-spread__where { margin: 0; font-family: var(--font-mono); font-size: var(--step--1); color: var(--accent-primary); }
.mn-spread__sheet h3 { margin: 0; font-size: var(--step-3); }
.mn-spread__sheet h3 a { color: inherit; text-decoration: none; }
.mn-spread__sheet h3 a:hover { color: var(--accent-highlight); }
.mn-spread__notes { margin: 0; color: var(--text-muted); }
.mn-spread__process { margin: 0; font-size: var(--step--1); color: var(--text-muted); }

.mn-sensory { display: grid; gap: var(--space-2); }
.mn-sensory__row {
	display: grid;
	grid-template-columns: 5.5rem 1fr 1.6rem;
	align-items: center;
	gap: var(--space-3);
	font-family: var(--font-mono);
	font-size: var(--step--1);
	color: var(--text-muted);
}
.mn-sensory__bar {
	height: 7px;
	background: color-mix(in srgb, var(--text-muted) 18%, transparent);
	border-radius: 4px;
	overflow: hidden;
}
.mn-sensory__bar i {
	display: block; height: 100%;
	background: linear-gradient(90deg, var(--accent-secondary), var(--accent-highlight));
}
.mn-sensory__row b { color: var(--text-main); font-variant-numeric: tabular-nums; text-align: right; }

.mn-mini-spec { width: 100%; border-collapse: collapse; font-size: var(--step--1); }
.mn-mini-spec th, .mn-mini-spec td {
	text-align: left;
	padding: var(--space-2) var(--space-3) var(--space-2) 0;
	border-bottom: 1px solid var(--sheet-line);
	vertical-align: top;
}
.mn-mini-spec th { color: var(--text-muted); font-weight: 500; white-space: nowrap; }
.mn-mini-spec td { font-family: var(--font-mono); color: var(--text-main); }

.mn-chip {
	display: inline-block; width: 11px; height: 11px;
	margin-right: 0.45em; border-radius: 3px;
	background: var(--sw, var(--accent-primary));
	box-shadow: inset 0 0 0 1px rgba(255,255,255,0.28);
	vertical-align: baseline;
}

/* ---- roast colour ladder ---- */
.mn-ladder {
	display: flex;
	gap: 2px;
	margin-top: var(--space-7);
	padding: 0 clamp(var(--space-4), 4vw, var(--space-8));
	overflow-x: auto;
	scrollbar-width: thin;
}
.mn-ladder__step {
	flex: 1 0 clamp(140px, 12vw, 210px);
	display: grid;
	gap: var(--space-2);
	padding: var(--space-4);
	text-decoration: none;
	color: inherit;
	background: var(--bg-card);
	transition: transform 0.2s ease-out;
}
.mn-ladder__step:hover, .mn-ladder__step:focus-visible { transform: translateY(-5px); }
.mn-ladder__chip {
	height: 72px;
	border-radius: 6px;
	background: var(--sw);
	box-shadow: inset 0 0 0 1px rgba(255,255,255,0.2);
}
.mn-ladder__val {
	font-family: var(--font-mono); font-size: var(--step-2);
	color: var(--text-main); font-variant-numeric: tabular-nums;
}
.mn-ladder__name { font-size: var(--step--1); line-height: 1.35; }
.mn-ladder__roast { font-family: var(--font-mono); font-size: 0.68rem; color: var(--text-muted); }

/* ---- dense index table ---- */
.mn-table-wrap { overflow-x: auto; margin-top: var(--space-6); }
.mn-index {
	width: 100%;
	min-width: 900px;
	border-collapse: collapse;
	font-size: var(--step--1);
}
.mn-index thead th {
	position: sticky; top: 0;
	text-align: left;
	padding: var(--space-3) var(--space-4);
	background: var(--bg-page-secondary);
	color: var(--text-muted);
	font-family: var(--font-mono);
	font-weight: 500;
	border-bottom: 2px solid var(--border-accent);
	white-space: nowrap;
}
.mn-index td {
	padding: var(--space-3) var(--space-4);
	border-bottom: 1px solid var(--sheet-line);
	vertical-align: middle;
}
.mn-index tbody tr:hover { background: color-mix(in srgb, var(--accent-primary) 7%, transparent); }
.mn-index td a { color: var(--text-main); text-decoration: none; font-weight: 600; }
.mn-index td a:hover { color: var(--accent-highlight); }
.mn-index .mn-num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mn-index tbody .mn-num b { color: var(--accent-highlight); }
.mn-table-note {
	margin-top: var(--space-4);
	font-size: var(--step--1);
	color: var(--text-muted);
	max-width: 80ch;
}
.mn-table-note a { color: var(--accent-primary); }

/* ---- dripper spec matrix ---- */
.mn-matrix {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	margin-top: var(--space-6);
	border-top: 2px solid var(--border-accent);
}
.mn-matrix__col { padding: var(--space-5) var(--space-5) var(--space-6); }
.mn-matrix__col + .mn-matrix__col { border-left: 1px solid var(--sheet-line); }
.mn-matrix__col h3 { margin: 0 0 var(--space-4); font-size: var(--step-1); }
.mn-matrix__col dl { margin: 0; display: grid; gap: var(--space-3); }
.mn-matrix__col dt {
	font-family: var(--font-mono); font-size: 0.68rem;
	color: var(--accent-primary);
}
.mn-matrix__col dd { margin: 2px 0 0; font-size: var(--step--1); color: var(--text-muted); }

/* ---- product shelf (replaces the 3-up product card grid) ---- */
.mn-shelf {
	display: flex;
	gap: var(--space-5);
	margin-top: var(--space-6);
	padding: var(--space-2) clamp(var(--space-4), 4vw, var(--space-8)) var(--space-5);
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scrollbar-width: thin;
}
.mn-shelf__item {
	flex: 0 0 clamp(180px, 20vw, 240px);
	scroll-snap-align: start;
	display: grid;
	gap: var(--space-2);
	text-decoration: none;
	color: inherit;
}
.mn-shelf__img {
	display: block;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border-radius: var(--radius);
	background: var(--bg-page-secondary);
	border-bottom: 3px solid transparent;
	transition: border-color 0.2s ease-out;
}
.mn-shelf__img img { width: 100%; height: 100%; object-fit: cover; }
.mn-shelf__item:hover .mn-shelf__img, .mn-shelf__item:focus-visible .mn-shelf__img { border-bottom-color: var(--accent-primary); }
.mn-shelf__item strong { font-size: var(--step-0); line-height: 1.3; }
.mn-shelf__price { font-family: var(--font-mono); font-size: var(--step--1); color: var(--accent-highlight); }
.mn-shelf__price del { color: var(--text-muted); }

/* ---- closing statement ---- */
.mn-close {
	display: grid;
	grid-template-columns: minmax(240px, 24rem) 1fr;
	gap: var(--space-8);
	align-items: start;
}
.mn-close h2 { margin: var(--space-3) 0 0; }
.mn-close__copy { display: grid; gap: var(--space-4); }
.mn-close__copy p { margin: 0; color: var(--text-muted); max-width: 68ch; }
.mn-close__cta { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* ---- responsive ---- */
@media (max-width: 900px) {
	.mn-chart-layout, .mn-close { grid-template-columns: 1fr; }
	.mn-spread { grid-template-columns: 1fr; }
	.mn-spread--flip .mn-spread__media { order: 0; }
	.mn-spread__media { min-height: 260px; }
	.mn-matrix__col + .mn-matrix__col { border-left: 0; border-top: 1px solid var(--sheet-line); }
	.mn-band { padding: var(--space-9) 0; }
}
@media (max-width: 620px) {
	.mn-bench__row a { grid-template-columns: auto 1fr; gap: var(--space-4); padding: var(--space-4); }
	.mn-bench__go { display: none; }
	.mn-sheet-fields { gap: var(--space-4); }
	.mn-chart__plot { min-height: 260px; aspect-ratio: 4 / 3; }
}