/*
Theme Name:   MSP — Mad Scientific Productions
Theme URI:    https://madscientificproductions.com
Description:  GeneratePress child theme for Mad Scientific Productions. Dark lab-industrial design system with an Airbit-powered storefront and licensing presentation.
Author:       Mad Scientific Productions
Template:     generatepress
Version:      1.9.44
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  msp-child
*/

/* =========================================================================
   GLOBAL DESIGN SYSTEM ONLY.
   Rule: anything used on fewer than 2 pages does NOT belong in this file.
   - Homepage-only sections  -> inline <style> in the page's Custom HTML block
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. TOKENS
   Contrast is measured against --msp-bg (#0B0B0B).
   ------------------------------------------------------------------------- */
:root {
	/* Surfaces — flat warm near-blacks. No gradients on structural fills. */
	--msp-bg:            #0B0B0B;  /* page      */
	--msp-surface:       #0F0E0D;  /* alt band  */
	--msp-card:          #111110;
	--msp-card-raised:   #161412;  /* featured tier */

	/* Lines — solid warm grays, 1px. Structure reads through hairlines,
	   not through contrast or shadow. */
	--msp-line:          #201E1C;  /* internal dividers */
	--msp-line-strong:   #2A2724;  /* card + component borders */
	--msp-line-hover:    #3C3730;

	/* Ink — every value below is AA-compliant for body text on --msp-bg */
	--msp-text:          #F2EFEA;  /* warm off-white — 17.2:1 */
	--msp-text-2:        #9A9186;  /* desaturated warm gray — 6.3:1 */
	--msp-muted:         #8B8378;  /* small mono labels — 5.3:1 */

	/* Accent — muted taupe / greige.
	   Unlike the previous accent this clears 4.5:1 as text (4.9:1), so it can
	   be used directly on copy. --msp-accent-text is a lift for 9-10px mono
	   labels where extra headroom is worth having.
	   --msp-accent-ink is the label color ON a taupe fill: near-black gives
	   4.9:1, where off-white would give only 3.5:1 and fail AA. To use an
	   off-white button label instead, --msp-accent must darken to ~#756753. */
	--msp-accent:        #8A7C6A;  /* fills, borders, rules — 4.9:1 */
	--msp-accent-text:   #A2937F;  /* accent-colored text — 6.6:1 */
	--msp-accent-hover:  #9C8E7A;  /* fills lift on hover, never darken */
	--msp-accent-ink:    #0B0B0B;  /* on a taupe fill — 4.9:1 */
	--msp-accent-soft:   rgba(138, 124, 106, .45);
	--msp-accent-wash:   rgba(138, 124, 106, .06);

	/* Type */
	--msp-font-display:  'Chakra Petch', ui-sans-serif, system-ui, sans-serif;
	--msp-font-ui:       system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	--msp-font-mono:     'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

	/* Tracking scale. Headings run tight; only small mono labels open up,
	   and they stay inside the .1em-.15em band. */
	--msp-track-head:    -.005em;
	--msp-track-label:   .14em;

	/* Rhythm */
	--msp-gutter:        clamp(16px, 4vw, 40px);
	--msp-max:           1400px;
	--msp-section-y:     clamp(56px, 7vw, 96px);
	--msp-radius:        2px;      /* minimal, buttons and badges only */

	/* Motion timing */
	--msp-ease:          cubic-bezier(.2, .7, .3, 1);
	--msp-speed:         .18s;
}

/* -------------------------------------------------------------------------
   2. BASE — overrides GeneratePress' light defaults.
   GP ships its own color set via the Customizer; these declarations sit in
   the child stylesheet (loaded after the parent) so equal specificity wins.
   ------------------------------------------------------------------------- */
body {
	background-color: var(--msp-bg);
	color: var(--msp-text-2);
	font-family: var(--msp-font-ui);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}

a {
	color: var(--msp-text);
	text-decoration: none;
	transition: color var(--msp-speed) ease;
}

a:hover,
a:focus {
	color: var(--msp-accent-text);
}

/* Uppercase sans, tight tracking, medium weight — never bold-heavy. */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--msp-font-display);
	font-weight: 500;
	color: var(--msp-text);
	text-transform: uppercase;
	letter-spacing: var(--msp-track-head);
	line-height: 1.12;
	text-wrap: balance;
}

p { text-wrap: pretty; line-height: 1.7; }

button, input, select, textarea { font: inherit; color: inherit; }

::selection { background: var(--msp-accent); color: var(--msp-accent-ink); }

/* Visible focus for keyboard users on every interactive element. */
:focus-visible {
	outline: 2px solid var(--msp-accent-text);
	outline-offset: 3px;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--msp-surface); }
::-webkit-scrollbar-thumb { background: var(--msp-accent); }
::-webkit-scrollbar-thumb:hover { background: var(--msp-accent-hover); }

/* -------------------------------------------------------------------------
   3. LAYOUT PRIMITIVES
   ------------------------------------------------------------------------- */
.msp-wrap {
	max-width: var(--msp-max);
	margin-inline: auto;
	padding-inline: var(--msp-gutter);
}

.msp-section { padding-block: var(--msp-section-y); }

.msp-rule-t { border-top: 1px solid var(--msp-line); }
.msp-rule-b { border-bottom: 1px solid var(--msp-line); }

.msp-surface { background: var(--msp-surface); }

.msp-stack {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

/* Full-bleed pages: neutralize GP's article padding. The body class added in
   functions.php remains the primary mechanism; these rules are a safety net. */
.msp-home .site-content,
.msp-home .content-area,
.msp-home .site-main,
.msp-fullwidth,
.msp-fullwidth .site-main,
.msp-fullwidth .entry-content { padding: 0; margin: 0; }

.msp-home .inside-article { padding: 0; }

.msp-home .entry-content > :first-child,
.msp-fullwidth .entry-content > :first-child { margin-top: 0; }
.msp-home .entry-content > :last-child,
.msp-fullwidth .entry-content > :last-child  { margin-bottom: 0; }

/* -------------------------------------------------------------------------
   4. TYPE COMPONENTS
   ------------------------------------------------------------------------- */
.msp-eyebrow {
	display: block;
	font-family: var(--msp-font-mono);
	font-size: 11px;
	font-weight: 400;
	letter-spacing: var(--msp-track-label);
	text-transform: uppercase;
	color: var(--msp-accent-text);
}

.msp-h2 {
	margin: 0;
	font-weight: 500;
	font-size: clamp(24px, 3.6vw, 40px);
}

/* Long-form copy is never centered and never full-bleed wide. */
.msp-lede {
	margin: 0;
	font-size: clamp(14.5px, 1.6vw, 16.5px);
	line-height: 1.7;
	color: var(--msp-text-2);
	max-width: 58ch;
}

.msp-meta {
	font-family: var(--msp-font-mono);
	font-size: 11px;
	letter-spacing: var(--msp-track-label);
	text-transform: uppercase;
	color: var(--msp-muted);
}

.msp-section-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
}

/* -------------------------------------------------------------------------
   5. BUTTONS
   ------------------------------------------------------------------------- */
.msp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	min-height: 56px;
	padding-inline: 32px;
	border: 1px solid transparent;
	border-radius: var(--msp-radius);
	font-family: var(--msp-font-display);
	font-weight: 500;
	font-size: 14px;
	letter-spacing: .15em;
	text-transform: uppercase;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color var(--msp-speed) ease,
	            color var(--msp-speed) ease,
	            border-color var(--msp-speed) ease;
}

/* Primary action: solid taupe fill, near-black label.
   Fills lift on hover rather than darkening — on a near-black page a
   darkening fill reads as disabled, and it would drop the label below AA. */
.msp-btn--solid {
	background: var(--msp-accent);
	color: var(--msp-accent-ink);
	border-color: var(--msp-accent);
}

.msp-btn--solid:hover,
.msp-btn--solid:focus-visible {
	background: var(--msp-accent-hover);
	border-color: var(--msp-accent-hover);
	color: var(--msp-accent-ink);
}

