/* ===== Tokens (from design handoff _ds/tokens/) ===== */
:root {
	--ink-900: #14211B;
	--ink-500: #5F6B62;
	--ink-400: #828D83;

	--sand-50:  #FBFAF6;
	--sand-100: #F5F2EA;
	--sand-200: #E8E2D4;
	--sand-300: #D6CDB9;
	--sand-500: #9C8D70;
	--sand-700: #5C5240;
	--sand-800: #3E3829;

	--green-600: #15663E;

	--white: #FFFFFF;

	--color-bg: var(--sand-50);
	--color-surface: var(--white);
	--color-surface-cream: var(--sand-200);
	--color-surface-ink: var(--ink-900);
	--color-border: rgba(20, 33, 27, 0.10);
	--color-border-strong: rgba(20, 33, 27, 0.18);

	--text-primary: var(--ink-900);
	--text-secondary: var(--ink-500);
	--text-muted: var(--ink-400);
	--text-on-cream: var(--sand-800);
	--text-brand: var(--green-600);

	--ml-accent: #E30613;
	--ml-accent-deep: #941004;
	--ml-accent-dark: #5F0B00;

	--font-display: "Outfit", "Plus Jakarta Sans", system-ui, sans-serif;
	--font-sans: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
	--font-mono: "Space Mono", ui-monospace, "SFMono-Regular", monospace;

	--text-xs: 0.75rem;
	--text-sm: 0.875rem;
	--text-base: 1rem;
	--text-md: 1.125rem;
	--text-lg: 1.25rem;
	--text-xl: 1.5rem;
	--text-2xl: 1.875rem;

	--fw-regular: 400;
	--fw-semibold: 600;
	--fw-bold: 700;

	--lh-relaxed: 1.65;
	--lh-normal: 1.5;

	--ls-tight: -0.025em;
	--ls-snug: -0.012em;
	--ls-wide: 0.04em;
	--ls-caps: 0.09em;

	--type-body: var(--fw-regular) var(--text-base)/var(--lh-relaxed) var(--font-sans);
	--type-body-lg: var(--fw-regular) var(--text-md)/var(--lh-relaxed) var(--font-sans);
	--type-label: var(--fw-semibold) var(--text-sm)/var(--lh-normal) var(--font-sans);

	--radius-md: 12px;
	--radius-lg: 16px;
	--radius-xl: 24px;

	--shadow-sm: 0 2px 6px rgba(20, 33, 27, 0.07);
	--shadow-lg: 0 16px 40px rgba(20, 33, 27, 0.12);
	--shadow-xl: 0 28px 64px rgba(20, 33, 27, 0.16);

	--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
	--dur: 200ms;
}

/* ===== Base ===== */
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--color-bg); color: var(--text-primary); font: var(--type-body); -webkit-font-smoothing: antialiased; }
* { box-sizing: border-box; }
img { max-width: 100%; }
a { color: var(--ml-accent); text-decoration: none; }
a:hover { color: var(--ml-accent-deep); }
section[id] { scroll-margin-top: 80px; }

.ml-container { max-width: 1200px; margin: 0 auto; }

@keyframes ml-flap-a { 0%, 100% { transform: rotateY(0deg); } 50% { transform: rotateY(-46deg); } }
@keyframes ml-flap-b { 0%, 100% { transform: rotateY(0deg); } 50% { transform: rotateY(46deg); } }
@keyframes ml-rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

.ml-rise { animation: ml-rise .7s var(--ease-out) both; }
.ml-rise-1 { animation-delay: 0s; }
.ml-rise-2 { animation-delay: .08s; }
.ml-rise-3 { animation-delay: .16s; }
.ml-rise-4 { animation-delay: .24s; }
.ml-rise-5 { animation-delay: .32s; }

@media (prefers-reduced-motion: reduce) {
	* { animation: none !important; }
}

