/*
Theme Name: The Margins House
Theme URI: https://marginshouse.com/
Author: Freeform PR & Branding
Author URI: https://freeformprbranding.com/
Description: Lightweight custom theme for The Margins House, an independent publishing and media studio. Editable block-based pages, a Books & Originals catalog with author profiles, three inquiry forms with spam protection, and SEO foundations compatible with Rank Math.
Version: 1.1.2
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: margins-house
*/

/* Layout idea: a book page. A main text column plus a real "margin" column for editor's notes.
   The blue editing pencil is the only accent. Audio sections invert to ink. */

:root {
	--paper: #f4f5f2;
	--paper-2: #e9ebe6;
	--ink: #16191f;
	--ink-soft: #4a505b;
	--rule: #cfd3cc;
	--pencil: #2f4fcf;
	--pencil-wash: #e3e8fb;
	--band: #16191f;
	--on-ink: #eceee9;
	--on-ink-soft: #a7adb8;
	--on-ink-pencil: #8ea2ff;
	--signal: #1f3497;
	--on-signal: #f1f3ff;
	--on-signal-soft: #c3cbf5;
	--error: #b3261e;
	--ease: cubic-bezier(.2, .7, .2, 1);

	--f-display: "Libre Caslon Display", "Libre Caslon Text", Georgia, serif;
	--f-serif: "Libre Caslon Text", Georgia, "Times New Roman", serif;
	--f-sans: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
	--f-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;

	--measure: 42rem;
	--margin-col: 15rem;
	--max: 76rem;
	--gutter-l: max(16px, env(safe-area-inset-left, 0px));
	--gutter-r: max(16px, env(safe-area-inset-right, 0px));
	color-scheme: light;
}
@media (prefers-color-scheme: dark) {
	:root {
		--paper: #121419; --paper-2: #1b1e25; --ink: #eceee9; --ink-soft: #a7adb8;
		--rule: #2e333d; --pencil: #8ea2ff; --pencil-wash: #1f2742; --band: #07080b; --error: #ff8a80;
		--signal: #18245c; --on-signal-soft: #aeb8e8;
		color-scheme: dark;
	}
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0; background: var(--paper); color: var(--ink);
	font-family: var(--f-sans); font-size: 17px; line-height: 1.6;
	-webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, video, svg, canvas { max-width: 100%; height: auto; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--pencil); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }
.screen-reader-text, .mh-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link:focus { position: fixed; top: 8px; left: 8px; z-index: 100; width: auto; height: auto; clip: auto; padding: 0.6rem 1rem; background: var(--ink); color: var(--paper); }

.mh-wrap { max-width: var(--max); margin-inline: auto; padding-left: var(--gutter-l); padding-right: var(--gutter-r); }

h1, h2, h3, h4 { text-wrap: balance; font-weight: 400; margin: 0; }
h1 { font-family: var(--f-display); font-size: clamp(2.5rem, 6vw, 4.9rem); line-height: 1.03; letter-spacing: -0.01em; }
h2 { font-family: var(--f-display); font-size: clamp(1.85rem, 3.4vw, 2.7rem); line-height: 1.1; }
h3 { font-family: var(--f-serif); font-size: 1.2rem; line-height: 1.3; font-weight: 700; }
h4 { font-family: var(--f-serif); font-size: 1.05rem; font-weight: 700; }
p { margin: 0; }

/* ---------- Header ---------- */
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 30; background: var(--paper); }
.site-header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: var(--paper); border-bottom: 1px solid var(--rule); }
.admin-bar .site-header { top: calc(32px + env(safe-area-inset-top, 0px)); }
@media (max-width: 782px) { .admin-bar .site-header { top: 0; position: relative; } }
.mh-bar { display: flex; align-items: center; gap: 1.25rem; padding-block: 0.8rem; }
.mh-mark { display: flex; align-items: center; gap: 0.7rem; text-decoration: none; margin-right: auto; min-width: 0; }
.mh-mark img.custom-logo { width: auto; max-height: 42px; }
.mh-logo-slot { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border: 1.5px solid var(--ink); font-family: var(--f-display); font-size: 1.45rem; line-height: 1; }
.mh-mark-text { display: grid; line-height: 1.1; }
.mh-mark-text b { font-family: var(--f-display); font-weight: 400; font-size: 1.35rem; white-space: nowrap; }
.mh-mark-text small { font-family: var(--f-mono); font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); }