/* Off-white fill — the brightest action on the page. Reserved for the single
   primary CTA in a section; the taupe fill is the workhorse everywhere else.

   Two defenses, because this button rendered with no fill at all in the
   browser while every other component was styling correctly:
   1. The selector is doubled (.msp-btn.msp-btn--light) so it outranks the
      link and button rules GeneratePress prints from the Customizer, which
      land after this file in the cascade.
   2. Tokens carry literal fallbacks. A `background: var(--x)` where --x is
      undefined is invalid at computed-value time and resolves to the initial
      value — transparent — rather than being ignored, which is exactly the
      failure that was showing. */
.msp-btn.msp-btn--light {
	background-color: var(--msp-text, #F2EFEA);
	color: var(--msp-bg, #0B0B0B);
	border-color: var(--msp-text, #F2EFEA);
}

.msp-btn.msp-btn--light:hover,
.msp-btn.msp-btn--light:focus-visible {
	background-color: #E4DFD7;
	border-color: #E4DFD7;
	color: var(--msp-bg, #0B0B0B);
}

/* Secondary action: hairline only. */
.msp-btn--ghost {
	background: transparent;
	color: var(--msp-text);
	border-color: var(--msp-line-strong);
}

.msp-btn--ghost:hover,
.msp-btn--ghost:focus-visible {
	background: transparent;
	border-color: var(--msp-accent);
	color: var(--msp-text);
}

.msp-btn--sm {
	min-height: 48px;
	padding-inline: 21px;
	font-size: 13px;
	letter-spacing: .13em;
	gap: 10px;
}

/* Decorative arrow. Pure CSS — no icon font, no SVG request. */
.msp-btn__arrow {
	position: relative;
	display: block;
	width: 22px;
	height: 1.5px;
	background: currentColor;
	flex: none;
}

.msp-btn__arrow::after {
	content: "";
	position: absolute;
	right: 0;
	top: -3px;
	width: 7px;
	height: 7px;
	border-right: 1.5px solid currentColor;
	border-top: 1.5px solid currentColor;
	transform: rotate(45deg);
}

/* Underlined text link with rule. */
.msp-link {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	width: fit-content;
	padding-bottom: 6px;
	border-bottom: 1px solid var(--msp-line-strong);
	font-family: var(--msp-font-display);
	font-weight: 500;
	font-size: 12.5px;
	letter-spacing: var(--msp-track-label);
	text-transform: uppercase;
	color: var(--msp-text);
	transition: border-color var(--msp-speed) ease;
}

.msp-link:hover,
.msp-link:focus-visible { border-color: var(--msp-accent); color: var(--msp-text); }

.msp-link::after {
	content: "";
	width: 20px;
	height: 1px;
	background: currentColor;
}

/* -------------------------------------------------------------------------
   6. PLACEHOLDER / STATUS NOTICES
   Used while license terms or other reviewed content are pending.
   ------------------------------------------------------------------------- */
.msp-note {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	padding: 13px 16px;
	border: 1px dashed var(--msp-accent-soft);
	background: var(--msp-accent-wash);
	font-size: 12.5px;
	line-height: 1.6;
	color: var(--msp-muted);
}

/* A notice carries no outer margin of its own — it is spaced by whatever
   contains it. This modifier is for the common case: a notice closing out a
   section, directly under the block it qualifies. */
.msp-note--top { margin-top: clamp(20px, 2.6vw, 30px); }

/* Inline link inside a notice. Underlined, because at this size and color a
   color change alone is not a reliable affordance. */
.msp-note__link {
	color: var(--msp-accent-text);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.msp-note__link:hover,
.msp-note__link:focus-visible { color: var(--msp-text); }

.msp-flag {
	flex: none;
	padding: 3px 7px;
	border: 1px solid var(--msp-accent-soft);
	border-radius: var(--msp-radius);
	font-family: var(--msp-font-mono);
	font-size: 10px;
	letter-spacing: var(--msp-track-label);
	text-transform: uppercase;
	color: var(--msp-accent-text);
}

/* Small solid taupe badge — featured tier marker. */
.msp-badge {
	flex: none;
	padding: 4px 8px;
	border-radius: var(--msp-radius);
	background: var(--msp-accent);
	color: var(--msp-accent-ink);
	font-family: var(--msp-font-mono);
	font-size: 9px;
	letter-spacing: var(--msp-track-label);
	text-transform: uppercase;
	white-space: nowrap;
}

/* Small rotated square used as a list marker. */
.msp-diamond {
	display: block;
	flex: none;
	width: 7px;
	height: 7px;
	margin-top: 5px;
	border: 1px solid var(--msp-accent);
	transform: rotate(45deg);
}

/* -------------------------------------------------------------------------
   7. INTERIOR PAGE COMPONENTS
   Shared by the pages built on the MSP Full Width template. Promoted here
   from homepage.html once a second page needed them — see the CSS placement
   rule at the top of this file.
   ------------------------------------------------------------------------- */

/* --- Document shell ------------------------------------------------------
   The technical-drawing furniture: film grain, sheet header, section numeral
   and section head. Authored on About, promoted here once Licensing adopted
   the same treatment. Each page still opts in by putting the markup on the
   page — none of this is injected sitewide. */

/* Fixed viewport overlay. Sits above content, takes no pointer events. */
.msp-grain {
	position: fixed;
	inset: 0;
	z-index: 55;
	pointer-events: none;
	opacity: .05;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
}

/* Sheet header above the hero. Names the document and its status. */
.msp-doc {
	border-bottom: 1px solid var(--msp-line);
	background: var(--msp-bg);
}

.msp-doc__inner {
	display: flex;
	align-items: center;
	gap: clamp(14px, 2.4vw, 28px);
	padding-block: 10px;
	font-family: var(--msp-font-mono);
	font-size: 10px;
	letter-spacing: var(--msp-track-label);
	text-transform: uppercase;
	color: var(--msp-muted);
}

.msp-doc__inner > span { flex: none; }

/* Selector matches the one above on specificity plus a class, so the rule
   takes the slack without needing !important. */
.msp-doc__inner > .msp-doc__rule {
	flex: 1 1 auto;
	height: 1px;
	background: linear-gradient(90deg, var(--msp-line), transparent);
}

/* The sheet number and revision are reference only — drop them below 700px
   before the status flag starts wrapping onto its own line. */
@media (max-width: 700px) {
	.msp-doc__opt { display: none; }
}

/* Section shell: the wrap plus the taller vertical rhythm these pages use. */
.msp-asec { padding-block: clamp(64px, 8vw, 120px); }

/* A block that hosts a watermark numeral, and the content that has to sit
   above it. Paired — the numeral is positioned against .msp-anchor. */
.msp-anchor { position: relative; }
.msp-anchor--clip { overflow: hidden; }

.msp-layer { position: relative; z-index: 1; }

/* Oversized outlined section numeral. Decorative, sits behind content. */
.msp-wm {
	position: absolute;
	font-family: var(--msp-font-display);
	font-weight: 600;
	font-size: clamp(110px, 18vw, 260px);
	line-height: 1;
	color: transparent;
	-webkit-text-stroke: 1px var(--msp-line);
	pointer-events: none;
	user-select: none;
}

.msp-wm--tr { top: clamp(16px, 3vw, 40px); right: clamp(0px, 1vw, 24px); }
.msp-wm--bl { bottom: clamp(8px, 2vw, 24px); left: clamp(0px, 1vw, 16px); }

/* On a surface band the page-line stroke disappears — step it up one. */
.msp-wm--up { -webkit-text-stroke-color: var(--msp-line-strong); }

/* Section head: title block left, short intro right. */
.msp-ahead {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px 48px;
}

.msp-ahead__intro {
	margin: 0;
	font-size: 14px;
	line-height: 1.7;
	color: var(--msp-text-2);
	max-width: 36ch;
}

.msp-ah2 {
	margin: 0;
	font-weight: 500;
	font-size: clamp(30px, 5vw, 60px);
	line-height: 1.08;
}

.msp-ah2--narrow { max-width: 14ch; font-size: clamp(28px, 4.4vw, 52px); }

/* --- Below-fold reveals --------------------------------------------------
   The hiding class is only ever added by a page's reveal script, and only to
   blocks below the fold. No script, no class, no hidden content. Each script
   bails on prefers-reduced-motion before it adds anything. */
.is-reveal {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity .7s var(--msp-ease), transform .7s var(--msp-ease);
}

.is-reveal.is-revealed {
	opacity: 1;
	transform: none;
}

/* --- Page hero -----------------------------------------------------------
   The compact counterpart to the homepage hero: no photograph, no emblem,
   just the band of type that names each interior page. */
.msp-phero {
	position: relative;
	border-bottom: 1px solid var(--msp-line-strong);
	background: var(--msp-surface);
}

.msp-phero__inner {
	max-width: var(--msp-max);
	margin-inline: auto;
	padding: clamp(44px, 6.5vw, 84px) var(--msp-gutter) clamp(36px, 5vw, 64px);
	display: flex;
	flex-direction: column;
	gap: 18px;
	align-items: flex-start;
}

.msp-phero__title {
	margin: 0;
	font-weight: 500;
	font-size: clamp(30px, 5vw, 54px);
	line-height: 1.06;
	letter-spacing: var(--msp-track-head);
	color: var(--msp-text);
	max-width: 18ch;
}

.msp-phero__lede { max-width: 54ch; }

.msp-phero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 8px;
}

/* Mono facts under the hero copy — the page's specification line. */
.msp-phero__facts {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 22px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.msp-phero__facts li {
	display: flex;
	align-items: center;
	gap: 9px;
	font-family: var(--msp-font-mono);
	font-size: 10.5px;
	letter-spacing: var(--msp-track-label);
	text-transform: uppercase;
	color: var(--msp-muted);
}

/* --- Process / roadmap grids --------------------------------------------
   Shared foundations for the About stages, Licensing process and Beat Store
   roadmap. Page-specific column behavior and spacing stay inline. */
.msp-steps,
.msp-plan {
	display: grid;
	gap: 1px;
	margin: clamp(28px, 3.5vw, 44px) 0 0;
	padding: 0;
	list-style: none;
	background: var(--msp-line);
	border: 1px solid var(--msp-line-strong);
}

.msp-step,
.msp-plan__item {
	background: var(--msp-bg);
	padding: clamp(22px, 2.6vw, 30px);
	display: flex;
	flex-direction: column;
}

.msp-step__num,
.msp-plan__num,
.msp-chain__num {
	font-family: var(--msp-font-mono);
	font-size: 10px;
	letter-spacing: var(--msp-track-label);
	text-transform: uppercase;
	color: var(--msp-accent-text);
}

.msp-step__title,
.msp-plan__title,
.msp-chain__title {
	margin: 0;
	font-family: var(--msp-font-display);
	font-weight: 500;
	font-size: 15px;
	letter-spacing: var(--msp-track-head);
	text-transform: uppercase;
	color: var(--msp-text);
	line-height: 1.2;
}

.msp-step__body,
.msp-plan__body {
	margin: 0;
	font-size: 13px;
	line-height: 1.65;
	color: var(--msp-text-2);
}

/* --- Captioned media frame -----------------------------------------------
   Hairline-bordered image with a caption plate in the bottom-left corner.
   Promoted from homepage.html when the About page needed the same frame.
   Ratio-agnostic on purpose — pair it with a ratio utility rather than baking
   an aspect ratio in here. */
.msp-figure {
	position: relative;
	overflow: hidden;
	border: 1px solid var(--msp-line-strong);
	margin: 0;
}

.msp-figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	opacity: .8;
}

/* Plate rather than a gradient scrim: the caption sits over photography of
   unknown brightness, so it carries its own near-opaque ground. */
.msp-figure__caption {
	position: absolute;
	left: 0;
	bottom: 0;
	padding: 9px 12px;
	background: rgba(11, 11, 11, .85);
	border-top: 1px solid var(--msp-line-strong);
	border-right: 1px solid var(--msp-line-strong);
	font-family: var(--msp-font-mono);
	font-size: 9.5px;
	letter-spacing: var(--msp-track-label);
	text-transform: uppercase;
	color: var(--msp-muted);
}

/* --- License tier cards --------------------------------------------------
   Responsive agreement grid. Hairline borders and generous padding carry the
   structure; no shadows anywhere in this design. */
.msp-lic__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: clamp(14px, 1.6vw, 20px);
	margin-top: clamp(30px, 4vw, 46px);
	align-items: stretch;
}

.msp-lic__card {
	display: flex;
	flex-direction: column;
	padding: clamp(26px, 3vw, 38px);
	background: var(--msp-card);
	border: 1px solid var(--msp-line-strong);
}

.msp-lic__card--featured {
	background: var(--msp-card-raised);
	border-color: var(--msp-accent-soft);
}

.msp-lic__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 14px;
}

.msp-lic__code {
	display: block;
	font-family: var(--msp-font-mono);
	font-size: 9.5px;
	letter-spacing: var(--msp-track-label);
	text-transform: uppercase;
	color: var(--msp-muted);
	margin-bottom: 8px;
}

.msp-lic__name {
	margin: 0;
	font-family: var(--msp-font-display);
	font-weight: 500;
	font-size: 19px;
	letter-spacing: var(--msp-track-head);
	text-transform: uppercase;
	color: var(--msp-text);
	line-height: 1.15;
}

.msp-lic__desc {
	margin: 16px 0 0;
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--msp-text-2);
	max-width: 42ch;
	min-height: calc(1.6em * 3);
}

.msp-lic__price {
	margin-top: 24px;
	padding: 18px 0;
	border-top: 1px solid var(--msp-line);
	border-bottom: 1px solid var(--msp-line);
	display: flex;
	align-items: baseline;
	gap: 11px;
}

.msp-lic__amount {
	font-family: var(--msp-font-display);
	font-weight: 500;
	font-size: 34px;
	letter-spacing: var(--msp-track-head);
	color: var(--msp-text);
}

.msp-lic__pending {
	font-family: var(--msp-font-mono);
	font-size: 9.5px;
	letter-spacing: var(--msp-track-label);
	text-transform: uppercase;
	color: var(--msp-accent-text);
}

/* Spec rows: mono label left, value right, hairline between.
   Bottom margin is the CTA's minimum breathing room — the auto margin on
   .msp-lic__cta adds to it rather than replacing it. */
.msp-lic__rows { margin: 20px 0 26px; }

.msp-lic__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 11px 0;
	border-bottom: 1px solid var(--msp-line);
}