/* ===== Guard against Elementor's global Kit CSS =====
   Elementor (active site-wide as a plugin, independent of theme) injects
   ".elementor-kit-N h1/h2/a { color: var(--e-global-color-...) }" rules.
   Specificity (0,1,1) beats our plain class selectors (0,1,0), silently
   recoloring every heading and link in this theme's markup. Reassert the
   intended colors here, in one place, for every h1/h2/a this theme renders. */
.ml-hero-title,
.ml-section-title { color: var(--text-primary) !important; }
.ml-story-title { color: var(--text-on-cream) !important; }
.ml-contact-title { color: #fff !important; }
.ml-hero-tagline { color: var(--text-primary) !important; }
a { color: var(--ml-accent) !important; }
a:hover { color: var(--ml-accent-deep) !important; }
.ml-btn-primary,
.ml-btn-primary:hover { color: #fff !important; }
.ml-btn-secondary,
.ml-btn-secondary:hover { color: var(--text-primary) !important; }
.ml-nav-links a:not(.ml-btn) { color: var(--text-primary) !important; }
.ml-nav-links a:not(.ml-btn):hover { color: var(--ml-accent) !important; }
.ml-product-card,
.ml-product-card:hover { color: var(--text-primary) !important; }
.ml-product-link-accent { color: var(--ml-accent) !important; }
.ml-product-link-green { color: var(--text-brand) !important; }
.ml-contact-mail,
.ml-contact-mail:hover { color: #fff !important; }
.ml-footer-link { color: var(--sand-100) !important; }

/* ===== Buttons ===== */
.ml-btn { display: inline-flex; align-items: center; gap: 10px; font: var(--type-label); padding: 14px 24px; border-radius: var(--radius-md); border: none; cursor: pointer; }
.ml-btn-primary { color: #fff; background: var(--ml-accent); box-shadow: var(--shadow-sm); }
.ml-btn-primary:hover { background: var(--ml-accent-deep); color: #fff; }
.ml-btn-secondary { color: var(--text-primary); border: 1.5px solid var(--color-border-strong); background: transparent; }
.ml-btn-secondary:hover { border-color: var(--ink-900); color: var(--text-primary); }

/* ===== Nav ===== */
.ml-nav-wrap { position: sticky; top: 0; z-index: 50; background: rgba(251,250,246,.82); backdrop-filter: blur(12px); border-bottom: 1px solid var(--color-border); }
.ml-nav { max-width: 1200px; margin: 0 auto; padding: 18px 24px; display: flex; align-items: center; gap: 32px; }
.ml-logo { display: flex; align-items: center; perspective: 800px; }
.ml-logo-box { position: relative; display: block; width: 114px; aspect-ratio: 910 / 382; }
.ml-logo-wing { position: absolute; inset: 0; width: 100%; height: 100%; transform-origin: 50% 36%; }
.ml-logo-wing-a { animation: ml-flap-a 3.4s ease-in-out infinite; }
.ml-logo-wing-b { animation: ml-flap-b 3.4s ease-in-out infinite; }
.ml-logo-wordmark { position: absolute; inset: 0; width: 100%; height: 100%; }
.ml-nav-spacer { flex: 1; }
.ml-nav-links { display: flex; align-items: center; gap: 28px; }
.ml-nav-links a:not(.ml-btn) { font: var(--type-label); color: var(--text-primary); }
.ml-nav-links a:not(.ml-btn):hover { color: var(--ml-accent); }
.ml-nav-links .ml-btn { padding: 10px 18px; }

@media (max-width: 720px) {
	.ml-nav-links a:not(.ml-btn) { display: none; }
}

/* ===== Hero ===== */
.ml-hero { max-width: 1200px; margin: 0 auto; padding: clamp(56px, 9vw, 120px) 24px clamp(64px, 10vw, 140px); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: clamp(32px, 5vw, 72px); align-items: center; }
.ml-eyebrow, .ml-eyebrow-cream, .ml-eyebrow-onred { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--ls-caps); text-transform: uppercase; }
.ml-eyebrow { display: flex; align-items: center; gap: 14px; color: var(--text-secondary); }
.ml-eyebrow-line { display: block; width: 40px; height: 2px; background: var(--ml-accent); }
.ml-hero-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.6rem, 6.2vw, 4.25rem); line-height: 1.02; letter-spacing: var(--ls-tight); margin: 22px 0 0; text-wrap: balance; }
.ml-accent-text { color: var(--ml-accent); }
.ml-hero-body { font: var(--type-body-lg); color: var(--text-secondary); max-width: 46ch; margin: 24px 0 0; text-wrap: pretty; }
.ml-hero-tagline { font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg); letter-spacing: var(--ls-snug); margin: 28px 0 0; }
.ml-hero-buttons { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }

.ml-hero-visual-wrap { display: flex; justify-content: center; }
.ml-hero-visual { position: relative; width: 100%; max-width: 520px; aspect-ratio: 1 / 1; }
.ml-hv-dots { position: absolute; inset: 6% 0 8% 0; background-image: radial-gradient(var(--sand-300) 1.2px, transparent 1.2px); background-size: 22px 22px; opacity: .7; }
.ml-hv-card { position: absolute; background: var(--color-surface); border: 1px solid var(--color-border); }
.ml-hv-card-window { left: 0; top: 6%; width: 76%; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 14px; }
.ml-hv-window-bar { display: flex; align-items: center; gap: 6px; padding-bottom: 12px; border-bottom: 1px solid var(--color-border); }
.ml-hv-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--sand-300); }
.ml-hv-dot-red { background: var(--ml-accent); }
.ml-hv-window-label { margin-left: 8px; font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--ls-wide); color: var(--text-muted); }
.ml-hv-window-body { display: grid; grid-template-columns: 34% 1fr; gap: 12px; padding-top: 14px; }
.ml-hv-lines { display: flex; flex-direction: column; gap: 8px; }
.ml-hv-lines span { height: 8px; border-radius: 4px; background: var(--sand-200); }
.ml-hv-blocks { display: flex; flex-direction: column; gap: 10px; }
.ml-hv-block-lg { height: 56px; border-radius: 8px; background: var(--sand-100); border: 1px solid var(--color-border); display: block; }
.ml-hv-block-row { display: flex; gap: 8px; }
.ml-hv-block { flex: 1; height: 26px; border-radius: 8px; background: var(--sand-100); border: 1px solid var(--color-border); }
.ml-hv-block-accent { width: 64px; height: 26px; border-radius: 8px; background: var(--ml-accent); }
.ml-hv-card-phone { right: 0; bottom: 4%; width: 27%; border-radius: 20px; box-shadow: var(--shadow-xl); padding: 10px; }
.ml-hv-phone-notch { height: 4px; width: 32%; margin: 2px auto 10px; border-radius: 4px; background: var(--sand-300); }
.ml-hv-phone-body { display: flex; flex-direction: column; gap: 7px; }
.ml-hv-phone-accent { height: 44px; border-radius: 10px; background: var(--ml-accent); opacity: .92; display: block; }
.ml-hv-line { height: 8px; border-radius: 4px; background: var(--sand-200); display: block; }
.ml-hv-phone-box { height: 28px; border-radius: 8px; background: var(--sand-100); border: 1px solid var(--color-border); display: block; }
.ml-hv-code { position: absolute; left: 4%; bottom: 0; background: var(--color-surface-ink); border-radius: var(--radius-md); box-shadow: var(--shadow-xl); padding: 16px 18px; font-family: var(--font-mono); font-size: 12px; line-height: 1.8; color: var(--sand-300); white-space: nowrap; }
.ml-hv-code-indent { padding-left: 14px; }

