/*
Theme Name: MyInscribe OS
Theme URI: https://myinscribe.com/
Author: MyInscribe
Author URI: https://myinscribe.com/
Description: Block theme for MyInscribe — Answer Engineering for the AI era. Dark editorial system with a single amber accent, WebGL gradient washes and editorial row layouts. Full Site Editing, no plugins required.
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 7.4
Version: 2.1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: myinscribe-os
Tags: full-site-editing, block-patterns, dark, one-column, custom-colors, custom-menu, editor-style, wide-blocks, block-styles

All design tokens live in theme.json. Change a colour there (or in
Appearance -> Editor -> Styles) and it flows through every rule below.
*/

/* ==========================================================================
   0. Token aliases
   Short names that mirror the design system doc, wired to the theme.json
   presets so Site Editor changes still win.
   ========================================================================== */

:root {
	--bg:      var(--wp--preset--color--base);
	--panel:   var(--wp--preset--color--panel);
	--panel-2: var(--wp--preset--color--panel-2);
	--line:    var(--wp--preset--color--line);
	--line-2:  var(--wp--preset--color--line-2);
	--txt:     var(--wp--preset--color--contrast);
	--dim:     var(--wp--preset--color--dim);
	--dim-2:   var(--wp--preset--color--dim-2);
	--amber:   var(--wp--preset--color--amber);
	--cobalt:  var(--wp--preset--color--cobalt);
	--good:    var(--wp--preset--color--good);
	--warn:    var(--wp--preset--color--warn);
	--bad:     var(--wp--preset--color--bad);

	--r-card:   var(--wp--custom--radius--card, 18px);
	--r-panel:  var(--wp--custom--radius--panel, 20px);
	--r-btn:    var(--wp--custom--radius--button, 11px);
	--r-pill:   var(--wp--custom--radius--pill, 999px);
	--ease:     var(--wp--custom--ease, cubic-bezier(0.22, 1, 0.36, 1));
	--nav-h:    var(--wp--custom--nav-height, 72px);
	--prose:    var(--wp--custom--prose-width, 960px);
}

/* ==========================================================================
   1. Base
   ========================================================================== */

html {
	overflow-x: clip;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--nav-h) + 24px);
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

::selection { background: var(--amber); color: var(--bg); }

:where(h1, h2, h3, h4, h5, h6, p, li) { text-wrap: pretty; }
:where(h1, h2) { text-wrap: balance; }

:where(a) { transition: color 0.2s ease; }

:where(a):focus-visible,
:where(button):focus-visible,
:where(summary):focus-visible,
:where(input, textarea, select):focus-visible {
	outline: 2px solid var(--amber);
	outline-offset: 3px;
	border-radius: 4px;
}

img, svg, video { max-width: 100%; height: auto; }

/* Skip link */
.skip-link:focus {
	background: var(--amber);
	color: var(--bg);
	font-weight: 700;
	left: 12px;
	padding: 12px 20px;
	top: 12px;
	z-index: 999;
}

/* ==========================================================================
   2. Layout primitives
   ========================================================================== */

.mi-section { padding-top: clamp(80px, 11vh, 130px); }
.mi-section.is-first,
main > .mi-section:first-child { padding-top: clamp(48px, 6vh, 72px); }
.mi-section.is-tight { padding-top: clamp(48px, 6vh, 72px); }

.mi-prose { max-width: var(--prose); margin-inline: auto; }
.mi-prose p { max-width: 68ch; }

/* Two-column argument layout: rows on the left, sticky evidence on the right. */
.mi-two-col { align-items: flex-start !important; gap: clamp(28px, 4vw, 72px) !important; margin-top: 42px; }
.mi-two-col > .wp-block-column { align-self: flex-start; }
.mi-sticky { position: sticky; top: calc(var(--nav-h) + 32px); }

/* A bare closing rule under a stack of editorial rows. */
.mi-rule { border-top: 1px solid var(--line-2); height: 0; margin: 0; }

/* ==========================================================================
   3. Type roles
   ========================================================================== */

.is-style-mi-eyebrow,
.mi-eyebrow {
	color: var(--amber);
	font-size: var(--wp--preset--font-size--meta);
	font-weight: 800;
	letter-spacing: 0.16em;
	line-height: 1.4;
	text-transform: uppercase;
}
.mi-eyebrow.is-dim { color: var(--dim-2); letter-spacing: 0.1em; }

.is-style-mi-lead,
.mi-lead {
	color: var(--dim);
	font-size: var(--wp--preset--font-size--lead);
	line-height: 1.65;
	max-width: 62ch;
}
.mi-lead.is-centred { margin-inline: auto; text-align: center; }

.mi-body { color: var(--dim); font-size: var(--wp--preset--font-size--body); line-height: 1.72; max-width: 62ch; }

.mi-accent { color: var(--amber); font-weight: 700; }

.mi-meta { color: var(--dim-2); font-size: var(--wp--preset--font-size--small); line-height: 1.6; }

.mi-numeral {
	color: var(--dim-2);
	flex: 0 0 auto;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.1em;
	line-height: 1.9;
	width: 30px;
}

.mi-breadcrumb { color: var(--dim-2); font-size: 13.5px; font-weight: 500; }
.mi-breadcrumb a:hover { color: var(--amber); }

.mi-h2 { margin-top: 0; max-width: 20ch; }
.mi-h2.is-centred { margin-inline: auto; text-align: center; }