.msp-lic__row dt {
	font-family: var(--msp-font-mono);
	font-size: 10.5px;
	letter-spacing: var(--msp-track-label);
	text-transform: uppercase;
	color: var(--msp-muted);
}

.msp-lic__row dd {
	margin: 0;
	font-family: var(--msp-font-mono);
	font-size: 11px;
	letter-spacing: .06em;
	color: var(--msp-text);
	text-align: right;
}

/* Dashed underline marks a value the license schedule has not fixed yet. */
.msp-lic__row dd.is-pending {
	color: var(--msp-muted);
	border-bottom: 1px dashed var(--msp-accent-soft);
	padding-bottom: 1px;
}

/* The CTA takes each equal-height card's leftover space, keeping a shared
   baseline even when descriptions wrap differently. */
.msp-lic__cta {
	margin-top: auto;
	width: 100%;
}

/* --- Closing CTA band ----------------------------------------------------
   Shared by Licensing, Contact and FAQ. Keeps the copy/actions relationship
   consistent without promoting any page-specific content styles. */
.msp-cta__inner {
	max-width: var(--msp-max);
	margin-inline: auto;
	padding: clamp(48px, 6vw, 78px) var(--msp-gutter);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: clamp(24px, 4vw, 48px);
}

.msp-cta__copy {
	flex: 1 1 380px;
	min-width: 0;
}

.msp-cta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

@media (max-width: 560px) {
	.msp-cta__actions { width: 100%; }
	.msp-cta__actions .msp-btn { width: 100%; }
}

/* --- Legal / policy pages -----------------------------------------------
   Shared by Terms, Privacy and DMCA. The document shell stays intact while
   client-approved policy language replaces the clearly marked briefs. */