/* ===== Story ===== */
.ml-story { background: var(--color-surface-cream); padding: clamp(72px, 11vw, 140px) 24px; }
.ml-eyebrow-cream { color: var(--sand-700); }
.ml-story-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(2rem, 4.6vw, 3.25rem); line-height: 1.06; letter-spacing: var(--ls-tight); color: var(--text-on-cream); max-width: 22ch; margin: 18px 0 0; text-wrap: balance; }
.ml-story-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: clamp(24px, 4vw, 56px); margin-top: clamp(40px, 6vw, 72px); }
.ml-story-grid p { font: var(--type-body-lg); color: var(--sand-800); margin: 0; text-wrap: pretty; }

/* ===== Stats ===== */
.ml-stats { background: var(--color-surface-ink); padding: clamp(56px, 8vw, 96px) 24px; }
.ml-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: clamp(28px, 4vw, 56px); }
.ml-stat-number { font-family: var(--font-mono); font-size: clamp(2.2rem, 4vw, 3rem); color: var(--ml-accent); line-height: 1; }
.ml-stat-label { font: var(--type-body); color: var(--sand-300); margin-top: 10px; }

/* ===== Products ===== */
.ml-products { padding: clamp(72px, 11vw, 140px) 24px; }
.ml-section-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(2rem, 4.6vw, 3.25rem); line-height: 1.06; letter-spacing: var(--ls-tight); margin: 18px 0 0; max-width: 24ch; text-wrap: balance; }
.ml-section-intro { font: var(--type-body-lg); color: var(--text-secondary); max-width: 54ch; margin: 18px 0 0; text-wrap: pretty; }
.ml-product-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: clamp(20px, 3vw, 32px); margin-top: clamp(40px, 6vw, 72px); }
.ml-product-card { display: flex; flex-direction: column; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-sm); color: var(--text-primary); transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out); }
.ml-product-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); color: var(--text-primary); }
.ml-product-inner { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: clamp(20px, 3vw, 32px); padding: clamp(24px, 3vw, 36px); align-items: center; flex: 1; }
.ml-product-shot-wrap { display: flex; justify-content: center; align-items: flex-end; }
.ml-product-shot { width: 100%; max-width: 200px; height: auto; display: block; border-radius: 18px; box-shadow: var(--shadow-lg); }
.ml-product-text { display: flex; flex-direction: column; gap: 12px; }
.ml-product-name { font-family: var(--font-display); font-weight: 700; font-size: var(--text-2xl); letter-spacing: var(--ls-tight); }
.ml-product-category { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--ls-wide); color: var(--text-secondary); text-transform: uppercase; }
.ml-product-desc { font: var(--type-body); color: var(--text-secondary); margin: 0; text-wrap: pretty; }
.ml-product-link { margin-top: 8px; display: flex; align-items: center; gap: 10px; font: var(--type-label); }
.ml-product-link-accent { color: var(--ml-accent); }
.ml-product-link-green { color: var(--text-brand); }