/* Core's constrained layout gives every direct child `margin-inline: auto`,
   which centres anything that also has a max-width. Our editorial copy is
   left-aligned unless it opts in, so opt back out. The :not() is there to
   outrank core's :where()-based rule without !important. */
.mi-h2:not(.is-centred),
.mi-lead:not(.is-centred),
.mi-body:not(.is-centred),
.mi-eyebrow:not(.is-centred),
.mi-breadcrumb:not(.is-centred) { margin-inline: 0; }

/* ==========================================================================
   4. Buttons
   ========================================================================== */

.wp-block-button__link,
.wp-element-button {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	transition: filter 0.2s ease, color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
	white-space: nowrap;
}
.wp-block-button__link:hover,
.wp-element-button:hover { filter: brightness(1.1); }

/* Trailing arrow on primary CTAs, drawn in CSS so the copy stays plain text. */
.mi-btn-arrow .wp-block-button__link::after {
	content: "\2192";
	font-size: 1.05em;
	line-height: 1;
	transition: transform 0.2s ease;
}
.mi-btn-arrow .wp-block-button__link:hover::after { transform: translateX(3px); }

.wp-block-button.is-style-outline > .wp-block-button__link {
	background: transparent;
	border: 1px solid var(--line-2);
	color: var(--dim);
	padding: 16px 28px;
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	border-color: var(--dim-2);
	color: var(--txt);
	filter: none;
}

.mi-btns { gap: 14px !important; margin-top: 36px; }
.mi-btns.is-centred { justify-content: center; }

/* ==========================================================================
   5. Header / navigation
   ========================================================================== */

/* Sticky lives on the template-part wrapper, not on .mi-nav — a sticky element
   can only travel inside its own parent, and .mi-nav's parent is exactly its
   own height. */
.mi-nav-wrap {
	position: sticky;
	top: 0;
	z-index: 60;
}
.admin-bar .mi-nav-wrap { top: 32px; }
@media (max-width: 782px) { .admin-bar .mi-nav-wrap { top: 46px; } }

.mi-nav {
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	background: color-mix(in srgb, var(--bg) 85%, transparent);
	border-bottom: 1px solid var(--line);
}
/* Older Safari and Firefox without backdrop-filter get a solid bar rather
   than unreadable translucency. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.mi-nav { background: var(--bg); }
}

.mi-nav__inner {
	align-items: center;
	gap: 32px;
	min-height: var(--nav-h);
}

.mi-logo { align-items: center; display: inline-flex; gap: 8px; }
.mi-logo a { color: var(--txt); }
.mi-logo a:hover { color: var(--txt); }
.mi-logo::after {
	border: 1px solid color-mix(in srgb, var(--amber) 35%, transparent);
	border-radius: 4px;
	color: var(--amber);
	content: "OS";
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.1em;
	line-height: 1;
	padding: 4px 6px;
	transform: translateY(1px);
}

.mi-nav .wp-block-navigation {
	font-size: 14px;
	font-weight: 500;
}
.mi-nav .wp-block-navigation .wp-block-navigation-item__content { color: var(--dim); }
.mi-nav .wp-block-navigation .wp-block-navigation-item__content:hover,
.mi-nav .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content { color: var(--txt); }
.mi-nav .wp-block-navigation__container { gap: 28px; }

.mi-nav .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--bg);
	padding-top: 24px;
}
.mi-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { gap: 18px; }
.mi-nav .wp-block-navigation__responsive-container-open,
.mi-nav .wp-block-navigation__responsive-container-close { color: var(--txt); }

/* The header CTA button sits outside the nav so it never collapses into the overlay. */
.mi-nav__cta .wp-block-button__link { font-size: 14px; padding: 12px 22px; border-radius: 10px; }

/* ==========================================================================
   6. Editorial row — the workhorse list unit
   ========================================================================== */

.mi-rows > .mi-row:first-child { border-top: 1px solid var(--line-2); }

.mi-row {
	align-items: baseline !important;
	border-bottom: 1px solid var(--line-2);
	column-gap: 26px !important;
	flex-wrap: wrap !important;
	padding: 26px 4px;
	row-gap: 6px !important;
	transition: background 0.25s ease;
}
.mi-row:hover { background: var(--panel); }

.mi-row__title {
	flex: 0 1 auto;
	font-size: var(--wp--preset--font-size--h4);
	margin: 0;
	min-width: 230px;
}
.mi-row__body {
	color: var(--dim);
	flex: 1 1 300px;
	font-size: 16px;
	line-height: 1.68;
	margin: 0;
	min-width: 280px;
}
.mi-row__meta {
	color: var(--amber);
	flex: 0 0 auto;
	font-size: var(--wp--preset--font-size--meta);
	font-weight: 800;
	letter-spacing: 0.07em;
	margin: 0;
	text-transform: uppercase;
	white-space: nowrap;
}

/* Stacked variant: numeral + title on one line, indented body underneath. */
.mi-row-stack {
	border-top: 1px solid var(--line-2);
	padding: 26px 2px;
}
.mi-row-stack__head { align-items: baseline !important; column-gap: 18px !important; flex-wrap: nowrap !important; }
.mi-row-stack__head .mi-numeral { width: 30px; }
.mi-row-stack__title { font-size: clamp(21px, 2vw, 28px); margin: 0; }
.mi-row-stack__body { color: var(--dim); font-size: var(--wp--preset--font-size--body); line-height: 1.72; margin: 14px 0 0 48px; max-width: 52ch; }