.msp-policy-index {
	padding-block: clamp(24px, 3.4vw, 38px);
}

.msp-policy-switch {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1px;
	margin: 0;
	padding: 1px;
	background: var(--msp-line);
	list-style: none;
}

.msp-policy-switch__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	min-height: 62px;
	padding: 16px 18px;
	background: var(--msp-bg);
	font-family: var(--msp-font-display);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: var(--msp-track-label);
	text-transform: uppercase;
	color: var(--msp-text-2);
}

.msp-policy-switch__link::after {
	content: "";
	width: 7px;
	height: 7px;
	border: 1px solid var(--msp-accent);
	transform: rotate(45deg);
	flex: none;
}

.msp-policy-switch__link:hover,
.msp-policy-switch__link:focus-visible {
	background: var(--msp-card);
	color: var(--msp-text);
}

.msp-policy-switch__link[aria-current="page"] {
	background: var(--msp-card-raised);
	color: var(--msp-text);
}

.msp-policy-switch__link[aria-current="page"]::after {
	background: var(--msp-accent);
}

.msp-legal-layout {
	display: grid;
	grid-template-columns: minmax(210px, .36fr) minmax(0, 1fr);
	gap: clamp(38px, 7vw, 112px);
	align-items: start;
}

.msp-legal-rail {
	position: sticky;
	top: 104px;
}

.msp-legal-meta {
	margin: 0 0 30px;
	border-top: 1px solid var(--msp-line-strong);
}

.msp-legal-meta > div {
	display: grid;
	grid-template-columns: minmax(84px, .7fr) minmax(0, 1fr);
	gap: 14px;
	padding: 13px 0;
	border-bottom: 1px solid var(--msp-line);
}

.msp-legal-meta dt,
.msp-legal-toc__title {
	font-family: var(--msp-font-mono);
	font-size: 10px;
	letter-spacing: var(--msp-track-label);
	text-transform: uppercase;
	color: var(--msp-muted);
}

.msp-legal-meta dd {
	margin: 0;
	font-family: var(--msp-font-mono);
	font-size: 10px;
	letter-spacing: .06em;
	text-align: right;
	color: var(--msp-text);
}

.msp-legal-toc__title {
	display: block;
	margin-bottom: 12px;
}

.msp-legal-toc ol {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: msp-legal-item;
}

.msp-legal-toc li { counter-increment: msp-legal-item; }

.msp-legal-toc a {
	display: grid;
	grid-template-columns: 28px minmax(0, 1fr);
	gap: 9px;
	padding: 5px 0;
	font-size: 12.5px;
	line-height: 1.45;
	color: var(--msp-text-2);
}

.msp-legal-toc a::before {
	content: counter(msp-legal-item, decimal-leading-zero);
	font-family: var(--msp-font-mono);
	font-size: 9px;
	letter-spacing: .08em;
	color: var(--msp-accent-text);
}

.msp-legal-toc a:hover,
.msp-legal-toc a:focus-visible { color: var(--msp-text); }

.msp-legal-doc {
	min-width: 0;
	max-width: 900px;
}

.msp-legal-doc > .msp-note { margin-bottom: clamp(32px, 4vw, 48px); }

.msp-legal-clause {
	display: grid;
	grid-template-columns: 48px minmax(0, 1fr);
	gap: clamp(18px, 3vw, 34px);
	padding: clamp(26px, 3.4vw, 40px) 0;
	border-top: 1px solid var(--msp-line-strong);
	scroll-margin-top: 110px;
}

.msp-legal-clause:last-child { border-bottom: 1px solid var(--msp-line-strong); }

.msp-legal-clause__num {
	padding-top: 4px;
	font-family: var(--msp-font-mono);
	font-size: 10px;
	letter-spacing: var(--msp-track-label);
	color: var(--msp-accent-text);
}

.msp-legal-clause__body {
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
}

.msp-legal-clause__title {
	margin: 0;
	font-size: clamp(18px, 2.2vw, 24px);
}

.msp-legal-clause__brief {
	margin: 0;
	max-width: 72ch;
	font-size: 14px;
	line-height: 1.75;
	color: var(--msp-text-2);
}

@media (max-width: 820px) {
	.msp-legal-layout { grid-template-columns: 1fr; }
	.msp-legal-rail { position: static; }
	.msp-legal-toc ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
	.msp-policy-switch { grid-template-columns: 1fr; }
	.msp-policy-switch__link { min-height: 54px; }
	.msp-legal-toc ol { grid-template-columns: 1fr; }
	.msp-legal-clause { grid-template-columns: 32px minmax(0, 1fr); }
}

/* -------------------------------------------------------------------------
   8. HEADER + PRIMARY NAV  (GeneratePress markup, skinned)
   Navigation is forced to `nav-float-right` in functions.php so the logo and
   menu share one row, matching the design.
   ------------------------------------------------------------------------- */
.site-header {
	position: sticky;
	top: 0;
	z-index: 60;
	background: rgba(11, 11, 11, .86);
	border-bottom: 1px solid var(--msp-line-strong);
}

@supports (backdrop-filter: blur(14px)) {
	.site-header {
		-webkit-backdrop-filter: blur(14px);
		backdrop-filter: blur(14px);
	}
}

.site-header .inside-header {
	max-width: var(--msp-max);
	padding: 0 var(--msp-gutter);
	min-height: 74px;
	align-items: center;
	gap: 20px;
}

.site-logo img,
.site-header .header-image {
	width: 44px;
	height: 44px;
	object-fit: contain;
}

/* Logo lockup keeps wider tracking than the label scale — it is a mark,
   not metadata. */
.site-branding .main-title,
.site-branding .main-title a {
	font-family: var(--msp-font-display);
	font-weight: 600;
	font-size: 15px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--msp-text);
	line-height: 1;
}

.site-branding .site-description {
	margin-top: 5px;
	font-family: var(--msp-font-mono);
	font-size: 9.5px;
	letter-spacing: .3em;
	text-transform: uppercase;
	color: var(--msp-muted);
	line-height: 1;
}

.main-navigation,
.main-navigation .inside-navigation { background: transparent; }

.main-navigation .main-nav > ul > li > a {
	font-family: var(--msp-font-display);
	font-weight: 500;
	font-size: 12.5px;
	letter-spacing: var(--msp-track-label);
	text-transform: uppercase;
	color: var(--msp-text-2);
	border-bottom: 1px solid transparent;
	line-height: 1;
	padding-block: 26px;
	transition: color var(--msp-speed) ease, border-color var(--msp-speed) ease;
}

.main-navigation .main-nav > ul > li > a:hover,
.main-navigation .main-nav > ul > li > a:focus,
.main-navigation .main-nav > ul > li.current-menu-item > a {
	color: var(--msp-text);
	border-bottom-color: var(--msp-accent);
	background: transparent;
}

/* GeneratePress' Customizer can print its current-page link color after the
   child stylesheet. These selectors deliberately outrank that rule so active
   navigation always uses the site's warm taupe instead of the GP blue. */