.mh-nav { order: 1; }
.mh-nav ul { list-style: none; margin: 0; padding: 0; }
.mh-nav > ul { display: flex; align-items: center; gap: 0.25rem; }
.mh-nav > ul > li { position: relative; }
.mh-nav > ul > li > a, .mh-nav .mh-dd-toggle {
	font: inherit; font-size: 0.92rem; color: var(--ink-soft); background: none; border: 0; cursor: pointer;
	text-decoration: none; padding: 0.45rem 0.7rem; display: inline-flex; align-items: center; gap: 0.35rem;
	border-bottom: 1.5px solid transparent;
}
.mh-nav > ul > li > a:hover, .mh-nav .mh-dd-toggle:hover, .mh-nav li.is-open > .mh-dd-toggle { color: var(--ink); }
.mh-nav > ul > li.current-menu-item > a, .mh-nav > ul > li.current-menu-ancestor > .mh-dd-toggle,
.mh-nav > ul > li.current-menu-parent > .mh-dd-toggle, .mh-nav > ul > li.current_page_ancestor > .mh-dd-toggle { color: var(--ink); border-bottom-color: var(--pencil); }
.mh-dd-toggle::after { content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); }
.mh-nav .sub-menu {
	position: absolute; left: 0; top: calc(100% + 0.5rem); min-width: 17rem; display: grid;
	visibility: hidden; opacity: 0; transform: translateY(-6px); transition: opacity .18s var(--ease), transform .18s var(--ease), visibility 0s linear .18s;
	background: var(--paper); border: 1px solid var(--rule); border-top: 1.5px solid var(--ink); padding: 0.5rem 0;
	box-shadow: 0 12px 30px -18px rgba(0,0,0,.35);
}
.mh-nav li.is-open > .sub-menu { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
.mh-nav .sub-menu a { text-decoration: none; padding: 0.55rem 1rem; display: grid; gap: 0.1rem; font-weight: 600; font-size: 0.93rem; }
.mh-nav .sub-menu a:hover, .mh-nav .sub-menu .current-menu-item > a { background: var(--paper-2); }
.mh-nav .sub-menu a .mh-desc { font-weight: 400; color: var(--ink-soft); font-size: 0.8rem; line-height: 1.35; }

.mh-menu-btn { display: none !important; }
.mh-bar > .mh-cta { order: 2; margin-left: 0.5rem; }

/* Buttons (theme + block buttons) */
.mh-btn, .mh-entry .wp-block-button__link, .mh-form button[type="submit"] {
	display: inline-flex; align-items: center; gap: 0.5rem;
	font-family: var(--f-sans); font-weight: 600; font-size: 0.95rem; line-height: 1.3;
	padding: 0.75rem 1.2rem; border-radius: 2px; text-decoration: none; cursor: pointer;
	border: 1.5px solid var(--ink); background: var(--ink); color: var(--paper);
}
.mh-btn:hover, .mh-entry .wp-block-button__link:hover, .mh-form button[type="submit"]:hover { background: var(--pencil); border-color: var(--pencil); color: #fff; }
.mh-btn.is-ghost, .mh-entry .is-style-outline > .wp-block-button__link { background: transparent; color: var(--ink); border-color: var(--ink); }
.mh-btn.is-ghost:hover, .mh-entry .is-style-outline > .wp-block-button__link:hover { border-color: var(--pencil); color: var(--pencil); background: transparent; }
.mh-bar .mh-btn { padding: 0.5rem 0.9rem; font-size: 0.85rem; white-space: nowrap; }
.mh-entry .wp-block-buttons { display: flex; flex-wrap: wrap; gap: 0.75rem; }

@media (max-width: 980px) {
	.mh-bar { flex-wrap: wrap; }
	.mh-menu-btn { display: inline-flex !important; order: 2; }
	.mh-bar > .mh-cta { order: 1; margin-left: 0; }
	.mh-nav { display: none; order: 3; width: 100%; border-top: 1px solid var(--rule); padding-block: 0.5rem; }
	.site-header.nav-open .mh-nav { display: block; }
	.mh-nav > ul { flex-direction: column; align-items: stretch; gap: 0; }
	.mh-nav > ul > li > a, .mh-nav .mh-dd-toggle { padding: 0.7rem 0; justify-content: space-between; width: 100%; font-size: 1rem; color: var(--ink); border-bottom: 1px solid var(--rule); }
	.mh-nav > ul > li.current-menu-item > a { color: var(--pencil); border-bottom-color: var(--rule); }
	.mh-nav .sub-menu { position: static; box-shadow: none; border: 0; padding: 0 0 0.5rem 0.75rem; min-width: 0; display: none; visibility: visible; opacity: 1; transform: none; transition: none; }
	.mh-nav li.is-open > .sub-menu { display: grid; }
	.mh-nav .sub-menu a { padding: 0.45rem 0; }
	.mh-nav .sub-menu a:hover { background: none; color: var(--pencil); }
}
@media (max-width: 460px) { .mh-mark-text small { display: none; } .mh-bar > .mh-cta { display: none; } }

/* ---------- Page content: book spreads ---------- */
.mh-entry > * { margin: 0; }
.mh-entry > :not(.mh-spread):not(.alignfull):not(.mh-ink):not(.mh-band) {
	max-width: var(--max); margin-inline: auto; padding-left: var(--gutter-l); padding-right: var(--gutter-r);
}
.mh-entry > .mh-spread,
.mh-spread.is-standalone {
	max-width: var(--max); margin-inline: auto;
	padding-left: var(--gutter-l); padding-right: var(--gutter-r);
}
.mh-spread {
	display: grid; gap: 2.5rem;
	grid-template-columns: minmax(0, var(--measure)) var(--margin-col);
	justify-content: space-between; padding-block: 4rem;
	border-bottom: 1px solid var(--rule);
	background-clip: content-box;
}
.mh-spread > * { min-width: 0; margin: 0 !important; }
.mh-spread.is-flush, .mh-entry > .mh-spread:last-child { border-bottom: 0; }
.mh-spread.is-wide { grid-template-columns: minmax(0, 1fr); }
/* The border should not run into the gutters */
.mh-entry > .mh-spread { border-bottom: 0; position: relative; }
.mh-entry > .mh-spread:not(.is-flush):not(:last-child)::after {
	content: ""; position: absolute; bottom: 0; left: var(--gutter-l); right: var(--gutter-r); border-bottom: 1px solid var(--rule);
}
@media (max-width: 860px) { .mh-spread { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; padding-block: 2.75rem; } }

.mh-col { display: grid; gap: 1.5rem; align-content: start; }
.mh-col > * { margin: 0 !important; }

.mh-eyebrow { font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); }
.mh-eyebrow::before { content: "¶"; color: var(--pencil); font-family: var(--f-serif); font-size: 1rem; letter-spacing: 0; margin-right: 0.6rem; }
.mh-lede { font-family: var(--f-serif); font-size: clamp(1.1rem, 1.8vw, 1.28rem); line-height: 1.55; max-width: 38rem; }
.mh-prose { display: grid; gap: 1rem; max-width: 38rem; }
.mh-prose > * { margin: 0 !important; }
.mh-prose p { color: var(--ink-soft); }
.mh-entry a:not(.wp-block-button__link):not(.mh-btn):not(.mh-spine):not(.mh-tile), .mh-link { color: var(--pencil); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

.mh-hero h1 em { font-family: var(--f-serif); font-style: italic; font-size: 0.82em; color: var(--pencil); white-space: nowrap; }
.mh-formats { font-family: var(--f-mono); font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); padding-top: 1rem; border-top: 1px solid var(--rule); word-spacing: 0.4em; }

/* Marginalia */
.mh-margin { display: grid; gap: 1.75rem; align-content: start; padding-top: 0.4rem; }
.mh-margin > * { margin: 0 !important; }
.mh-note { font-family: var(--f-serif); font-style: italic; font-size: 0.95rem; line-height: 1.5; color: var(--pencil); border-left: 1.5px solid var(--pencil); padding-left: 0.9rem; }
.mh-entry .mh-note a { color: inherit; }
.mh-note strong:first-child { font-style: normal; font-family: var(--f-mono); font-weight: 500; font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; display: block; margin-bottom: 0.3rem; }
@media (max-width: 860px) { .mh-margin { padding-top: 0; } }

/* Pathways / three-up */
.mh-paths { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
.mh-paths > * { margin: 0 !important; }
@media (max-width: 820px) { .mh-paths { grid-template-columns: minmax(0, 1fr); } }
.mh-path { display: grid; gap: 0.7rem; align-content: start; border-top: 1.5px solid var(--ink); padding-top: 1rem; }
.mh-path > * { margin: 0 !important; }
.mh-path p { color: var(--ink-soft); font-size: 0.96rem; }
.mh-kicker { font-family: var(--f-mono); font-size: 0.68rem !important; letter-spacing: 0.14em; text-transform: uppercase; color: var(--pencil) !important; }

/* Comparison table */
.mh-compare { overflow-x: auto; border-top: 1.5px solid var(--ink); margin: 0; }
.mh-compare table { border-collapse: collapse; width: 100%; min-width: 40rem; font-size: 0.93rem; }
.mh-compare th, .mh-compare td { text-align: left; vertical-align: top; padding: 0.85rem 1rem 0.85rem 0; border: 0; border-bottom: 1px solid var(--rule); }
.mh-compare thead { border-bottom: 0; }
.mh-compare thead th { font-family: var(--f-serif); font-weight: 700; font-size: 1rem; }
.mh-compare tbody td:first-child { font-family: var(--f-mono); font-weight: 500; font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); width: 9.5rem; padding-top: 1.05rem; }
.mh-compare td { color: var(--ink-soft); }

/* Service lists */
.mh-svc { border-top: 1.5px solid var(--ink); }
.mh-svc > * { margin: 0 !important; }
.mh-svc-item { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: 0.4rem 2rem; padding-block: 1.25rem; border-bottom: 1px solid var(--rule); }
.mh-svc-item > * { margin: 0 !important; }
.mh-svc-item p { color: var(--ink-soft); font-size: 0.96rem; }
@media (max-width: 640px) { .mh-svc-item { grid-template-columns: minmax(0, 1fr); } }

/* Ordered steps: a real sequence */
ol.mh-steps { list-style: none; margin: 0; padding: 0; counter-reset: s; border-top: 1.5px solid var(--ink); }
ol.mh-steps > li { counter-increment: s; display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 0 1rem; padding-block: 1rem; border-bottom: 1px solid var(--rule); color: var(--ink-soft); font-size: 0.95rem; }
ol.mh-steps > li::before { content: counter(s, upper-roman) "."; font-family: var(--f-serif); color: var(--pencil); font-size: 1.05rem; grid-row: 1 / 3; }
ol.mh-steps > li strong { display: block; font-family: var(--f-serif); font-weight: 700; font-size: 1.05rem; color: var(--ink); }

/* Checklist */
ul.mh-checks { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5rem; }
ul.mh-checks > li { padding-left: 1.6rem; position: relative; }
ul.mh-checks > li::before { content: "✓"; position: absolute; left: 0; color: var(--pencil); font-weight: 600; }

/* Ink (audio) band */
.mh-ink { background: var(--band); color: var(--on-ink); margin: 0; }
.mh-ink-inner { max-width: var(--max); margin-inline: auto; padding-left: var(--gutter-l); padding-right: var(--gutter-r); padding-block: 4rem; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 3rem; align-items: center; }
.mh-ink-inner > * { margin: 0 !important; min-width: 0; }
@media (max-width: 820px) { .mh-ink-inner { grid-template-columns: minmax(0, 1fr); padding-block: 3rem; gap: 2rem; } }
.mh-ink h1, .mh-ink h2, .mh-ink h3 { color: var(--on-ink); }
.mh-ink p, .mh-ink .mh-lede { color: var(--on-ink-soft); }
.mh-ink .mh-eyebrow { color: var(--on-ink-soft); }
.mh-ink .mh-eyebrow::before { color: var(--on-ink-pencil); }
.mh-entry .mh-ink .wp-block-button__link { background: var(--on-ink); color: #16191f; border-color: var(--on-ink); }
.mh-entry .mh-ink .wp-block-button__link:hover { background: var(--on-ink-pencil); border-color: var(--on-ink-pencil); color: #0b0d12; }
.mh-wave { width: 100%; height: 140px; display: block; }
.mh-wave-cap { font-family: var(--f-mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--on-ink-soft); display: flex; justify-content: space-between; margin-top: 0.6rem; }

/* ---------- Catalog ---------- */
.mh-archive-head { padding-block: 4rem 2rem; display: grid; gap: 1.25rem; }
.mh-filters { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.mh-chip { font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; border: 1px solid var(--rule); padding: 0.35rem 0.7rem; color: var(--ink-soft); text-decoration: none; }
.mh-chip.is-on, .mh-chip:hover { border-color: var(--ink); color: var(--ink); }
.mh-shelf { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem 1.25rem; padding-bottom: 4rem; }
@media (max-width: 760px) { .mh-shelf { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mh-slot { aspect-ratio: 2 / 3; max-width: 100%; border: 1.5px dashed var(--rule); display: grid; place-items: end start; padding: 0.9rem; }
.mh-slot span { font-family: var(--f-mono); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); }
.mh-slot.is-square { aspect-ratio: 1 / 1; align-self: end; }
.mh-card { display: grid; gap: 0.5rem; align-content: start; text-decoration: none; }
.mh-card-cover { aspect-ratio: 2 / 3; background: var(--paper-2); border: 1px solid var(--rule); display: grid; place-items: center; overflow: hidden; }
.mh-card-cover.is-square { aspect-ratio: 1 / 1; }
.mh-card-cover img { width: 100%; height: 100%; object-fit: cover; }
.mh-card-cover b { font-family: var(--f-display); font-weight: 400; font-size: 1.3rem; padding: 1rem; text-align: center; }
.mh-card h2 { font-family: var(--f-serif); font-size: 1.05rem; font-weight: 700; line-height: 1.3; }
.mh-card:hover h2 { color: var(--pencil); }
.mh-meta { font-family: var(--f-mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); }
.mh-empty { color: var(--ink-soft); font-size: 0.95rem; }

/* Single work / author */
.mh-work { padding-block: 4rem; display: grid; grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); gap: 3rem; align-items: start; }
@media (max-width: 760px) { .mh-work { grid-template-columns: minmax(0, 1fr); gap: 2rem; padding-block: 2.75rem; } .mh-work .mh-card-cover { max-width: 16rem; } }
.mh-work-body { display: grid; gap: 1.25rem; min-width: 0; }
.mh-work-body > .mh-content > * + * { margin-top: 1rem; }
.mh-work-body .mh-content { color: var(--ink-soft); max-width: 40rem; }
.mh-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0.4rem 1.5rem; border-top: 1.5px solid var(--ink); padding-top: 1rem; margin: 0; font-size: 0.93rem; }
.mh-facts dt { font-family: var(--f-mono); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); padding-top: 0.2rem; }
.mh-facts dd { margin: 0; }
.mh-subtitle { font-family: var(--f-serif); font-style: italic; font-size: 1.2rem; color: var(--ink-soft); }
.mh-status { display: inline-block; font-family: var(--f-mono); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--pencil); border: 1px solid var(--pencil); padding: 0.2rem 0.55rem; }

/* ---------- Generic posts ---------- */
.mh-article { max-width: 44rem; margin-inline: auto; padding-left: var(--gutter-l); padding-right: var(--gutter-r); padding-block: 4rem; }
.mh-article .mh-content > * + * { margin-top: 1.1rem; }
.mh-article h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); margin-bottom: 1.5rem; }
.mh-article .mh-content h2 { margin-top: 2.5rem; font-size: 1.8rem; }
.mh-article .mh-content h3 { margin-top: 1.8rem; }
.mh-article .mh-content a { color: var(--pencil); }