/* Link row (the "NEXT" stack) */
.mi-links { margin-top: 18px; }
.mi-linkrow {
	align-items: baseline;
	border-top: 1px solid var(--line-2);
	color: var(--txt);
	display: flex;
	font-size: clamp(19px, 1.7vw, 25px);
	font-weight: 800;
	gap: 20px;
	letter-spacing: -0.018em;
	line-height: 1.25;
	margin: 0;
	padding: 22px 4px;
	transition: background 0.25s ease, padding-inline-start 0.25s ease;
}
.mi-linkrow a { display: block; flex: 1; }
.mi-linkrow:hover { background: var(--panel); padding-inline-start: 12px; }
.mi-linkrow::after { color: var(--dim-2); content: "\2197"; font-size: 15px; transition: color 0.25s ease; }
.mi-linkrow:hover::after { color: var(--amber); }

/* Section head: H2 left, short standfirst right. */
.mi-section__head {
	align-items: flex-end !important;
	column-gap: 24px !important;
	flex-wrap: wrap !important;
	row-gap: 12px !important;
}
.mi-section__head .mi-h2 { flex: 1 1 380px; max-width: 18ch; }
.mi-section__aside { flex: 0 1 44ch; font-size: var(--wp--preset--font-size--body); line-height: 1.7; margin: 0; }

/* ==========================================================================
   7. Cards & panels
   ========================================================================== */

.mi-card-grid {
	display: grid;
	gap: 20px;
	grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
	margin-top: 40px;
}
.mi-card-grid > * { margin: 0 !important; }

.is-style-mi-card,
.mi-card {
	background: var(--panel);
	border: 1px solid var(--line-2);
	border-radius: var(--r-card);
	display: flex;
	flex-direction: column;
	padding: 30px;
	transition: border-color 0.25s ease, transform 0.25s var(--ease);
}
.is-style-mi-card:hover,
.mi-card:hover { border-color: var(--dim-2); }

.mi-card__top { align-items: baseline !important; justify-content: space-between; }
.mi-card__top .mi-numeral { line-height: 1.4; width: auto; }
.mi-card__tag {
	color: var(--amber);
	font-size: var(--wp--preset--font-size--meta);
	font-weight: 800;
	letter-spacing: 0.07em;
	text-transform: uppercase;
}
.mi-card__title { margin: 18px 0 0; }
.mi-card__body { color: var(--dim); font-size: 16px; line-height: 1.7; margin: 14px 0 0; }
.mi-card__foot {
	border-top: 1px solid var(--line);
	color: var(--dim-2);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.6;
	margin: 22px 0 0;
	margin-top: auto;
	padding-top: 16px;
}
.mi-card__foot:only-of-type { margin-top: 22px; }

.is-style-mi-panel,
.mi-panel {
	background: var(--panel);
	border: 1px solid var(--line-2);
	border-radius: var(--r-panel);
	padding: clamp(24px, 2.6vw, 36px);
}
.mi-panel__claim { color: var(--txt); font-size: clamp(18px, 1.9vw, 23px); line-height: 1.55; margin: 20px 0 0; }
.mi-panel__note {
	border-top: 1px solid var(--line);
	color: var(--dim);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.65;
	margin-top: 24px;
	padding-top: 20px;
}

/* ==========================================================================
   8. Chips
   ========================================================================== */

.mi-chips { display: flex; flex-wrap: wrap; gap: 10px !important; margin-top: 20px; }
.mi-chips > * { margin: 0 !important; }

.is-style-mi-chip,
.mi-chip {
	border: 1px solid var(--line-2);
	border-radius: var(--r-pill);
	color: var(--dim);
	font-size: var(--wp--preset--font-size--chip);
	font-weight: 500;
	line-height: 1.3;
	padding: 7px 14px;
}
.mi-chip.is-proof {
	border-color: color-mix(in srgb, var(--good) 28%, transparent);
	color: var(--good);
	font-size: var(--wp--preset--font-size--meta);
	font-weight: 800;
	letter-spacing: 0.07em;
	text-transform: uppercase;
}
.mi-chip.is-gap {
	border-color: color-mix(in srgb, var(--bad) 28%, transparent);
	color: var(--bad);
	font-size: var(--wp--preset--font-size--meta);
	font-weight: 800;
	letter-spacing: 0.07em;
	text-transform: uppercase;
}

/* ==========================================================================
   9. Stat row
   ========================================================================== */

.mi-stat-row {
	border-top: 1px solid var(--line-2);
	column-gap: clamp(28px, 5vw, 72px) !important;
	flex-wrap: wrap !important;
	margin-top: 52px;
	padding-top: 32px;
	row-gap: 28px !important;
}
.mi-stat { flex: 0 1 auto; min-width: 190px; }
.mi-stat__value {
	color: var(--amber);
	font-size: var(--wp--preset--font-size--stat);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1;
	margin: 0;
}
.mi-stat__value.is-good { color: var(--good); }
.mi-stat__value.is-bad  { color: var(--bad); }
.mi-stat__label {
	color: var(--dim);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.55;
	margin: 10px 0 0;
	max-width: 26ch;
}

/* ==========================================================================
   10. Hero
   ========================================================================== */