body .main-navigation .main-nav ul li.current-menu-item > a,
body .main-navigation .main-nav ul li.current-menu-ancestor > a,
body .main-navigation .main-nav ul li.current_page_item > a,
body .main-navigation .main-nav ul li.current_page_ancestor > a {
	color: var(--msp-accent-text, #A2937F);
	border-bottom-color: var(--msp-accent, #8A7C6A);
	background: transparent;
}

/* Sub-menus */
.main-navigation ul ul {
	background: var(--msp-card);
	border: 1px solid var(--msp-line-strong);
}

.main-navigation ul ul li a {
	font-family: var(--msp-font-mono);
	font-size: 12px;
	letter-spacing: var(--msp-track-label);
	text-transform: uppercase;
	color: var(--msp-text-2);
}

.main-navigation ul ul li a:hover { color: var(--msp-text); background: var(--msp-card-raised); }

/* Nav-bar CTA injected via generate_menu_bar_items.
   Border is taupe, not a structural hairline: at #2A2724 the outline was
   effectively invisible against the header (1.3:1) and the button read as
   dead space. Taupe gives it 4.9:1 and the label runs full off-white.

   The selector is written three ways for the same reason .msp-btn--light is:
   GeneratePress colors navigation links from its Customizer CSS, which is
   printed after this stylesheet and reaches the anchor with more specificity
   than a single class. A bare `.msp-nav-cta { color }` lost that fight and
   the label rendered in GP's dim nav gray — legible in theory, unreadable
   against a near-black header in practice. Tokens carry literal fallbacks so
   an unresolved variable cannot silently drop the color back to inherit. */
.main-navigation .menu-bar-items a.msp-nav-cta,
.main-navigation a.msp-nav-cta,
a.msp-nav-cta {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	height: 50px;
	padding-inline: 24px;
	margin-left: 14px;
	background-color: var(--msp-accent-wash, rgba(138, 124, 106, .06));
	border: 1px solid var(--msp-accent, #8A7C6A);
	border-radius: var(--msp-radius);
	font-family: var(--msp-font-mono);
	font-size: 13px;
	letter-spacing: var(--msp-track-label);
	text-transform: uppercase;
	color: var(--msp-text, #F2EFEA);
	line-height: 1;
	user-select: none;
	transition: background-color var(--msp-speed) ease,
	            border-color var(--msp-speed) ease,
	            color var(--msp-speed) ease;
}

.main-navigation .menu-bar-items a.msp-nav-cta:hover,
.main-navigation .menu-bar-items a.msp-nav-cta:focus-visible,
.main-navigation a.msp-nav-cta:hover,
.main-navigation a.msp-nav-cta:focus-visible,
a.msp-nav-cta:hover,
a.msp-nav-cta:focus-visible {
	background-color: var(--msp-accent, #8A7C6A);
	border-color: var(--msp-accent, #8A7C6A);
	color: var(--msp-accent-ink, #0B0B0B);
}

/* The CTA slot holds two anchors and each breakpoint displays exactly one:
   Contact Us on desktop, Beat Store at mobile widths (rules in the 768px
   block below). display uses the same three-tier selector as the base style
   so GP's later stylesheets cannot flip which anchor is visible. */
.main-navigation .menu-bar-items a.msp-nav-cta--store,
.main-navigation a.msp-nav-cta--store,
a.msp-nav-cta--store {
	display: none;
}

/* The popup's own Contact button (appended in functions.php) belongs to the
   mobile menu only; desktop keeps the Contact Us CTA in the header. */
.main-navigation .main-nav > ul > li.msp-menu-cta {
	display: none;
}

/* Mobile toggle — GP owns the open/close state, this is presentation only. */
.main-navigation .menu-toggle,
.mobile-menu-control-wrapper .menu-toggle {
	font-family: var(--msp-font-display);
	font-weight: 500;
	font-size: 12px;
	letter-spacing: var(--msp-track-label);
	text-transform: uppercase;
	color: var(--msp-text);
	background: transparent;
}

/* GeneratePress applies this class to <html> while its mobile menu is open. */
.mobile-menu-open,
.mobile-menu-open body { overflow: hidden; }

@media (max-width: 768px) {
	/* GeneratePress hands every .main-navigation z-index 100, and z-index
	   binds to flex items even without a position. The primary nav is a
	   later flex sibling of the toggle wrapper (which GP also classes
	   main-navigation), so the nav is a stacking context that outranks any
	   lower level: the full-screen open menu inside it buried every control
	   raised to single-digit z values. The wrapper must clear 100 for the
	   close control to paint above the open menu. No `position` here: bare
	   z-index already makes a flex item a stacking context, and staying
	   unpositioned lets the absolute close control below anchor to the
	   sticky header instead of to this small box. */
	.mobile-menu-control-wrapper {
		z-index: 101;
	}

	/* While the menu is open the header contributes only the close control.
	   The identity lockup and the CTA drop out so every page presents the
	   same clean full-screen menu. */
	.mobile-menu-open .site-header .site-logo,
	.mobile-menu-open .site-header .site-branding,
	.mobile-menu-open .site-header .msp-home-brand,
	.mobile-menu-open .mobile-menu-control-wrapper .menu-bar-items {
		visibility: hidden;
	}

	/* Mobile header swaps the CTA: Beat Store replaces Contact Us. Contact
	   stays one tap away as an item inside the popup menu. GP renders the
	   menu-bar-items twice — in the primary nav (desktop) and again in the
	   mobile control wrapper — so these rules reach both copies. */
	.main-navigation .menu-bar-items a.msp-nav-cta--contact,
	.main-navigation a.msp-nav-cta--contact,
	a.msp-nav-cta--contact {
		display: none;
	}

	.main-navigation .menu-bar-items a.msp-nav-cta--store,
	.main-navigation a.msp-nav-cta--store,
	a.msp-nav-cta--store {
		display: inline-flex;
	}

	.main-navigation.toggled .main-nav > ul {
		position: fixed;
		inset: 0;
		z-index: 3;
		display: flex !important;
		flex-direction: column;
		justify-content: center;
		width: 100vw;
		height: 100vh;
		height: 100dvh;
		max-height: none;
		margin: 0;
		padding: max(92px, calc(env(safe-area-inset-top) + 78px)) max(var(--msp-gutter), env(safe-area-inset-right)) max(30px, env(safe-area-inset-bottom)) max(var(--msp-gutter), env(safe-area-inset-left));
		overflow-y: auto;
		overscroll-behavior: contain;
		background:
			radial-gradient(circle at 84% 14%, rgba(162, 147, 127, .09), transparent 32%),
			linear-gradient(145deg, var(--msp-surface) 0 64%, var(--msp-bg) 100%);
		border: 0;
		box-shadow: none;
	}

	.main-navigation.toggled .main-nav > ul > li {
		width: min(100%, 680px);
		margin-inline: auto;
		border-bottom: 1px solid var(--msp-line-strong);
	}

	.main-navigation.toggled .main-nav > ul > li:first-child {
		border-top: 1px solid var(--msp-line-strong);
	}

	.main-navigation.toggled .main-nav > ul > li > a {
		display: flex;
		align-items: center;
		min-height: clamp(58px, 10dvh, 76px);
		margin: 0;
		padding: 14px 0;
		font-size: clamp(25px, 8vw, 38px);
		letter-spacing: .08em;
		border: 0;
	}

	/* Contact closes the popup menu as a standard item under About. Only its
	   visibility is special: the base rules hide it on desktop, where the
	   header already shows the Contact Us CTA. */
	.main-navigation.toggled .main-nav > ul > li.msp-menu-cta {
		display: block;
	}

	/* Keep a clear, tappable close control above the full-screen menu layer.
	   Open state is read from the `mobile-menu-open` class GP puts on <html>,
	   not from aria-expanded alone: GP's menu script stamps that attribute
	   only on the toggle that was clicked, and with nav-float-right the
	   visible control is the external wrapper toggle — so the attribute can
	   be absent from the button the visitor sees while the menu is open. The
	   html class is applied on every open path; the attribute selectors stay
	   as a fallback.

	   `absolute` (anchored to the sticky header, which always sits at the
	   viewport top), never `fixed`: a fixed element's offsetParent is null,
	   and GP's resize handler closes any open menu whose toggle has a null
	   offsetParent. iOS fires such a resize when the scroll lock collapses
	   Safari's URL bar, which snapped the wrapper state shut and left the
	   open menu with a hamburger and no exit. An absolute toggle keeps a
	   real offsetParent, and GP's breakpoint-crossing cleanup still works
	   because above 768px the toggle goes back to display:none. */
	.mobile-menu-open .mobile-menu-control-wrapper .menu-toggle,
	.mobile-menu-open .main-navigation .menu-toggle,
	.mobile-menu-control-wrapper .menu-toggle[aria-expanded="true"],
	.main-navigation .menu-toggle[aria-expanded="true"] {
		position: absolute;
		top: max(12px, env(safe-area-inset-top));
		right: max(16px, env(safe-area-inset-right));
		z-index: 6;
		display: grid;
		place-items: center;
		width: 44px;
		height: 44px;
		padding: 0;
		font-size: 24px;
		line-height: 1;
		color: var(--msp-text);
		background: var(--msp-surface);
		border: 1px solid var(--msp-accent);
	}

	/* The X is drawn here rather than borrowed from GeneratePress. Hide
	   whatever GP put in the button — icon span and Menu label alike — and
	   stack two bars in the same grid cell. */
	.mobile-menu-open .mobile-menu-control-wrapper .menu-toggle > *,
	.mobile-menu-open .main-navigation .menu-toggle > *,
	.mobile-menu-control-wrapper .menu-toggle[aria-expanded="true"] > *,
	.main-navigation .menu-toggle[aria-expanded="true"] > * {
		display: none;
	}

	.mobile-menu-open .mobile-menu-control-wrapper .menu-toggle::before,
	.mobile-menu-open .mobile-menu-control-wrapper .menu-toggle::after,
	.mobile-menu-open .main-navigation .menu-toggle::before,
	.mobile-menu-open .main-navigation .menu-toggle::after,
	.mobile-menu-control-wrapper .menu-toggle[aria-expanded="true"]::before,
	.mobile-menu-control-wrapper .menu-toggle[aria-expanded="true"]::after,
	.main-navigation .menu-toggle[aria-expanded="true"]::before,
	.main-navigation .menu-toggle[aria-expanded="true"]::after {
		content: "";
		grid-area: 1 / 1;
		width: 20px;
		height: 1.5px;
		background: currentColor;
	}

	.mobile-menu-open .mobile-menu-control-wrapper .menu-toggle::before,
	.mobile-menu-open .main-navigation .menu-toggle::before,
	.mobile-menu-control-wrapper .menu-toggle[aria-expanded="true"]::before,
	.main-navigation .menu-toggle[aria-expanded="true"]::before {
		transform: rotate(45deg);
	}

	.mobile-menu-open .mobile-menu-control-wrapper .menu-toggle::after,
	.mobile-menu-open .main-navigation .menu-toggle::after,
	.mobile-menu-control-wrapper .menu-toggle[aria-expanded="true"]::after,
	.main-navigation .menu-toggle[aria-expanded="true"]::after {
		transform: rotate(-45deg);
	}
}

/* -------------------------------------------------------------------------
   8B. AIRBIT STOREFRONT
   ------------------------------------------------------------------------- */
.msp-airbit-store {
	padding-block: clamp(64px, 8vw, 104px);
	background: var(--msp-bg);
	color: var(--msp-text);
}

.msp-airbit-store__intro {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 28px;
	margin-bottom: clamp(28px, 4vw, 44px);
	padding-bottom: clamp(22px, 3vw, 34px);
	border-bottom: 1px solid var(--msp-line-strong);
}

.msp-airbit-store__title {
	margin: 8px 0 0;
	font-family: var(--msp-font-display);
	font-size: clamp(38px, 6vw, 72px);
	font-weight: 500;
	line-height: 1;
	letter-spacing: var(--msp-track-head);
	text-transform: uppercase;
}

.msp-airbit-store__notice {
	display: grid;
	grid-template-columns: minmax(150px, 210px) minmax(0, 1fr);
	gap: 12px 28px;
	margin-bottom: 18px;
	padding: 18px 20px;
	border: 1px solid var(--msp-line-strong);
	border-left: 2px solid var(--msp-accent);
	background: var(--msp-surface);
}

.msp-airbit-store__notice-title {
	font-family: var(--msp-font-mono);
	font-size: 10px;
	letter-spacing: var(--msp-track-label);
	text-transform: uppercase;
	color: var(--msp-accent-text);
}

.msp-airbit-store__notice p {
	max-width: 72ch;
	margin: 0;
	font-size: 13.5px;
	line-height: 1.65;
	color: var(--msp-text-2);
}

.msp-airbit-store__embed {
	width: 100%;
	min-height: 700px;
	overflow: hidden;
	border: 1px solid var(--msp-line-strong);
	background: #0B0B0B;
}

.msp-airbit-store__frame {
	display: block;
	width: 100%;
	max-width: none;
	height: 700px;
	border: 0;
	background: #0B0B0B;
}

@media (max-width: 1024px) {
	.msp-airbit-store__embed { min-height: 620px; }
	.msp-airbit-store__frame { height: 620px; }
}

@media (max-width: 768px) {
	.msp-airbit-store {
		padding-top: 46px;
		padding-bottom: 64px;
	}

	.msp-airbit-store__intro { margin-bottom: 22px; }

	.msp-airbit-store__notice {
		grid-template-columns: 1fr;
		margin-bottom: 14px;
		padding: 16px;
	}

	.msp-airbit-store__embed {
		min-height: 510px;
		margin-inline: calc(var(--msp-gutter) * -1);
		width: calc(100% + (var(--msp-gutter) * 2));
		border-right: 0;
		border-left: 0;
	}

	.msp-airbit-store__frame { height: 510px; }
}

/* -------------------------------------------------------------------------
   9. FOOTER  (GP footer widgets + copyright bar)
   ------------------------------------------------------------------------- */
.site-footer {
	background: var(--msp-surface);
	border-top: 1px solid var(--msp-line);
	color: var(--msp-text-2);
}

.site-footer .footer-widgets {
	padding-block: clamp(44px, 5vw, 66px);
}

.site-footer .inside-footer-widgets {
	max-width: var(--msp-max);
	margin-inline: auto;
	padding-inline: var(--msp-gutter);
	gap: clamp(28px, 3.5vw, 48px);
}

.site-footer .widget-title,
.site-footer .wp-block-heading {
	margin-bottom: 13px;
	font-family: var(--msp-font-mono);
	font-size: 10px;
	font-weight: 400;
	letter-spacing: var(--msp-track-label);
	text-transform: uppercase;
	color: var(--msp-muted);
}

.site-footer .widget ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 13px;
}

.site-footer .widget ul li { margin: 0; border: 0; padding: 0; }

.site-footer .widget a {
	font-size: 13.5px;
	color: var(--msp-text-2);
}

.site-footer .widget a:hover,
.site-footer .widget a:focus-visible { color: var(--msp-text); }

.site-info {
	border-top: 1px solid var(--msp-line);
	background: var(--msp-surface);
}

.site-info .inside-site-info {
	max-width: var(--msp-max);
	margin-inline: auto;
	padding: 20px var(--msp-gutter);
	font-family: var(--msp-font-mono);
	font-size: 10.5px;
	letter-spacing: .11em;
	text-transform: uppercase;
	color: var(--msp-muted);
}

.msp-copyright {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 24px;
	align-items: center;
	justify-content: space-between;
}

.msp-copyright__legal {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px 16px;
}

.msp-copyright__legal a { color: var(--msp-muted); }

.msp-copyright__legal a:hover,
.msp-copyright__legal a:focus-visible { color: var(--msp-text); }

.msp-copyright__policy-stack {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 12px;
	margin-left: auto;
}

.msp-copyright__social {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 9px;
}

.msp-copyright__social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border: 1px solid var(--msp-line-strong);
	border-radius: 50%;
	color: var(--msp-muted);
	transition: border-color var(--msp-speed) ease, color var(--msp-speed) ease, transform var(--msp-speed) ease;
}

.msp-copyright__social a:hover,
.msp-copyright__social a:focus-visible {
	border-color: var(--msp-accent);
	color: var(--msp-text);
	transform: translateY(-1px);
}

.msp-copyright__social svg {
	display: block;
	width: 15px;
	height: 15px;
	fill: currentColor;
}

.msp-copyright__credit { flex-basis: 100%; }

.msp-copyright__credit a {
	color: var(--msp-text);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.msp-copyright__credit a:hover,
.msp-copyright__credit a:focus-visible { color: var(--msp-accent-text); }

@media (max-width: 760px) {
	.msp-copyright { justify-content: flex-start; }
	.msp-copyright__policy-stack {
		order: 3;
		flex-basis: 100%;
		align-items: flex-start;
		margin-left: 0;
	}
	.msp-copyright__legal { justify-content: flex-start; }
	.msp-copyright__social {
		width: 100%;
		justify-content: center;
	}
}

/* Footer identity block (footer widget 1). */
.msp-identity {
	display: flex;
	align-items: center;
	gap: 13px;
	margin-bottom: 16px;
}

.msp-identity img { width: 46px; height: 46px; object-fit: contain; }

.msp-identity__name {
	display: flex;
	flex-direction: column;
	line-height: 1;
	font-family: var(--msp-font-display);
	font-weight: 600;
	font-size: 14px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--msp-text);
}

.msp-identity__sub {
	margin-top: 5px;
	font-family: var(--msp-font-mono);
	font-weight: 400;
	font-size: 9px;
	letter-spacing: .3em;
	color: var(--msp-muted);
}

/* -------------------------------------------------------------------------
   10. FORMS
   ------------------------------------------------------------------------- */
input[type="text"],
input[type="email"],
input[type="search"],
input[type="url"],
input[type="tel"],
textarea,
select {
	height: 52px;
	padding: 0 16px;
	background: var(--msp-card);
	border: 1px solid var(--msp-line-strong);
	border-radius: 0;
	color: var(--msp-text);
	font-size: 14.5px;
	transition: border-color var(--msp-speed) ease;
}

textarea { height: auto; padding: 14px 16px; line-height: 1.7; }

input::placeholder, textarea::placeholder { color: var(--msp-muted); }

input:focus, textarea:focus, select:focus { border-color: var(--msp-accent); }

/* -------------------------------------------------------------------------
   11. UTILITIES
   ------------------------------------------------------------------------- */
.msp-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.msp-hairline {
	display: block;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--msp-line-hover));
}

.msp-hairline--rev { background: linear-gradient(270deg, transparent, var(--msp-line-hover)); }

/* Media containers always reserve their space — no layout shift. */
img, video, iframe { max-width: 100%; height: auto; }

.msp-ratio-43 { aspect-ratio: 4 / 3; }

/* -------------------------------------------------------------------------
   12. MOTION + MOBILE COST CONTROL
   ------------------------------------------------------------------------- */
@media (max-width: 768px) {
	/* backdrop-filter is expensive to composite on mobile GPUs and the header
	   is sticky, so it repaints on every scroll frame. Solid fill instead. */
	.site-header {
		background: var(--msp-bg);
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}

}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}

@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
}

/* -------------------------------------------------------------------------
   13. SURFACE-PAGE CHROME
   Shared presentation for the redesigned homepage and About-page header and
   footer. Every selector is gated by the body class emitted in
   functions.php so all other pages retain the established GeneratePress skin.
   ------------------------------------------------------------------------- */

/* Header plate and compact home identity. */
body.msp-surface-chrome .site-header {
	background: rgba(15, 14, 13, .92);
	border-bottom-color: var(--msp-line);
	box-shadow: inset 0 1px 0 rgba(242, 239, 234, .025);
}

@supports (backdrop-filter: blur(14px)) {
	body.msp-surface-chrome .site-header {
		-webkit-backdrop-filter: blur(14px);
		backdrop-filter: blur(14px);
	}
}

body.msp-surface-chrome .site-header .inside-header {
	width: 100%;
	min-height: 72px;
	gap: clamp(16px, 2.2vw, 30px);
}

/* The injected lockup replaces GP's own branding on every page, so the logo
   and site name are identical sitewide, mobile included. */
.site-header .inside-header > .site-branding-container,
.site-header .inside-header > .site-branding,
.site-header .inside-header > .site-logo {
	display: none;
}

.msp-home-brand {
	display: inline-flex;
	align-items: center;
	gap: 13px;
	flex: none;
	color: var(--msp-text);
}

.msp-home-brand:hover,
.msp-home-brand:focus-visible { color: var(--msp-text); }

.msp-home-brand__mark {
	display: block;
	width: 42px;
	height: 42px;
	object-fit: contain;
}

.msp-home-brand__type {
	display: flex;
	flex-direction: column;
	line-height: 1;
}

.msp-home-brand__name {
	font-family: var(--msp-font-display);
	font-weight: 600;
	font-size: 14px;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.msp-home-brand__sub {
	margin-top: 5px;
	font-family: var(--msp-font-mono);
	font-size: 9px;
	letter-spacing: .3em;
	text-transform: uppercase;
	color: var(--msp-muted);
}

body.msp-surface-chrome .main-navigation { margin-left: auto; }

body.msp-surface-chrome .main-navigation .main-nav > ul > li > a {
	position: relative;
	margin-inline: 13px;
	padding: 29px 0 28px;
	border-bottom: 0;
}

body.msp-surface-chrome .main-navigation .main-nav > ul > li > a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: var(--msp-accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--msp-speed) var(--msp-ease);
}

body.msp-surface-chrome .main-navigation .main-nav > ul > li > a:hover::after,
body.msp-surface-chrome .main-navigation .main-nav > ul > li > a:focus::after,
body.msp-surface-chrome .main-navigation .main-nav > ul > li.current-menu-item > a::after,
body.msp-surface-chrome .main-navigation .main-nav > ul > li.current-menu-ancestor > a::after {
	transform: scaleX(1);
}

body.msp-surface-chrome .main-navigation .menu-bar-items a.msp-nav-cta,
body.msp-surface-chrome .main-navigation a.msp-nav-cta,
body.msp-surface-chrome a.msp-nav-cta {
	position: relative;
	height: 50px;
	padding-inline: 24px;
	background: rgba(138, 124, 106, .08);
	border-color: var(--msp-accent);
	border-radius: 0;
	clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px);
	box-shadow: inset 0 1px 0 rgba(242, 239, 234, .035);
}