/* ===== Contact ===== */
.ml-contact { background: var(--ml-accent); padding: clamp(72px, 10vw, 130px) 24px; }
.ml-contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: clamp(32px, 5vw, 64px); align-items: center; }
.ml-eyebrow-onred { color: rgba(255,255,255,.85); }
.ml-contact-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(2rem, 4.8vw, 3.25rem); line-height: 1.04; letter-spacing: var(--ls-tight); color: #fff; margin: 18px 0 0; max-width: 24ch; text-wrap: balance; }
.ml-contact-body { font: var(--type-body-lg); color: rgba(255,255,255,.92); max-width: 42ch; margin: 20px 0 0; text-wrap: pretty; }
.ml-contact-meta { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 28px; }
.ml-contact-mail { font: var(--type-label); color: #fff; border-bottom: 1px solid rgba(255,255,255,.5); padding-bottom: 2px; }
.ml-contact-mail:hover { color: #fff; border-color: #fff; }
.ml-contact-address { font: var(--type-label); color: rgba(255,255,255,.8); }

.ml-contact-card { background: var(--color-surface); border-radius: var(--radius-xl); padding: clamp(24px, 3.5vw, 40px); box-shadow: var(--shadow-xl); }
.ml-contact-form, .wpcf7-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: 16px; }
.ml-contact-form-eyebrow { grid-column: 1 / -1; font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--text-secondary); }
.ml-field { display: flex; flex-direction: column; gap: 6px; }
.ml-field-full { grid-column: 1 / -1; }
.ml-field label { font: var(--type-label); color: var(--text-primary); }
.ml-field p { margin: 0; }
.ml-field .wpcf7-form-control-wrap { display: block; }
.ml-field input, .ml-field textarea { width: 100%; font: var(--fw-regular) var(--text-base)/1.5 var(--font-sans); color: var(--text-primary); background: var(--color-surface); border: 1.5px solid var(--color-border-strong); border-radius: var(--radius-md); padding: 12px 14px; outline: none; }
.ml-field textarea { resize: vertical; }
.ml-field input:focus, .ml-field textarea:focus { border-color: var(--ml-accent); box-shadow: 0 0 0 3px rgba(227,6,19,.15); }
.ml-contact-form-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 4px; }
.ml-contact-form-note { font: var(--type-body); font-size: var(--text-sm); color: var(--text-secondary); }