.mi-hero { overflow: hidden; position: relative; }
.mi-hero__body { padding-block: clamp(48px, 8vh, 84px) clamp(60px, 8vh, 90px); position: relative; z-index: 1; }
.mi-hero h1 { margin: 22px 0 0; max-width: 18ch; }
.mi-hero .mi-lead { margin-top: 28px; }
.mi-hero .mi-eyebrow { margin-top: 32px; }
.mi-hero.is-centred .mi-hero__body { text-align: center; }
.mi-hero.is-centred h1,
.mi-hero.is-centred .mi-lead { margin-inline: auto; }

/* ==========================================================================
   11. Gradient wash (myinscribe/gradient-wash)
   ========================================================================== */

/* The wash is a direct child of a constrained section, so core would cap it at
   contentSize and centre it. Force it back to true full bleed. */
.mi-wash {
	inset: 0;
	margin: 0 !important;
	max-width: none !important;
	pointer-events: none;
	position: absolute;
	z-index: 0;
}
.mi-wash animated-gradient { display: block; inset: 0; position: absolute; }
.mi-wash__scrim { inset: 0; position: absolute; }
.mi-wash--scrim-top    .mi-wash__scrim { background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 40%, transparent), color-mix(in srgb, var(--bg) 70%, transparent) 55%, var(--bg) 96%); }
.mi-wash--scrim-both   .mi-wash__scrim { background: linear-gradient(180deg, var(--bg), color-mix(in srgb, var(--bg) 40%, transparent) 45%, var(--bg)); }
.mi-wash--scrim-bottom .mi-wash__scrim { background: linear-gradient(180deg, transparent, var(--bg) 92%); }
.mi-wash--scrim-none   .mi-wash__scrim { display: none; }

/* Editor-side approximation so the canvas never runs inside the editor iframe. */
.mi-wash-preview { border-radius: 8px; min-height: 160px; }

/* ==========================================================================
   12. Accordion (myinscribe/accordion)
   ========================================================================== */

.mi-acc { margin-top: 40px; }
.mi-acc__item {
	border-top: 1px solid var(--line-2);
	transition: background 0.35s ease;
}
.mi-acc__item:last-child { border-bottom: 1px solid var(--line-2); }
.mi-acc__item.is-open { background: var(--panel); }

/* The button is wrapped in an h3 so the accordion appears in the document
   outline; the heading itself carries no visual styling. */
.mi-acc__heading { font-size: inherit; font-weight: inherit; letter-spacing: normal; line-height: inherit; margin: 0; }

.mi-acc__head {
	align-items: baseline;
	background: transparent;
	border: 0;
	color: inherit;
	cursor: pointer;
	display: flex;
	font-family: inherit;
	gap: 22px;
	padding: 26px 4px;
	text-align: left;
	width: 100%;
}
.mi-acc__no { color: var(--dim-2); flex: 0 0 auto; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; width: 26px; }
.mi-acc__name {
	color: var(--txt);
	font-size: clamp(22px, 2.3vw, 34px);
	font-weight: 800;
	letter-spacing: -0.02em;
	transition: color 0.3s ease;
}
.mi-acc__item.is-open .mi-acc__name { color: var(--amber); }
.mi-acc__teaser { color: var(--dim); flex: 1; font-size: 15.5px; min-width: 200px; }
.mi-acc__icon {
	color: var(--dim-2);
	flex: 0 0 auto;
	font-size: 20px;
	line-height: 1;
	transition: transform 0.3s ease, color 0.3s ease;
}
.mi-acc__icon::before { content: "+"; display: block; }
.mi-acc__item.is-open .mi-acc__icon { color: var(--amber); transform: rotate(45deg); }

.mi-acc__panel {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.45s var(--ease);
}
.mi-acc__item.is-open .mi-acc__panel { grid-template-rows: 1fr; }
.mi-acc__panelinner { min-height: 0; overflow: hidden; }
.mi-acc__content { max-width: 78ch; padding: 4px 4px 34px 48px; }
.mi-acc__content > p { color: var(--dim); font-size: var(--wp--preset--font-size--body); line-height: 1.72; margin: 0; }

/* On narrow screens the teaser drops to its own line, but the plus icon has
   to stay on the title line — otherwise it lands alone at the far left and
   stops reading as the row's control. */
@media (max-width: 640px) {
	.mi-acc__head { align-items: center; column-gap: 14px; flex-wrap: wrap; row-gap: 8px; }
	.mi-acc__no     { order: 1; }
	.mi-acc__name   { order: 2; flex: 1 1 0; min-width: 0; }
	.mi-acc__icon   { order: 3; }
	.mi-acc__teaser { order: 4; flex-basis: 100%; margin-left: 40px; min-width: 0; }
	.mi-acc__content { padding-left: 4px; }
}

/* ==========================================================================
   13. Signal bars (myinscribe/signal-bars)
   ========================================================================== */