body.msp-surface-chrome .main-navigation .menu-bar-items a.msp-nav-cta:hover,
body.msp-surface-chrome .main-navigation .menu-bar-items a.msp-nav-cta:focus-visible,
body.msp-surface-chrome .main-navigation a.msp-nav-cta:hover,
body.msp-surface-chrome .main-navigation a.msp-nav-cta:focus-visible,
body.msp-surface-chrome a.msp-nav-cta:hover,
body.msp-surface-chrome a.msp-nav-cta:focus-visible {
	background: var(--msp-accent);
	border-color: var(--msp-accent);
	color: var(--msp-accent-ink);
	outline-color: currentColor;
	outline-offset: -4px;
}

/* Sitewide directory replaces the configurable widget row visually. */
body.msp-directory-footer .site-footer {
	margin-top: clamp(72px, 7vw, 96px);
	background: var(--msp-surface);
}

body.msp-directory-footer .site-footer .footer-widgets { display: none; }

body.msp-directory-footer .site-info .inside-site-info {
	display: block;
	max-width: none;
	padding: 0;
}

body.msp-directory-footer .msp-home-footer {
	font-family: var(--msp-font-ui);
	font-size: 13.5px;
	font-weight: 400;
	letter-spacing: normal;
	text-align: left;
	text-transform: none;
	color: var(--msp-muted);
}