/* ===== Footer ===== */
.ml-footer { background: var(--color-surface-ink); padding: clamp(56px, 8vw, 96px) 24px 40px; }
.ml-footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 40px; align-items: start; }
.ml-footer-logo { height: 56px; width: auto; display: block; }
.ml-footer-tagline { font: var(--type-body); color: var(--sand-300); max-width: 30ch; margin: 20px 0 0; }
.ml-footer-col { display: flex; flex-direction: column; gap: 8px; }
.ml-footer-heading { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--sand-500); }
.ml-footer-text { font: var(--type-body); color: var(--sand-300); }
.ml-footer-link { font: var(--type-body); color: var(--sand-100); }
.ml-footer-bottom { margin-top: clamp(40px, 6vw, 72px); padding-top: 24px; border-top: 1px solid rgba(251,250,246,.12); display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--sand-500); }

/* ===== Blog ===== */
.ml-blog { padding: clamp(72px, 11vw, 140px) 24px; }
.ml-blog-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: clamp(24px, 3vw, 32px); margin-top: clamp(40px, 6vw, 72px); }
.ml-blog-card { display: flex; flex-direction: column; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-sm); color: var(--text-primary); transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out); }
.ml-blog-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); color: var(--text-primary); }
.ml-blog-card-media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--sand-100); }
.ml-blog-card-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ml-blog-card-img-fallback { background: linear-gradient(135deg, var(--sand-200), var(--sand-100)); }
.ml-blog-card-body { display: flex; flex-direction: column; gap: 10px; padding: clamp(20px, 2.5vw, 28px); flex: 1; }
.ml-blog-card-category { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--ls-wide); color: var(--ml-accent); text-transform: uppercase; }
.ml-blog-card-title { font-family: var(--font-display); font-weight: 700; font-size: var(--text-xl); letter-spacing: var(--ls-tight); line-height: 1.2; margin: 0; }
.ml-blog-card-excerpt { font: var(--type-body); color: var(--text-secondary); margin: 0; flex: 1; }
.ml-blog-card-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; font: var(--type-label); }
.ml-blog-card-meta time { color: var(--text-muted); font-weight: var(--fw-regular); }
.ml-blog-card-link { color: var(--ml-accent); }
.ml-blog-pagination { margin-top: clamp(40px, 6vw, 72px); display: flex; justify-content: center; }
.ml-blog-pagination .nav-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ml-blog-pagination a, .ml-blog-pagination span.current { font: var(--type-label); padding: 10px 16px; border-radius: var(--radius-md); border: 1.5px solid var(--color-border-strong); color: var(--text-primary); }
.ml-blog-pagination a:hover { border-color: var(--ink-900); }