.mi-signals { display: flex; flex-direction: column; gap: 22px; }
.mi-signal__head { align-items: baseline; display: flex; gap: 16px; justify-content: space-between; }
.mi-signal__label { color: var(--txt); font-size: 15.5px; font-weight: 700; }
.mi-signal__verdict { font-size: 13px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.mi-signal--good .mi-signal__verdict { color: var(--good); }
.mi-signal--warn .mi-signal__verdict { color: var(--warn); }
.mi-signal--bad  .mi-signal__verdict { color: var(--bad); }
.mi-signal__track { background: var(--line); border-radius: 2px; height: 4px; margin-top: 10px; overflow: hidden; }
.mi-signal__fill { border-radius: 2px; display: block; height: 100%; transform-origin: left center; }
.mi-signal--good .mi-signal__fill { background: var(--good); }
.mi-signal--warn .mi-signal__fill { background: var(--warn); }
.mi-signal--bad  .mi-signal__fill { background: var(--bad); }
/* Bars fill in sequence once the block scrolls into view. The stagger is
   nth-child rather than an inline delay, so the markup stays clean. */
.is-revealed .mi-signal__fill { animation: barIn 0.9s var(--ease) both; }
.mi-signals > .mi-signal:nth-child(1) .mi-signal__fill { animation-delay: 0.06s; }
.mi-signals > .mi-signal:nth-child(2) .mi-signal__fill { animation-delay: 0.18s; }
.mi-signals > .mi-signal:nth-child(3) .mi-signal__fill { animation-delay: 0.30s; }
.mi-signals > .mi-signal:nth-child(4) .mi-signal__fill { animation-delay: 0.42s; }
.mi-signals > .mi-signal:nth-child(5) .mi-signal__fill { animation-delay: 0.54s; }
.mi-signals > .mi-signal:nth-child(6) .mi-signal__fill { animation-delay: 0.66s; }
.mi-signals > .mi-signal:nth-child(n + 7) .mi-signal__fill { animation-delay: 0.78s; }

.mi-signals__score {
	align-items: baseline;
	border-top: 1px solid var(--line);
	display: flex;
	gap: 18px;
	margin-top: 28px;
	padding-top: 22px;
}
.mi-signals__number { color: var(--amber); font-size: clamp(38px, 4vw, 52px); font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.mi-signals__verdict { color: var(--dim); font-size: var(--wp--preset--font-size--small); line-height: 1.6; }

/* ==========================================================================
   13b. Tabs (myinscribe/tabs)
   ========================================================================== */

.mi-tabs { margin-top: 36px; }

.mi-tabs__head {
	align-items: baseline;
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	justify-content: space-between;
	margin-bottom: 18px;
}
.mi-tabs__eyebrow {
	color: var(--amber);
	font-size: var(--wp--preset--font-size--meta);
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}
.mi-tabs__meta {
	color: var(--dim-2);
	font-size: var(--wp--preset--font-size--meta);
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
}

.mi-tabs__strip {
	border-bottom: 1px solid var(--line-2);
	display: flex;
	flex-wrap: wrap;
	gap: 26px;
	overflow-x: auto;
	scrollbar-width: none;
}
.mi-tabs__strip::-webkit-scrollbar { display: none; }
.mi-tabs.is-align-center .mi-tabs__strip { justify-content: center; }

.mi-tabs__tab {
	background: transparent;
	border: 0;
	border-bottom: 2px solid transparent;
	color: var(--dim-2);
	cursor: pointer;
	font-family: inherit;
	font-size: 14.5px;
	font-weight: 600;
	margin-bottom: -1px;
	padding: 9px 0 11px;
	transition: color 0.2s ease, border-color 0.2s ease;
	white-space: nowrap;
}
.mi-tabs__tab:hover { color: var(--dim); }
.mi-tabs__tab.is-active { border-bottom-color: var(--amber); color: var(--txt); }

/* Pill variant, for centred tab rows. */
.mi-tabs--pill .mi-tabs__strip { border-bottom: 0; gap: 10px; }
.mi-tabs--pill .mi-tabs__tab {
	border: 1px solid var(--line-2);
	border-radius: 10px;
	margin-bottom: 0;
	padding: 11px 20px;
}
.mi-tabs--pill .mi-tabs__tab.is-active {
	background: var(--panel);
	border-color: var(--amber);
	color: var(--txt);
}

.mi-tabs__panels { padding-top: 30px; }
.mi-tabs__panel { display: none; }
.mi-tabs__panel.is-active { display: block; }
/* Without JS every panel stays visible rather than vanishing. */
.mi-tabs__panels:not([data-uid]) .mi-tabs__panel,
html:not(.js) .mi-tabs__panel { display: block; }
.js .mi-tabs__panel.is-active { animation: fadeSwap 0.45s var(--ease) both; }

@media (max-width: 640px) {
	.mi-tabs__strip { flex-wrap: nowrap; gap: 20px; }
}

/* ==========================================================================
   13c. Quote rotator (myinscribe/quote-rotator)
   ========================================================================== */

.mi-quotes { margin-top: 40px; }
.mi-quote { display: none; margin: 0; }
.mi-quote.is-active { display: block; }
html:not(.js) .mi-quote { display: block; margin-bottom: 40px; }
.js .mi-quote.is-active { animation: fadeSwap 0.5s var(--ease) both; }

.mi-quote__text {
	border: 0;
	color: var(--txt);
	font-size: clamp(22px, 2.8vw, 38px);
	font-weight: 500;
	letter-spacing: -0.015em;
	line-height: 1.4;
	margin: 0;
	max-width: 24ch;
	padding: 0;
	text-wrap: pretty;
}
.mi-quote__by { align-items: baseline; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.mi-quote__name { color: var(--txt); font-size: 15.5px; font-weight: 700; }
.mi-quote__role { color: var(--dim-2); font-size: 15px; }

.mi-quotes__nav {
	border-top: 1px solid var(--line-2);
	display: flex;
	gap: 20px;
	margin-top: 36px;
	padding-top: 20px;
}
.mi-quotes__dot {
	background: transparent;
	border: 0;
	color: var(--dim-2);
	cursor: pointer;
	font-family: inherit;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.1em;
	padding: 4px 0;
	transition: color 0.2s ease;
}
.mi-quotes__dot:hover { color: var(--dim); }
.mi-quotes__dot.is-active { color: var(--amber); }

/* ==========================================================================
   14. Marquee (myinscribe/marquee)
   ========================================================================== */

.mi-marquee {
	border-block: 1px solid var(--line);
	margin-block: clamp(80px, 11vh, 130px) 0;
	overflow: hidden;
	padding: 30px 0;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.mi-marquee__track { animation: marquee 34s linear infinite; display: flex; width: max-content; }
.mi-marquee:hover .mi-marquee__track { animation-play-state: paused; }
.mi-marquee__group { display: flex; }
.mi-marquee__item {
	align-items: center;
	color: color-mix(in srgb, var(--dim) 72%, transparent);
	display: flex;
	font-size: clamp(24px, 2.2vw, 34px);
	font-weight: 800;
	letter-spacing: -0.01em;
	padding-inline: 28px;
	text-transform: uppercase;
	white-space: nowrap;
}
.mi-marquee__item::after {
	background: var(--line-2);
	content: "";
	display: block;
	height: 30px;
	margin-left: 56px;
	width: 1px;
}

/* ==========================================================================
   14b. Reading-request form (myinscribe/contact-form)
   ========================================================================== */

.mi-form {
	background: var(--panel);
	border: 1px solid var(--line-2);
	border-radius: var(--r-panel);
	padding: clamp(26px, 3vw, 40px);
}
.mi-form__grid { display: grid; gap: 18px; grid-template-columns: 1fr 1fr; margin-top: 24px; }
.mi-form__field { display: flex; flex-direction: column; gap: 9px; margin-top: 18px; }
.mi-form__grid .mi-form__field { margin-top: 0; }
.mi-form__label {
	color: var(--dim-2);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}
.mi-form input[type="text"],
.mi-form input[type="email"],
.mi-form textarea {
	background: var(--bg);
	border: 1px solid var(--line-2);
	border-radius: 11px;
	color: var(--txt);
	font-family: inherit;
	font-size: 16px;
	line-height: 1.6;
	padding: 14px 16px;
	width: 100%;
}
.mi-form input:focus, .mi-form textarea:focus { border-color: var(--dim-2); outline: none; }
.mi-form textarea { resize: vertical; }

.mi-form__submit {
	background: var(--amber);
	border: 0;
	border-radius: 12px;
	color: var(--bg);
	cursor: pointer;
	font-family: inherit;
	font-size: 16px;
	font-weight: 600;
	margin-top: 24px;
	padding: 16px 32px;
	transition: filter 0.2s ease;
}
.mi-form__submit:hover { filter: brightness(1.1); }

.mi-form__foot {
	border-top: 1px solid var(--line);
	color: var(--dim-2);
	font-size: 15px;
	line-height: 1.65;
	margin-top: 26px;
	padding-top: 18px;
}
.mi-form__foot a { color: var(--dim); font-weight: 600; }

.mi-form__notice {
	border: 1px solid var(--line-2);
	border-radius: 11px;
	font-size: 15.5px;
	margin: 0 0 22px;
	padding: 14px 16px;
}
.mi-form__notice.is-good { border-color: color-mix(in srgb, var(--good) 40%, transparent); color: var(--good); }
.mi-form__notice.is-bad  { border-color: color-mix(in srgb, var(--bad) 40%, transparent); color: var(--bad); }

/* Honeypot — off-screen rather than display:none, which some bots detect. */
.mi-form__hp { height: 0; left: -9999px; overflow: hidden; position: absolute; width: 0; }

@media (max-width: 640px) { .mi-form__grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   15. CTA band
   ========================================================================== */

.mi-cta {
	border-top: 1px solid var(--line);
	margin-top: clamp(80px, 11vh, 130px);
	overflow: hidden;
	position: relative;
}
.mi-cta__body { padding-block: clamp(80px, 12vh, 130px); position: relative; text-align: center; z-index: 1; }
.mi-cta__body h2 { font-size: var(--wp--preset--font-size--display); letter-spacing: -0.026em; line-height: 1.03; margin: 0 auto; max-width: 18ch; }
.mi-cta__body .mi-lead { margin: 24px auto 0; max-width: 56ch; }
.mi-cta__body .mi-btns { justify-content: center; }

/* ==========================================================================
   16. Footer
   ========================================================================== */

.mi-footer { border-top: 1px solid var(--line); margin-top: clamp(80px, 10vh, 120px); }
.mi-footer__cols {
	display: grid;
	gap: 32px;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	padding-block: 44px;
}
.mi-footer__cols > * { margin: 0 !important; }
.mi-footer__brand { font-size: 20px; font-weight: 800; }
.mi-footer__blurb { color: var(--dim-2); font-size: 14.5px; line-height: 1.6; margin: 10px 0 0; max-width: 26ch; }
.mi-footer__head {
	color: var(--dim-2);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.1em;
	margin: 0 0 11px;
	text-transform: uppercase;
}
.mi-footer__list { color: var(--dim); font-size: 14.5px; list-style: none; margin: 0; padding: 0; }
.mi-footer__list li { margin-bottom: 11px; }
.mi-footer__bar { border-top: 1px solid var(--line); }
.mi-footer__bar-inner {
	align-items: center;
	color: var(--dim-2);
	display: flex;
	flex-wrap: wrap;
	font-size: 13.5px;
	gap: 20px;
	justify-content: space-between;
	padding-block: 20px;
}

/* ==========================================================================
   17. Blog / archive / comments (kept plain, in-system)
   ========================================================================== */

.mi-postcard { border-top: 1px solid var(--line-2); padding: 28px 4px; transition: background 0.25s ease; }
.mi-postcard:hover { background: var(--panel); }
.mi-postcard .wp-block-post-title { font-size: clamp(21px, 2vw, 29px); margin: 0; }
.mi-postcard .wp-block-post-date,
.mi-postcard .wp-block-post-terms { color: var(--dim-2); font-size: 13.5px; }
.mi-postcard .wp-block-post-excerpt__excerpt { color: var(--dim); margin-top: 10px; max-width: 68ch; }

.wp-block-post-content > * { margin-block: 24px; }
.wp-block-post-content > h2 { margin-top: 56px; }
.wp-block-post-content > h3 { margin-top: 40px; }

.wp-block-comments { border-top: 1px solid var(--line-2); margin-top: 64px; padding-top: 40px; }
.wp-block-comment-author-name { font-weight: 700; }
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea,
.wp-block-search__input {
	background: var(--panel);
	border: 1px solid var(--line-2);
	border-radius: 10px;
	color: var(--txt);
	font-family: inherit;
	font-size: 16px;
	padding: 14px 16px;
	width: 100%;
}
.wp-block-search__button { border-radius: 10px; }

/* ==========================================================================
   18. Motion
   ========================================================================== */

@keyframes fadeSwap { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes barIn    { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes marquee  { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes pulse    { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* Scroll reveal, applied by assets/js/view.js. Content is visible by default
   so the page still reads correctly with JS off. */
.js .mi-reveal { opacity: 0; transform: translateY(12px); }
.js .mi-reveal.is-revealed { animation: fadeSwap 0.5s var(--ease) both; opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.js .mi-reveal { animation: none !important; opacity: 1; transform: none; }
	.mi-marquee__track { animation: none; }
	.is-revealed .mi-signal__fill { animation: none; }
	*, *::before, *::after { transition-duration: 0.01ms !important; }
}

/* ==========================================================================
   19. Responsive
   ========================================================================== */

@media (max-width: 1080px) {
	.mi-two-col { flex-wrap: wrap !important; }
	.mi-two-col > .wp-block-column { flex-basis: 100% !important; }
	.mi-sticky { position: static; }
	.mi-card-grid { grid-template-columns: 1fr; }
	.mi-row__title { min-width: 180px; }
}

/* Between the tablet edge and the Navigation block's own 600px overlay
   breakpoint the links have to tighten rather than wrap. */
@media (max-width: 1080px) and (min-width: 601px) {
	.mi-nav .wp-block-navigation__container { gap: 18px; }
	.mi-nav .wp-block-navigation { font-size: 13px; }
}

@media (max-width: 782px) {
	:root { --nav-h: 64px; }
	.mi-nav__inner { gap: 16px; }
	.mi-row { padding: 22px 2px; }
	.mi-row__meta { flex-basis: 100%; }
	.mi-row-stack__body { margin-left: 0; }
	.mi-stat-row { margin-top: 40px; }
	.mi-footer__cols { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 600px) {
	/* The nav collapses to the Navigation block's overlay here, so the CTA
	   stays — it just gets smaller. Hiding it would leave the mobile header
	   with no way to convert. */
	.mi-nav__cta .wp-block-button__link { font-size: 13px; padding: 10px 16px; }
	.mi-card { padding: 24px; }
	.mi-footer__cols { grid-template-columns: 1fr; }
	.mi-footer__bar-inner { flex-direction: column; align-items: flex-start; gap: 8px; }
}

@media print {
	.mi-nav, .mi-wash, .mi-marquee, .mi-cta { display: none !important; }
	body { background: #fff; color: #000; }
}

/* ==========================================================================
   20. Overrides that must not lose
   
   WordPress generates its own global styles for element typography and for
   constrained layout. Exactly which of those land varies by WP version and by
   what else is registered on the site. The rules below are design-system
   invariants, so they are stated here at a specificity that does not depend on
   that pipeline, with literal fallbacks in case the theme.json presets fail to
   generate at all.
   ========================================================================== */

/* --- Type scale ------------------------------------------------------- */

h1.wp-block-heading,
h1.wp-block-post-title,
.mi-hero h1 {
	font-size: var(--wp--preset--font-size--h1, clamp(44px, 5.8vw, 86px));
	font-weight: 800;
	letter-spacing: -0.028em;
	line-height: 1.03;
}
h2.wp-block-heading {
	font-size: var(--wp--preset--font-size--h2, clamp(36px, 4.2vw, 62px));
	font-weight: 800;
	letter-spacing: -0.022em;
	line-height: 1.06;
}
h3.wp-block-heading {
	font-size: var(--wp--preset--font-size--h3, clamp(21px, 1.9vw, 28px));
	font-weight: 800;
	letter-spacing: -0.018em;
	line-height: 1.18;
}
h4.wp-block-heading {
	font-size: var(--wp--preset--font-size--h4, clamp(20px, 1.8vw, 26px));
	font-weight: 800;
	letter-spacing: -0.018em;
}

/* Headings that carry their own scale rather than the default one. */
h3.mi-row__title       { font-size: var(--wp--preset--font-size--h4, clamp(20px, 1.8vw, 26px)); }
h3.mi-row-stack__title { font-size: clamp(21px, 2vw, 28px); }
h3.mi-card__title      { font-size: var(--wp--preset--font-size--h3, clamp(21px, 1.9vw, 27px)); }
h2.mi-banner__title    { font-size: clamp(26px, 2.6vw, 40px); letter-spacing: -0.02em; line-height: 1.1; }
.mi-cta__body h2.wp-block-heading {
	font-size: var(--wp--preset--font-size--display, clamp(38px, 5vw, 76px));
	letter-spacing: -0.026em;
	line-height: 1.03;
}

/* --- Alignment --------------------------------------------------------
   Core gives every direct child of a constrained container `margin: auto`,
   which silently centres anything that also has a max-width. Editorial copy
   is left-aligned unless it opts in. */

.mi-h2:not(.is-centred),
.mi-lead:not(.is-centred),
.mi-body:not(.is-centred),
.mi-eyebrow:not(.is-centred),
.mi-breadcrumb:not(.is-centred),
.mi-section__aside,
.mi-banner__title,
.mi-banner__lead,
.mi-quote__text {
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* The two places that genuinely are centred. */
.mi-cta__body h2,
.mi-cta__body .mi-lead,
.mi-hero.is-centred h1,
.mi-hero.is-centred .mi-lead,
.mi-h2.is-centred,
.mi-lead.is-centred {
	margin-left: auto !important;
	margin-right: auto !important;
}

/* Stat numerals hang from the top of the row, not its middle. */
.mi-stat-row { align-items: flex-start !important; }
.mi-card__top { align-items: baseline !important; }

/* ==========================================================================
   21. Inkwell banner
   ========================================================================== */

.mi-banner {
	border-block: 1px solid var(--line);
	margin-top: clamp(80px, 11vh, 130px);
	overflow: hidden;
	position: relative;
}
/* Without this the gradient wash paints over the copy and dims it. */
.mi-banner__body {
	padding-block: clamp(48px, 7vh, 80px);
	position: relative;
	z-index: 1;
}
.mi-banner__title { margin: 16px 0 0; max-width: 26ch; }
.mi-banner__lead {
	color: var(--dim);
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.7;
	margin: 14px 0 0;
	max-width: 60ch;
}
.mi-banner .mi-btns { margin-top: 26px; }

/* ==========================================================================
   22. Marquee spacing
   Gaps come from the flex parent, so one failed declaration cannot jam every
   word together.
   ========================================================================== */

.mi-marquee__group { align-items: center; display: flex; gap: 0; }
.mi-marquee__item {
	align-items: center;
	display: inline-flex;
	flex: 0 0 auto;
	gap: 60px;
	padding: 0 60px 0 0;
}
.mi-marquee__item::after {
	background: var(--line-2);
	content: "";
	flex: 0 0 1px;
	height: 30px;
	margin: 0;
	width: 1px;
}

/* ==========================================================================
   23. Hero cockpit (Inkwell OS readout)
   ========================================================================== */

.mi-cockpit {
	background: var(--panel);
	border: 1px solid var(--line-2);
	border-radius: var(--r-panel);
	margin-top: 44px;
	padding: clamp(22px, 2.4vw, 32px);
	position: relative;
	z-index: 1;
}
.mi-cockpit .mi-tabs { margin-top: 0; }
.mi-cockpit .mi-tabs__panels { padding-top: 24px; }
.mi-cockpit .mi-stat-row { border-top: 0; margin-top: 0; padding-top: 0; }
.mi-cockpit .mi-signals { margin-top: 18px; }
.mi-cockpit .mi-eyebrow.is-dim { margin-top: 26px; }
.mi-cockpit .mi-rows { margin-top: 14px; }
.mi-cockpit__note {
	border-top: 1px solid var(--line);
	color: var(--dim-2);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.6;
	margin: 26px 0 0;
	padding-top: 18px;
}

/* --- Data table: label, verdict chip, right-aligned figure --------------- */

.mi-table { margin-top: 14px; }
.mi-table__row {
	align-items: baseline !important;
	border-bottom: 1px solid var(--line);
	column-gap: 16px !important;
	flex-wrap: nowrap !important;
	padding: 12px 2px;
}
.mi-table__row.is-head { border-bottom-color: var(--line-2); padding-bottom: 8px; }
.mi-table__row:last-child { border-bottom: 0; }

.mi-table__label {
	color: var(--dim);
	flex: 1 1 auto;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
	margin: 0;
	min-width: 0;
}
.mi-table__chip {
	flex: 0 0 auto;
	font-size: var(--wp--preset--font-size--meta);
	font-weight: 800;
	letter-spacing: 0.07em;
	margin: 0;
	text-align: right;
	text-transform: uppercase;
	width: 46px;
}
.mi-table__chip.is-good { color: var(--good); }
.mi-table__chip.is-bad  { color: var(--bad); }
.mi-table__value {
	color: var(--txt);
	flex: 0 0 auto;
	font-size: 15.5px;
	font-weight: 700;
	margin: 0;
	text-align: right;
	width: 54px;
}
.mi-table__h { color: var(--dim-2) !important; font-size: var(--wp--preset--font-size--meta); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }

/* --- Centred section headers -------------------------------------------- */

.mi-h2.is-centred,
.mi-lead.is-centred { text-align: center; }
.mi-lead.is-centred { max-width: 62ch; }

@media (max-width: 640px) {
	.mi-table__chip { width: 40px; }
	.mi-table__value { width: 46px; }
	.mi-table__label { font-size: 14px; }
}