/* ---------- Forms ---------- */
.mh-inquiry { display: grid; gap: 1.25rem; }
.mh-tabs { display: flex; border-bottom: 1.5px solid var(--ink); overflow-x: auto; }
.mh-tabs button { font: inherit; font-size: 0.95rem; font-weight: 600; background: none; border: 0; cursor: pointer; padding: 0.8rem 1.1rem; color: var(--ink-soft); border-bottom: 3px solid transparent; margin-bottom: -1.5px; white-space: nowrap; }
.mh-tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--pencil); }
.mh-tabpanel { display: grid; gap: 1.25rem; padding-top: 0.5rem; }
.mh-tabpanel[hidden] { display: none; }
.mh-tabpanel > p { color: var(--ink-soft); max-width: 38rem; }
.mh-form { display: grid; gap: 1.1rem; background: var(--paper-2); padding: 1.6rem; border: 1px solid var(--rule); }
.mh-field { display: grid; gap: 0.35rem; }
.mh-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem; }
@media (max-width: 560px) { .mh-two { grid-template-columns: minmax(0, 1fr); } .mh-form { padding: 1.1rem; } }
.mh-form label, .mh-form legend { font-family: var(--f-mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); }
.mh-form .req { color: var(--pencil); }
.mh-form fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 0.5rem; }
.mh-opts { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.mh-form .mh-opts label { font-family: var(--f-sans); font-size: 0.92rem; letter-spacing: 0; text-transform: none; color: var(--ink); display: inline-flex; gap: 0.45rem; align-items: center; border: 1px solid var(--rule); background: var(--paper); padding: 0.45rem 0.75rem; cursor: pointer; }
.mh-form input[type="checkbox"] { width: auto; accent-color: var(--pencil); }
.mh-form input:not([type="checkbox"]), .mh-form select, .mh-form textarea { font: inherit; font-size: 1rem; color: var(--ink); background: var(--paper); border: 1px solid var(--rule); border-bottom: 1.5px solid var(--ink); border-radius: 0; padding: 0.65rem 0.75rem; width: 100%; }
.mh-form textarea { min-height: 7rem; resize: vertical; }
.mh-form input:focus, .mh-form select:focus, .mh-form textarea:focus { outline: none; border-bottom-color: var(--pencil); box-shadow: 0 1px 0 var(--pencil); }
.mh-form .mh-hint { font-size: 0.82rem; color: var(--ink-soft); }
.mh-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.mh-form .mh-consent { font-family: var(--f-sans); text-transform: none; letter-spacing: 0; font-size: 0.88rem; color: var(--ink-soft); display: flex; gap: 0.6rem; align-items: flex-start; }
.mh-form .mh-consent input { margin-top: 0.3rem; }
.mh-form .mh-consent a { color: var(--pencil); }
.mh-form-row { display: flex; gap: 0.75rem 1rem; flex-wrap: wrap; align-items: center; }
.mh-formnote { font-size: 0.88rem; color: var(--ink-soft); }
.mh-formnote.is-error { color: var(--error); }
.mh-alert { border-left: 2px solid var(--error); padding: 0.4rem 0 0.4rem 1rem; color: var(--error); }
.mh-confirm { border-left: 2px solid var(--pencil); padding: 0.4rem 0 0.4rem 1rem; display: grid; gap: 0.4rem; }
.mh-confirm h3 { color: var(--pencil); }
.mh-confirm p { color: var(--ink-soft); font-size: 0.95rem; }

/* ---------- Footer ---------- */
.site-footer { padding-block: 3rem; font-size: 0.88rem; color: var(--ink-soft); background: var(--paper-2); }
.mh-foot { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 2rem; }
@media (max-width: 760px) { .mh-foot { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mh-foot > div:first-child { grid-column: 1 / -1; } }
.mh-foot-name { font-family: var(--f-display); font-weight: 400; font-size: 1.35rem; color: var(--ink); display: block; margin-bottom: 0.4rem; }
.mh-foot h2 { margin: 0 0 0.6rem; font-family: var(--f-mono); font-weight: 500; font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); }
.mh-foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.mh-foot a { text-decoration: none; }
.mh-foot a:hover { color: var(--pencil); }
.mh-fine { border-top: 1px solid var(--rule); margin-top: 2rem; padding-top: 1.25rem; font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.04em; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.mh-fine a { text-decoration: none; }
.mh-fine a:hover { color: var(--pencil); }

/* 404 / search */
.mh-plain { padding-block: 5rem; display: grid; gap: 1.25rem; max-width: 40rem; }
.mh-search { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.mh-search input { font: inherit; padding: 0.65rem 0.75rem; border: 1px solid var(--rule); border-bottom: 1.5px solid var(--ink); background: var(--paper); color: var(--ink); min-width: 0; flex: 1 1 14rem; }

/* Block editor alignment helpers */
.alignfull { width: 100%; }
.wp-block-image img { height: auto; }

/* ---------- Block style aliases (chosen from the editor's Styles panel) ---------- */
.is-style-mh-note { font-family: var(--f-serif); font-style: italic; font-size: 0.95rem; line-height: 1.5; color: var(--pencil); border-left: 1.5px solid var(--pencil); padding-left: 0.9rem; }
.is-style-mh-note strong:first-child { font-style: normal; font-family: var(--f-mono); font-weight: 500; font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; display: block; margin-bottom: 0.3rem; }
.is-style-mh-eyebrow { font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); }
.is-style-mh-eyebrow::before { content: "¶"; color: var(--pencil); font-family: var(--f-serif); font-size: 1rem; letter-spacing: 0; margin-right: 0.6rem; }
.is-style-mh-lede { font-family: var(--f-serif); font-size: clamp(1.1rem, 1.8vw, 1.28rem); line-height: 1.55; max-width: 38rem; }
ul.is-style-mh-checks { list-style: none; padding: 0; display: grid; gap: 0.5rem; }
ul.is-style-mh-checks > li { padding-left: 1.6rem; position: relative; }
ul.is-style-mh-checks > li::before { content: "✓"; position: absolute; left: 0; color: var(--pencil); font-weight: 600; }
ol.is-style-mh-steps { list-style: none; padding: 0; counter-reset: s; border-top: 1.5px solid var(--ink); }
ol.is-style-mh-steps > li { counter-increment: s; display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 0 1rem; padding-block: 1rem; border-bottom: 1px solid var(--rule); color: var(--ink-soft); }
ol.is-style-mh-steps > li::before { content: counter(s, upper-roman) "."; font-family: var(--f-serif); color: var(--pencil); grid-row: 1 / 3; }
ol.is-style-mh-steps > li strong { display: block; font-family: var(--f-serif); color: var(--ink); }

/* Anchored sections clear the sticky header */
[id] { scroll-margin-top: 6rem; }

/* Legal / long-form pages */
.mh-legal .mh-col { max-width: 44rem; gap: 1.1rem; }
.mh-legal h2 { font-size: 1.6rem; margin-top: 1.25rem !important; }
.mh-legal p, .mh-legal li { color: var(--ink-soft); }
.mh-legal ul { padding-left: 1.2rem; display: grid; gap: 0.35rem; }

.mh-wave-wrap { min-width: 0; }

/* =====================================================================
   v1.1 — Hero bands with page-specific illustrations
   ===================================================================== */
.mh-band { margin: 0; position: relative; overflow: hidden; }
.mh-band-inner { max-width: var(--max); margin-inline: auto; padding-left: var(--gutter-l); padding-right: var(--gutter-r); padding-block: 4.5rem; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 3.5rem; align-items: center; }
.mh-band-inner > * { margin: 0 !important; min-width: 0; }
@media (max-width: 860px) { .mh-band-inner { grid-template-columns: minmax(0, 1fr); padding-block: 3rem; gap: 2.25rem; } }
.mh-band-hint { font-family: var(--f-mono); font-size: 0.72rem !important; letter-spacing: 0.12em; text-transform: uppercase; }

.mh-band.is-ink { background: var(--band); color: var(--on-ink); }
.mh-band.is-ink :is(h1, h2, h3) { color: var(--on-ink); }
.mh-band.is-ink p, .mh-band.is-ink .mh-lede { color: var(--on-ink-soft); }
.mh-band.is-ink .mh-eyebrow { color: var(--on-ink-soft); }
.mh-band.is-ink .mh-eyebrow::before { color: var(--on-ink-pencil); }
.mh-band.is-proof { background: var(--paper-2); border-bottom: 1px solid var(--rule); }
.mh-band.is-page { background: var(--paper); border-bottom: 1px solid var(--rule); }
.mh-band.is-signal { background: var(--signal); color: var(--on-signal); }
.mh-band.is-signal :is(h1, h2, h3) { color: var(--on-signal); }
.mh-band.is-signal p, .mh-band.is-signal .mh-lede, .mh-band.is-signal .mh-eyebrow { color: var(--on-signal-soft); }
.mh-band.is-signal .mh-eyebrow::before { color: var(--on-signal); }
.mh-entry :is(.mh-band.is-ink, .mh-band.is-signal) .wp-block-button__link { background: var(--on-signal); color: #16191f; border-color: var(--on-signal); }
.mh-entry :is(.mh-band.is-ink, .mh-band.is-signal) .wp-block-button__link:hover { background: #fff; border-color: #fff; color: #0b0d12; }

/* Editorial: proof sheet */
.mh-proof { margin: 0; display: grid; gap: 0.8rem; }
.mh-proof-page { background: var(--paper); border: 1px solid var(--rule); padding: 1.6rem 1.4rem 1.6rem 1.6rem; display: grid; gap: 0.7rem; font-family: var(--f-serif); font-size: clamp(0.95rem, 1.35vw, 1.08rem); line-height: 1.5; box-shadow: 0 30px 60px -42px rgba(10, 14, 30, 0.55); transform: rotate(-1.2deg); transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.mh-proof-row { display: grid; grid-template-columns: minmax(0, 1fr) 4.6rem; gap: 1rem; align-items: baseline; }
.mh-proof-row p { margin: 0; }
.mh-mk { font-style: italic; color: var(--pencil); font-size: 0.85rem; border-left: 1px solid var(--rule); padding-left: 0.6rem; min-height: 1.2em; white-space: nowrap; }
.mh-proof del { text-decoration: none; position: relative; color: var(--ink-soft); }
.mh-proof del::after { content: ""; position: absolute; left: -2px; right: -2px; top: 55%; height: 1.5px; background: var(--pencil); transform-origin: left; animation: mh-draw .6s var(--ease) .5s both; }
.mh-caret { position: relative; color: var(--pencil); font-style: normal; }
.mh-caret i { position: absolute; left: -0.6em; bottom: 1.05em; font-size: 0.78em; white-space: nowrap; font-style: italic; animation: mh-rise .5s var(--ease) .9s both; }
.mh-tr { text-decoration: underline wavy var(--pencil); text-decoration-thickness: 1px; text-underline-offset: 4px; }
.mh-stet { text-decoration: underline dotted var(--pencil); text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.mh-proof figcaption, .mh-arc figcaption, .mh-folio figcaption { font-family: var(--f-mono); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); }
@media (hover: hover) { .mh-band:hover .mh-proof-page { transform: rotate(0deg) translateY(-4px); box-shadow: 0 40px 70px -40px rgba(10, 14, 30, 0.6); } }
@keyframes mh-draw { from { transform: scaleX(0); } }
@keyframes mh-rise { from { opacity: 0; transform: translateY(6px); } }

/* Marketing: launch arc */
.mh-arc { margin: 0; display: grid; gap: 0.6rem; }
.mh-arc svg { width: 100%; height: auto; overflow: visible; }
.mh-arc-base { stroke: var(--on-signal-soft); stroke-opacity: .45; stroke-width: 1; }
.mh-arc-launch { stroke: var(--on-signal-soft); stroke-opacity: .5; stroke-dasharray: 3 5; }
.mh-arc-line { fill: none; stroke: var(--on-signal); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 700; animation: mh-trace 1.6s var(--ease) .3s both; }
.mh-arc-pt { fill: var(--signal); stroke: var(--on-signal); stroke-width: 2; transform-box: fill-box; transform-origin: center; transition: transform .25s var(--ease), fill .25s; }
.mh-arc-pt.is-big { fill: var(--on-signal); }
.mh-arc text { fill: var(--on-signal-soft); font-family: var(--f-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.mh-arc text.is-strong { fill: var(--on-signal); font-weight: 500; }
.mh-arc figcaption { color: var(--on-signal-soft); }
@media (hover: hover) { .mh-band:hover .mh-arc-pt { transform: scale(1.35); fill: var(--on-signal); } }
@keyframes mh-trace { from { stroke-dashoffset: 700; } to { stroke-dashoffset: 0; } }

/* Publishing: shelf of spines */
.mh-shelf-art { display: flex; align-items: flex-end; justify-content: center; gap: clamp(0.6rem, 1.6vw, 1.1rem); height: 330px; border-bottom: 3px solid var(--on-ink-soft); padding-inline: 0.5rem; }
.mh-spine { width: clamp(68px, 9vw, 96px); height: var(--h); display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 0.75rem; padding-block: 1.1rem; text-decoration: none !important; background-image: none !important; box-shadow: inset 0 12px 0 -8px rgba(0,0,0,.22), inset 0 -12px 0 -8px rgba(0,0,0,.22); transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.mh-spine span { writing-mode: vertical-rl; }
.mh-spine-title { font-family: var(--f-display); font-size: clamp(1.15rem, 1.9vw, 1.5rem); line-height: 1; }
.mh-spine-sub { font-family: var(--f-mono); font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase; opacity: .8; }
.mh-spine.is-a { background: var(--on-ink-pencil); color: #0b0d12; }
.mh-spine.is-b { background: var(--on-ink); color: #16191f; }
.mh-spine.is-c { background: transparent; color: var(--on-ink); border: 1.5px solid var(--on-ink-soft); border-bottom: 0; box-shadow: none; }
.mh-spine:hover, .mh-spine:focus-visible { transform: translateY(-16px); box-shadow: inset 0 12px 0 -8px rgba(0,0,0,.22), inset 0 -12px 0 -8px rgba(0,0,0,.22), 0 18px 30px -16px rgba(0,0,0,.6); }
.mh-spine:active { transform: translateY(-8px) scale(.98); }
.mh-spine:focus-visible { outline-color: var(--on-ink); }
@media (max-width: 860px) { .mh-shelf-art { height: 250px; } }

/* About: annotated page */
.mh-folio { margin: 0; display: grid; gap: 0.8rem; justify-items: center; }
.mh-folio-page { position: relative; width: 100%; max-width: 400px; background: var(--paper); border: 1px solid var(--rule); padding: 2.2rem 1.2rem 3rem 2rem; display: grid; grid-template-columns: minmax(0, 1fr) 30%; gap: 1.1rem; box-shadow: 0 30px 60px -42px rgba(10, 14, 30, 0.55); transform: rotate(1.2deg); transition: transform .5s var(--ease); }
.mh-folio-text span { display: block; height: 7px; width: var(--w); background: var(--rule); margin-bottom: 10px; position: relative; }
.mh-folio-text .is-gap { height: 6px; background: transparent; }
.mh-folio-text .is-cut::after { content: ""; position: absolute; left: -4px; right: -4px; top: 3px; height: 1.5px; background: var(--pencil); transform-origin: left; animation: mh-draw .6s var(--ease) .6s both; }
.mh-folio-text .is-mark { background: var(--pencil); opacity: .45; }
.mh-folio-margin { border-left: 1px solid var(--rule); padding-left: 0.7rem; position: relative; }
.mh-folio-margin p { font-family: var(--f-serif); font-style: italic; color: var(--pencil); font-size: 0.82rem; line-height: 1.35; margin: 0; position: absolute; left: 0.7rem; right: 0; animation: mh-rise .5s var(--ease) both; }
.mh-folio-margin .is-a { top: 44px; animation-delay: 1s; }
.mh-folio-margin .is-b { top: 100px; animation-delay: 1.3s; }
.mh-folio-num { position: absolute; bottom: 1rem; left: 0; right: 0; text-align: center; font-family: var(--f-serif); font-style: italic; font-size: 0.8rem; color: var(--ink-soft); }
@media (hover: hover) { .mh-band:hover .mh-folio-page { transform: rotate(0deg) translateY(-4px); } }

/* Services: index tiles */
.mh-tiles { display: grid; gap: 0.75rem; }
.mh-tile { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr) auto; grid-template-areas: "m t g" "m d g"; align-items: center; gap: 0.15rem 1.25rem; padding: 1.1rem 1.25rem; background: var(--paper); border: 1px solid var(--rule); text-decoration: none !important; background-image: none !important; color: var(--ink) !important; transition: transform .25s var(--ease), border-color .25s, box-shadow .25s var(--ease); }
.mh-tile-motif { grid-area: m; height: 2.8rem; display: flex; align-items: center; }
.mh-tile-title { grid-area: t; font-family: var(--f-serif); font-weight: 700; font-size: 1.12rem; }
.mh-tile-text { grid-area: d; color: var(--ink-soft); font-size: 0.9rem; line-height: 1.45; }
.mh-tile-go { grid-area: g; font-family: var(--f-mono); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--pencil); white-space: nowrap; }
.mh-tile-go::after { content: " →"; display: inline-block; transition: transform .25s var(--ease); }
.mh-tile-motif.is-proof { flex-direction: column; align-items: stretch; justify-content: center; gap: 6px; width: 100%; }
.mh-tile-motif.is-proof i { display: block; height: 4px; background: var(--rule); position: relative; }
.mh-tile-motif.is-proof i:nth-child(2) { width: 80%; }
.mh-tile-motif.is-proof i.x::after { content: ""; position: absolute; left: -3px; right: 25%; top: 1px; height: 1.5px; background: var(--pencil); }
.mh-tile-motif.is-arc svg { width: 100%; height: 100%; }
.mh-tile-motif.is-arc path { fill: none; stroke: var(--pencil); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 160; stroke-dashoffset: 0; transition: stroke-dashoffset .6s var(--ease); }
.mh-tile-motif.is-wave { gap: 2px; }
.mh-tile-motif.is-wave i { display: block; width: 3px; height: calc(var(--v) * 2.4px); background: var(--pencil); border-radius: 1px; transform-origin: center; }
@media (hover: hover) {
	.mh-tile:hover { transform: translateX(4px); border-color: var(--pencil); box-shadow: 0 14px 30px -24px rgba(10, 14, 30, 0.55); }
	.mh-tile:hover .mh-tile-go::after { transform: translateX(4px); }
	.mh-tile:hover .is-arc path { animation: mh-trace-sm .7s var(--ease); }
	.mh-tile:hover .is-wave i { animation: mh-bar .8s ease-in-out infinite alternate; }
	.mh-tile:hover .is-wave i:nth-child(odd) { animation-delay: -.4s; }
	.mh-tile:hover .is-wave i:nth-child(3n) { animation-delay: -.2s; }
}
.mh-tile:active { transform: scale(.985); }
@media (max-width: 560px) { .mh-tile { grid-template-columns: 3.6rem minmax(0, 1fr); grid-template-areas: "m t" "m d" "m g"; gap: 0.2rem 1rem; } .mh-tile-go { margin-top: 0.35rem; } }
@keyframes mh-trace-sm { from { stroke-dashoffset: 160; } }
@keyframes mh-bar { to { transform: scaleY(.35); } }

/* =====================================================================
   v1.1 — Hover and press states
   ===================================================================== */
/* Links: a pencil underline that draws in */
.mh-entry a:not(.wp-block-button__link):not(.mh-btn):not(.mh-spine):not(.mh-tile), .mh-link {
	text-decoration: none;
	background-image: linear-gradient(var(--pencil), var(--pencil)), linear-gradient(color-mix(in srgb, var(--pencil) 35%, transparent), color-mix(in srgb, var(--pencil) 35%, transparent));
	background-size: 0% 1.5px, 100% 1px; background-position: 0 100%, 0 100%; background-repeat: no-repeat;
	padding-bottom: 1px; transition: background-size .3s var(--ease), color .2s;
}
.mh-entry a:not(.wp-block-button__link):not(.mh-btn):not(.mh-spine):not(.mh-tile):hover, .mh-entry a:not(.wp-block-button__link):not(.mh-btn):not(.mh-spine):not(.mh-tile):focus-visible, .mh-link:hover { background-size: 100% 1.5px, 100% 1px; }

/* Buttons: lift on hover, press on tap */
.mh-btn, .mh-entry .wp-block-button__link, .mh-form button[type="submit"], .mh-search button {
	transition: background-color .2s, border-color .2s, color .2s, transform .2s var(--ease), box-shadow .2s var(--ease);
}
@media (hover: hover) {
	.mh-btn:hover, .mh-entry .wp-block-button__link:hover, .mh-form button[type="submit"]:hover { transform: translateY(-2px); box-shadow: 0 10px 20px -14px rgba(10, 14, 30, 0.7); }
}
.mh-btn:active, .mh-entry .wp-block-button__link:active, .mh-form button[type="submit"]:active { transform: translateY(0) scale(.97); box-shadow: none; }
.mh-form button[type="submit"][disabled] { opacity: .6; cursor: progress; }

/* Logo mark */
.mh-logo-slot { transition: border-color .2s, color .2s, transform .3s var(--ease); }
.mh-mark:hover .mh-logo-slot { border-color: var(--pencil); color: var(--pencil); transform: rotate(-4deg); }

/* Nav */
.mh-nav > ul > li > a, .mh-nav .mh-dd-toggle { transition: color .2s, border-color .2s; }
.mh-dd-toggle::after { transition: transform .2s var(--ease); }
.mh-nav li.is-open > .mh-dd-toggle::after { transform: rotate(225deg) translateY(-1px); }
.mh-nav .sub-menu a { transition: background-color .15s, padding-left .2s var(--ease); }
@media (hover: hover) and (min-width: 981px) { .mh-nav .sub-menu a:hover { padding-left: 1.25rem; } }

/* Service rows: whole row is the link when it has one */
.mh-svc-item { position: relative; transition: background-color .25s, padding .25s var(--ease); }
.mh-svc-item:has(a) { cursor: pointer; }
.mh-svc-item:has(a) a::after { content: ""; position: absolute; inset: 0; }
.mh-svc-item:has(a) h3 { transition: color .2s; }
@media (hover: hover) {
	.mh-svc-item:has(a):hover { background: var(--pencil-wash); padding-inline: 0.9rem; }
	.mh-svc-item:has(a):hover h3 { color: var(--pencil); }
	.mh-svc-item:not(:has(a)):hover h3 { color: var(--pencil); }
}
.mh-svc-item:has(a):active { background: var(--pencil-wash); }

/* Pathway cards */
.mh-path { position: relative; transition: border-color .25s, transform .3s var(--ease); }
.mh-path:has(a) a::after { content: ""; position: absolute; inset: 0; }
@media (hover: hover) { .mh-path:has(a):hover { border-top-color: var(--pencil); transform: translateY(-4px); } .mh-path:has(a):hover h3 { color: var(--pencil); } }
.mh-path h3 { transition: color .2s; }

/* Steps and checklist rows */
ol.mh-steps > li { transition: background-color .2s; }
@media (hover: hover) { ol.mh-steps > li:hover { background: var(--pencil-wash); } }

/* Margin notes nudge */
.mh-note { transition: border-color .2s, transform .3s var(--ease); }
@media (hover: hover) { .mh-note:hover { transform: translateX(3px); border-left-width: 3px; } }

/* Catalog cards */
.mh-card-cover { transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
@media (hover: hover) { .mh-card:hover .mh-card-cover { transform: translateY(-6px); box-shadow: 0 22px 34px -24px rgba(10, 14, 30, 0.6); } }
.mh-card:active .mh-card-cover { transform: scale(.98); }
.mh-chip { transition: border-color .2s, color .2s, background-color .2s; }
.mh-chip:hover { background: var(--paper-2); }

/* Forms */
.mh-tabs button { transition: color .2s, background-color .2s, border-color .25s var(--ease); }
.mh-tabs button:hover { color: var(--ink); background: var(--paper-2); }
.mh-form .mh-opts label { transition: border-color .2s, background-color .2s, transform .15s var(--ease); }
.mh-form .mh-opts label:hover { border-color: var(--ink); }
.mh-form .mh-opts label:has(input:checked) { border-color: var(--pencil); background: var(--pencil-wash); }
.mh-form .mh-opts label:active { transform: scale(.97); }
.mh-form input:not([type="checkbox"]):hover, .mh-form select:hover, .mh-form textarea:hover { border-bottom-color: var(--pencil); }
.mh-form :is(input, select, textarea) { transition: border-color .2s, box-shadow .2s; }

/* Footer */
.mh-foot a, .mh-fine a { transition: color .2s; }

/* Waveform canvas responds to pointer (JS animates) */
.mh-wave { cursor: default; }

/* Small screens: keep proof lines and chart labels legible */
@media (max-width: 560px) {
	.mh-proof-page { font-size: 0.8rem; padding: 1.1rem 0.9rem 1.1rem 1rem; gap: 0.5rem; }
	.mh-proof-row { grid-template-columns: minmax(0, 1fr) 3.4rem; gap: 0.6rem; }
	.mh-mk { font-size: 0.72rem; padding-left: 0.45rem; }
	.mh-proof-row p { white-space: nowrap; }
	.mh-arc text { font-size: 15px; }
	.mh-arc text:nth-of-type(2) { display: none; }
}