/* ===== Single post ===== */
.ml-post-container { max-width: 760px; margin: 0 auto; padding: clamp(56px, 9vw, 120px) 24px clamp(64px, 10vw, 140px); }
.ml-post-back { display: inline-block; font: var(--type-label); color: var(--text-secondary); margin-bottom: 24px; }
.ml-post-back:hover { color: var(--ml-accent); }
.ml-post-category { margin-bottom: 14px; }
.ml-post-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(2rem, 4.6vw, 3.25rem); line-height: 1.06; letter-spacing: var(--ls-tight); margin: 0; text-wrap: balance; }
.ml-post-meta { display: flex; align-items: center; gap: 10px; margin-top: 16px; font: var(--type-label); color: var(--text-secondary); }
.ml-post-thumb { margin-top: clamp(32px, 5vw, 48px); border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-lg); }
.ml-post-thumb-img { width: 100%; height: auto; display: block; }

.ml-post-content { margin-top: clamp(32px, 5vw, 48px); font: var(--type-body-lg); color: var(--text-primary); }
.ml-post-content > * + * { margin-top: 1.4em; }
.ml-post-content h2 { font-family: var(--font-display); font-weight: 700; font-size: var(--text-2xl); letter-spacing: var(--ls-tight); line-height: 1.2; margin-top: 1.8em; }
.ml-post-content h3 { font-family: var(--font-display); font-weight: 700; font-size: var(--text-xl); line-height: 1.25; margin-top: 1.6em; }
.ml-post-content img { max-width: 100%; height: auto; border-radius: var(--radius-lg); }
.ml-post-content blockquote { margin: 0; padding: 4px 0 4px 20px; border-left: 3px solid var(--ml-accent); color: var(--text-secondary); font-style: italic; }
.ml-post-content a { text-decoration: underline; text-underline-offset: 2px; }
.ml-post-content ul, .ml-post-content ol { padding-left: 1.4em; }
.ml-post-content li + li { margin-top: .4em; }

.ml-post-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: clamp(40px, 6vw, 56px); }
.ml-post-tag { font: var(--type-label); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--ls-wide); color: var(--text-secondary); background: var(--sand-100); border-radius: var(--radius-full); padding: 6px 14px; }

.ml-post-nav { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 16px; margin-top: clamp(40px, 6vw, 56px); padding-top: 24px; border-top: 1px solid var(--color-border); font: var(--type-label); }
.ml-post-nav-next { text-align: right; }
.ml-post-nav a { color: var(--text-primary); }
.ml-post-nav a:hover { color: var(--ml-accent); }

.ml-post-comments { margin-top: clamp(40px, 6vw, 56px); padding-top: clamp(40px, 6vw, 56px); border-top: 1px solid var(--color-border); }
.ml-blog-pagination span.current { background: var(--ml-accent); border-color: var(--ml-accent); color: #fff; }

/* ===== 404 ===== */
.ml-404 { position: relative; padding: clamp(96px, 16vw, 200px) 24px; overflow: hidden; background-image: radial-gradient(var(--sand-300) 1.2px, transparent 1.2px); background-size: 22px 22px; background-position: center; }
.ml-404::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at center, var(--color-bg) 42%, transparent 78%); }
.ml-404-inner { position: relative; text-align: center; max-width: 620px; margin: 0 auto; }
.ml-404-eyebrow { justify-content: center; }
.ml-404-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.4rem, 5.4vw, 3.75rem); line-height: 1.05; letter-spacing: var(--ls-tight); margin: 22px 0 0; text-wrap: balance; }
.ml-404-body { font: var(--type-body-lg); color: var(--text-secondary); margin: 20px auto 0; max-width: 42ch; }
.ml-404-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 36px; }