body.msp-directory-footer .msp-home-footer__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
	gap: clamp(28px, 3.5vw, 48px);
	max-width: var(--msp-max);
	margin-inline: auto;
	padding: 56px var(--msp-gutter) 30px;
}

body.msp-directory-footer .msp-home-footer__identity {
	display: inline-flex;
	align-items: center;
	gap: 13px;
	color: var(--msp-text);
}

body.msp-directory-footer .msp-home-footer__identity:hover,
body.msp-directory-footer .msp-home-footer__identity:focus-visible { color: var(--msp-text); }

body.msp-directory-footer .msp-home-footer__identity img {
	display: block;
	width: 46px;
	height: 46px;
	object-fit: contain;
}

body.msp-directory-footer .msp-home-footer__type {
	display: flex;
	flex-direction: column;
	line-height: 1;
}

body.msp-directory-footer .msp-home-footer__name {
	font-family: var(--msp-font-display);
	font-weight: 600;
	font-size: 14px;
	letter-spacing: .1em;
	text-transform: uppercase;
}

body.msp-directory-footer .msp-home-footer__sub {
	margin-top: 5px;
	font-family: var(--msp-font-mono);
	font-size: 9px;
	letter-spacing: .3em;
	text-transform: uppercase;
	color: var(--msp-muted);
}

body.msp-directory-footer .msp-home-footer__brand p {
	max-width: 34ch;
	margin: 18px 0 0;
	font-size: 13.5px;
	line-height: 1.7;
	color: var(--msp-muted);
}

body.msp-directory-footer .msp-home-footer__column {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
}

body.msp-directory-footer .msp-home-footer__heading {
	display: block;
	margin-bottom: 2px;
	font-family: var(--msp-font-mono);
	font-size: 10px;
	letter-spacing: var(--msp-track-label);
	text-transform: uppercase;
	color: var(--msp-muted);
}

body.msp-directory-footer .msp-home-footer__column a {
	font-size: 13.5px;
	line-height: 1.45;
	color: var(--msp-text-2);
}

body.msp-directory-footer .msp-home-footer__column a:hover,
body.msp-directory-footer .msp-home-footer__column a:focus-visible { color: var(--msp-text); }

body.msp-directory-footer .site-info .copyright-bar {
	width: 100%;
	border-top: 1px solid var(--msp-line);
}

body.msp-directory-footer .msp-copyright {
	max-width: var(--msp-max);
	margin-inline: auto;
	padding: 18px var(--msp-gutter);
	gap: 12px 26px;
}

body.msp-directory-footer .msp-copyright__policy-stack { margin-left: auto; }

body.msp-directory-footer .msp-copyright__legal-name,
body.msp-directory-footer .msp-copyright__credit {
	flex-basis: 100%;
	color: var(--msp-muted);
}

@media (max-width: 1060px) {
	body.msp-surface-chrome .main-navigation .main-nav > ul > li > a {
		margin-inline: 9px;
		font-size: 12px;
	}

	body.msp-surface-chrome .main-navigation .menu-bar-items a.msp-nav-cta,
	body.msp-surface-chrome .main-navigation a.msp-nav-cta,
	body.msp-surface-chrome a.msp-nav-cta {
		margin-left: 8px;
		padding-inline: 18px;
	}
}

@media (max-width: 900px) {
	body.msp-directory-footer .msp-home-footer__inner {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	body.msp-directory-footer .msp-home-footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 768px) {
	body.msp-surface-chrome .site-header {
		background: var(--msp-surface);
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}

	.site-header .inside-header { min-height: 66px; }
	.site-header .inside-header > * { margin-bottom: 0; }
	.msp-home-brand__mark { width: 38px; height: 38px; }
	.mobile-menu-control-wrapper { margin-left: auto; }

	body.msp-surface-chrome .main-navigation.toggled .main-nav > ul {
		background:
			radial-gradient(circle at 84% 14%, rgba(162, 147, 127, .09), transparent 32%),
			linear-gradient(145deg, var(--msp-surface) 0 64%, var(--msp-bg) 100%);
		border: 0;
		box-shadow: none;
	}

	/* The open menu is standardized sitewide. The surface pages' compact
	   desktop link treatment (12px size at 1060px and below, animated
	   underline) outranks the shared popup rules by file order, so the
	   toggled state restates the shared type and drops the underline. */
	body.msp-surface-chrome .main-navigation.toggled .main-nav > ul > li > a {
		margin: 0;
		padding: 14px 0;
		font-size: clamp(25px, 8vw, 38px);
		letter-spacing: .08em;
	}

	body.msp-surface-chrome .main-navigation.toggled .main-nav > ul > li > a::after {
		content: none;
	}

	body.msp-directory-footer .msp-copyright { align-items: flex-start; }
	body.msp-directory-footer .msp-copyright__policy-stack {
		order: 2;
		flex-basis: 100%;
		align-items: flex-start;
		margin-left: 0;
	}
	body.msp-directory-footer .msp-copyright__legal { justify-content: flex-start; }
	body.msp-directory-footer .msp-copyright__social {
		width: 100%;
		justify-content: center;
	}
	body.msp-directory-footer .msp-copyright__legal-name { order: 3; }
	body.msp-directory-footer .msp-copyright__credit { order: 4; }
}

@media (max-width: 620px) {
	.main-navigation .menu-bar-items a.msp-nav-cta,
	.main-navigation a.msp-nav-cta,
	a.msp-nav-cta {
		height: 44px;
		margin-left: 8px;
		padding-inline: 13px;
		font-size: 10px;
	}

	body.msp-directory-footer .msp-home-footer__inner {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		padding-top: 44px;
	}

	body.msp-directory-footer .msp-home-footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 420px) {
	.msp-home-brand { gap: 10px; }
	.msp-home-brand__name { font-size: 12px; }
	.msp-home-brand__sub { font-size: 8px; letter-spacing: .24em; }

	body.msp-directory-footer .msp-home-footer__inner { grid-template-columns: 1fr; }
	body.msp-directory-footer .msp-home-footer__brand { grid-column: auto; }
}

/* -------------------------------------------------------------------------
   14. NOT FOUND
   ------------------------------------------------------------------------- */
.msp-error-page {
	min-height: min(760px, calc(100vh - 72px));
	background: var(--msp-bg);
	color: var(--msp-text);
}

body.error404.msp-directory-footer .site-footer { margin-top: 0; }

.msp-error-page__stage {
	width: 100%;
	max-width: var(--msp-max);
	margin-inline: auto;
	padding: clamp(64px, 9vw, 126px) var(--msp-gutter);
}

.msp-error-page__plate {
	display: grid;
	grid-template-columns: minmax(0, 1.08fr) minmax(280px, .92fr);
	min-height: clamp(430px, 55vw, 560px);
	border: 1px solid var(--msp-line-strong);
	background: var(--msp-card);
	clip-path: polygon(20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 20px);
	box-shadow: inset 0 1px 0 rgba(242, 239, 234, .035);
}

.msp-error-page__copy {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(36px, 6vw, 76px);
}

.msp-error-page__title {
	max-width: 12ch;
	margin: 14px 0 20px;
	font-family: var(--msp-font-display);
	font-size: clamp(40px, 6vw, 72px);
	font-weight: 500;
	line-height: .98;
	letter-spacing: var(--msp-track-head);
	text-transform: uppercase;
}

.msp-error-page__lede {
	max-width: 54ch;
	margin: 0;
	font-size: clamp(15px, 1.6vw, 18px);
	line-height: 1.7;
	color: var(--msp-text-2);
}

.msp-error-page__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 32px;
}

.msp-error-page__routes {
	display: flex;
	flex-wrap: wrap;
	gap: 9px 22px;
	margin-top: 30px;
	padding-top: 20px;
	border-top: 1px solid var(--msp-line);
}

.msp-error-page__routes a {
	font-family: var(--msp-font-mono);
	font-size: 10px;
	letter-spacing: var(--msp-track-label);
	text-transform: uppercase;
	color: var(--msp-muted);
}

.msp-error-page__routes a:hover,
.msp-error-page__routes a:focus-visible { color: var(--msp-text); }

.msp-error-page__code {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(10px, 2vw, 24px);
	overflow: hidden;
	border-left: 1px solid var(--msp-line-strong);
	background: var(--msp-surface);
	color: transparent;
	-webkit-text-stroke: 1px rgba(162, 147, 127, .45);
	font-family: var(--msp-font-display);
	font-size: clamp(92px, 14vw, 188px);
	font-weight: 500;
	line-height: 1;
	letter-spacing: -.08em;
}

.msp-error-page__code i {
	display: block;
	width: 1px;
	height: 44%;
	background: var(--msp-line-strong);
	transform: rotate(12deg);
}

@media (max-width: 820px) {
	.msp-error-page__plate { grid-template-columns: 1fr; }

	.msp-error-page__code {
		min-height: 190px;
		border-top: 1px solid var(--msp-line-strong);
		border-left: 0;
		font-size: clamp(84px, 25vw, 140px);
	}
}

@media (max-width: 520px) {
	.msp-error-page__stage { padding-block: 44px; }
	.msp-error-page__copy { padding: 30px 22px; }
	.msp-error-page__actions { flex-direction: column; align-items: stretch; }
	.msp-error-page__actions .msp-btn { justify-content: center; width: 100%; }
	.msp-error-page__routes { flex-direction: column; align-items: flex-start; }
}