/*
Theme Name: Positive Aura Editable
Theme URI: https://mypositivemusic.com
Author: Sunwisher GK
Author URI: https://mypositivemusic.com
Description: Dark by default with four accent colours as dashes. A frequency library and resource hub for sound healing built around exact sacred geometry, full-bleed hero artwork on every main page, and three chakra-derived accents against black. Includes a Song post type with per-track frequency data, a Modality taxonomy, and a Resource post type for offers and affiliate listings.
Version: 1.2.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mypositivemusic
Tags: one-column, custom-menu, featured-images, translation-ready, block-styles, wide-blocks
*/

:root {
  --void:       #08080A;
  --void-raise: #141417;
  --void-line:  #24242A;

  --ink:        #F4F4F0;
  --ink-soft:   #C9C9C4;
  --graphite:   #8C8C93;
  --hairline:   var(--void-line);
  --paper:      var(--void);
  --paper-sunk: var(--void-raise);

  --throat:     #1D6FE0;
  --heart:      #12876A;
  --plexus:     #D9A400;
  --ember:      #F26D5B;

  --display: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --data:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --measure: 68ch;
  --shell:   1180px;
  --gutter:  clamp(1.25rem, 4vw, 3rem);

  --step--1: clamp(0.78rem, 0.75rem + 0.15vw, 0.86rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.09rem);
  --step-1:  clamp(1.3rem, 1.2rem + 0.5vw, 1.6rem);
  --step-2:  clamp(1.7rem, 1.45rem + 1.2vw, 2.4rem);
  --step-3:  clamp(2.3rem, 1.7rem + 2.8vw, 4rem);
  --step-4:  clamp(3rem, 1.9rem + 5.4vw, 6.5rem);

  --rule: 1px solid var(--hairline);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--step-0);
  line-height: 1.65;
  font-feature-settings: "kern" 1, "liga" 1;
  -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; text-underline-offset: 0.22em; text-decoration-thickness: 1px; }
a:focus-visible,
button:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--throat);
  outline-offset: 3px;
}

.mpm-skip {
  position: absolute; left: -9999px;
  background: var(--ink); color: var(--paper);
  padding: 0.75rem 1.25rem; z-index: 999;
}
.mpm-skip:focus { left: 1rem; top: 1rem; }

.mpm-shell {
  width: min(100% - var(--gutter) * 2, var(--shell));
  margin-inline: auto;
}

.mpm-narrow { max-width: var(--measure); }

/* ==========================================================================
   CHAKRA / INSTRUMENTS / SUPPORTS
   ========================================================================== */

.mpm-chakra-dots {
  display: inline-flex;
  gap: 3px;
}
.mpm-chakra-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}
.mpm-card__chakra-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.4rem;
}
.mpm-card__chakra-label {
  font-family: var(--data);
  font-size: var(--step--1);
  color: var(--graphite);
  letter-spacing: 0.03em;
}
.mpm-card__tag-row {
  font-size: var(--step--1);
  margin-top: 0.35rem;
  color: var(--graphite);
}
.mpm-card__tag-label {
  font-family: var(--data);
  letter-spacing: 0.03em;
  color: var(--graphite);
}
.mpm-card__tag-value {
  color: var(--ink);
}

.mpm-card__composer {
  font-family: var(--data);
  font-size: var(--step--1);
  color: var(--graphite);
  margin: 0 0 0.2rem;
  letter-spacing: 0.02em;
}

/* ==========================================================================
   TYPE
   ========================================================================== */

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -0.015em;
  margin: 0 0 0.5em;
  text-wrap: balance;
}

h1 { font-size: var(--step-3); }
h2 { font-size: var(--step-2); }
h3 { font-size: var(--step-1); }

p { margin: 0 0 1.35em; text-wrap: pretty; }

.mpm-eyebrow {
  font-family: var(--data);
  font-size: var(--step--1);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--graphite);
  margin: 0 0 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.9rem;
}
.mpm-eyebrow::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--hairline);
}

.mpm-hz {
  font-family: var(--data);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.mpm-spec {
  font-family: var(--data);
  font-size: var(--step--1);
  color: var(--graphite);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 2rem;
  letter-spacing: 0.04em;
}
.mpm-spec > span { display: inline-flex; align-items: center; gap: 0.5rem; }
.mpm-spec > span + span::before {
  content: "";
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--hairline);
  margin-right: 0.25rem;
}

/* ==========================================================================
   GEOMETRY MARKS
   ========================================================================== */

.mpm-geo { display: block; color: var(--ink); }
.mpm-geo line, .mpm-geo circle, .mpm-geo polygon, .mpm-geo path {
  stroke: currentColor;
  fill: none;
  vector-effect: non-scaling-stroke;
}

.mpm-geo--throat { color: var(--throat); }
.mpm-geo--heart  { color: var(--heart); }
.mpm-geo--plexus { color: var(--plexus); }

/* ==========================================================================
   HEADER
   ========================================================================== */

.mpm-masthead {
  border-bottom: 1px solid var(--void-line);
  position: sticky;
  top: 0;
  z-index: 50;
}

.mpm-masthead__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding-block: 1.1rem;
}

.mpm-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  flex-shrink: 0;
}
.mpm-brand__mark { width: 30px; height: 30px; }
.mpm-brand__name {
  font-family: var(--display);
  font-size: 1.35rem;
  letter-spacing: -0.01em;
  line-height: 1;
}
.mpm-brand__name em { font-style: italic; }

.mpm-nav ul {
  list-style: none;
  display: flex;
  gap: 1.6rem;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}
.mpm-nav a {
  text-decoration: none;
  font-size: var(--step--1);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding-block: 0.3rem;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s, color 0.2s;
}
.mpm-nav a:hover { border-bottom-color: var(--throat); color: var(--ink); }
.mpm-nav .current-menu-item > a { border-bottom-color: var(--ink); }

.mpm-navtoggle {
  display: none;
  background: none;
  border: var(--rule);
  font-family: var(--data);
  font-size: var(--step--1);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.5rem 0.9rem;
  cursor: pointer;
  color: var(--ink);
}

@media (max-width: 860px) {
  .mpm-navtoggle { display: block; }
  .mpm-nav {
    display: none;
    position: absolute;
    inset: 100% 0 auto 0;
    background: var(--paper);
    border-bottom: var(--rule);
    padding: 1.25rem var(--gutter) 2rem;
  }
  .mpm-nav.is-open { display: block; }
  .mpm-nav ul { flex-direction: column; gap: 0.35rem; }
  .mpm-nav a { display: block; padding-block: 0.6rem; }
}

/* ==========================================================================
   DARK SURFACES
   ========================================================================== */

.mpm-dark {
  background: var(--paper);
  color: var(--ink);
}

/* ==========================================================================
   HERO
   ========================================================================== */

.mpm-hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(4.5rem, 13vh, 9.5rem) clamp(3.5rem, 9vh, 7rem);
  border-bottom: 1px solid var(--void-line);
}

.mpm-hero__art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: var(--ink);
  opacity: 0.5;
  pointer-events: none;
}
.mpm-hero__art .hero-field,
.mpm-hero__art .hero-flower,
.mpm-hero__art .hero-hexagram,
.mpm-hero__art .hero-rays {
  transform-box: view-box;
  transform-origin: 50% 45.4%;
  animation: mpm-turn 150s linear infinite;
}
.mpm-hero__art .hero-flower  { animation-duration: 210s; animation-direction: reverse; }
.mpm-hero__art .hero-hexagram { animation-duration: 300s; }

.mpm-hero__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.4;
  filter: grayscale(1) contrast(1.1);
}

.mpm-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    var(--void) 0%,
    color-mix(in srgb, var(--void) 88%, transparent) 42%,
    color-mix(in srgb, var(--void) 30%, transparent) 100%
  );
  pointer-events: none;
}

@keyframes mpm-turn { to { rotate: 360deg; } }

.mpm-hero__inner { position: relative; z-index: 2; }

.mpm-hero h1 {
  font-size: var(--step-4);
  max-width: 15ch;
  margin-bottom: 1.5rem;
}
.mpm-hero h1 em {
  font-style: italic;
  background-image: linear-gradient(var(--plexus), var(--plexus));
  background-repeat: no-repeat;
  background-size: 100% 2px;
  background-position: 0 92%;
}

.mpm-hero__lede {
  font-size: var(--step-1);
  max-width: 46ch;
  color: var(--ink-soft);
  line-height: 1.5;
}

/* ==========================================================================
   PAGE HERO
   ========================================================================== */

.mpm-pagehero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(3rem, 9vh, 5.5rem);
  border-bottom: 1px solid var(--void-line);
}
.mpm-pagehero__art {
  position: absolute;
  inset: -30% 0 auto 0;
  height: 220%;
  width: 100%;
  color: var(--ink);
  opacity: 0.3;
  pointer-events: none;
}
.mpm-pagehero__art .hero-field {
  transform-box: view-box;
  transform-origin: 50% 45.4%;
  animation: mpm-turn 220s linear infinite;
}
.mpm-pagehero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    var(--void) 0%,
    color-mix(in srgb, var(--void) 85%, transparent) 55%,
    color-mix(in srgb, var(--void) 35%, transparent) 100%
  );
  pointer-events: none;
}
.mpm-pagehero__inner { position: relative; z-index: 2; }
.mpm-pagehero h1 { margin: 0; max-width: 22ch; }
.mpm-pagehero p {
  margin: 1rem 0 0;
  max-width: 52ch;
  color: var(--ink-soft);
}

.mpm-rail {
  display: flex;
  flex-wrap: wrap;
  gap: 0 2rem;
  margin-top: 3rem;
  padding-top: 1.25rem;
  border-top: var(--rule);
  font-family: var(--data);
  font-size: var(--step--1);
  letter-spacing: 0.08em;
  color: var(--graphite);
}
.mpm-rail span { display: inline-flex; align-items: baseline; gap: 0.5rem; }
.mpm-rail b { font-weight: 500; color: var(--ink); }

/* ==========================================================================
   SECTIONS
   ========================================================================== */

.mpm-section { padding-block: clamp(3.5rem, 9vh, 6.5rem); }
.mpm-section--sunk { background: var(--paper-sunk); border-block: var(--rule); }

.mpm-section__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
  margin-bottom: 2.5rem;
}
.mpm-section__head h2 { margin: 0; max-width: 20ch; }

.mpm-more {
  font-family: var(--data);
  font-size: var(--step--1);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 0.2rem;
  white-space: nowrap;
}
.mpm-more:hover { border-bottom-color: var(--throat); color: var(--throat); }

/* ==========================================================================
   GRIDS
   Library, Journal, and Resources span full viewport width; each card grid
   is a real CSS Grid so a 2-per-row layout is predictable at every width.
   ========================================================================== */

.mpm-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--hairline);
  border: var(--rule);
}
@media (max-width: 650px) {
  .mpm-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   SONG CARDS
   ========================================================================== */

.mpm-card {
  background: var(--paper);
  padding: 1.75rem;
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr) auto;
  gap: 1.5rem;
  align-items: center;
  text-decoration: none;
  transition: background 0.25s;
  min-height: 160px;
  min-width: 0;
  outline: 1px solid transparent;
}
.mpm-card:hover { background: var(--void-raise); }
.mpm-card:hover .mpm-card__geo { opacity: 1; }

.mpm-card__visual {
  width: 160px;
  height: 160px;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 4px;
}
.mpm-card__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.mpm-card__content {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  min-width: 0;
}

.mpm-card__action {
  flex-shrink: 0;
}


/* ==========================================================================
   SONG PAGE
   ========================================================================== */

.mpm-song-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
  padding-block: clamp(2.5rem, 7vh, 5rem);
  border-bottom: var(--rule);
}
@media (max-width: 820px) {
  .mpm-song-head { grid-template-columns: 1fr; }
}

.mpm-song-head__geo {
  width: 100%;
  max-width: 400px;
  height: auto;
  object-fit: cover;
  opacity: 0.85;
}
.mpm-song-head h1 { margin-bottom: 1rem; }

.mpm-player {
  border: var(--rule);
  padding: 1.25rem;
  background: var(--paper);
  margin-bottom: 1.5rem;
}
.mpm-player audio { width: 100%; display: block; }
.mpm-player__label {
  font-family: var(--data);
  font-size: var(--step--1);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--graphite);
  margin-bottom: 0.75rem;
}

.mpm-song-composer {
  font-family: var(--data);
  font-size: var(--step--1);
  color: var(--graphite);
  margin: 0.5rem 0 0;
}
.mpm-song-chakra-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.5rem 0 0;
}
.mpm-song-tag-row {
  font-size: var(--step--1);
  margin: 0.35rem 0 0;
  color: var(--graphite);
}

.mpm-actions { display: flex; flex-wrap: wrap; gap: 0.85rem; }

.mpm-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--data);
  font-size: var(--step--1);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.9rem 1.5rem;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  transition: background 0.2s, color 0.2s;
  cursor: pointer;
}
.mpm-btn:hover { background: transparent; color: var(--ink); }

.mpm-btn--ghost {
  background: transparent;
  color: var(--ink);
}
.mpm-btn--ghost:hover { background: var(--ink); color: var(--paper); }

/* ==========================================================================
   PROSE
   ========================================================================== */

.mpm-prose { font-size: var(--step-0); }
.mpm-prose > p,
.mpm-prose > ul,
.mpm-prose > ol,
.mpm-prose > h2,
.mpm-prose > h3,
.mpm-prose > h4,
.mpm-prose > blockquote {
  max-width: var(--measure);
}
.mpm-prose img,
.mpm-prose figure,
.mpm-prose .wp-block-image,
.mpm-prose .wp-block-cover,
.mpm-prose .wp-block-group,
.mpm-prose .wp-block-media-text {
  width: 100%;
  max-width: none;
}
.mpm-prose h2 { margin-top: 2.2em; }
.mpm-prose h3 { margin-top: 1.8em; }
.mpm-prose img, .mpm-prose iframe { margin-block: 2rem; }
.mpm-prose iframe { width: 100%; border: 0; aspect-ratio: 16 / 9; height: auto; }
.mpm-prose figure { margin: 2rem 0; }
.mpm-prose figcaption {
  font-family: var(--data);
  font-size: var(--step--1);
  color: var(--graphite);
  margin-top: 0.6rem;
}
.mpm-prose blockquote {
  margin: 2rem 0;
  padding-left: 1.5rem;
  border-left: 2px solid var(--heart);
  font-family: var(--display);
  font-size: var(--step-1);
  font-style: italic;
  line-height: 1.35;
}
.mpm-prose ul, .mpm-prose ol { padding-left: 1.3em; margin-bottom: 1.35em; }
.mpm-prose li { margin-bottom: 0.5em; }
.mpm-prose a { text-decoration: underline; text-decoration-color: var(--throat); }
.mpm-prose a:hover { color: var(--throat); }
.mpm-prose .wp-block-video {
  max-width: 540px !important;
  width: 100% !important;
  margin-inline: auto;
}

/* ==========================================================================
   MODALITIES
   ========================================================================== */

.mpm-modalities {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  background: var(--hairline);
  border: var(--rule);
}
.mpm-modality {
  flex: 1 1 calc(50% - 1px);
  background: var(--paper);
  padding: 1.6rem;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  transition: background 0.2s, box-shadow 0.2s;
}
.mpm-modality:hover { background: var(--void-raise); }
.mpm-modality h3 { margin: 0; font-size: var(--step-1); }
.mpm-modality p { margin: 0; font-size: var(--step--1); color: var(--graphite); }
.mpm-modality__count {
  font-family: var(--data);
  font-size: var(--step--1);
  color: var(--graphite);
  letter-spacing: 0.08em;
}
.mpm-modality:nth-child(4n+1):hover { box-shadow: inset 0 3px 0 var(--throat); }
.mpm-modality:nth-child(4n+2):hover { box-shadow: inset 0 3px 0 var(--heart); }
.mpm-modality:nth-child(4n+3):hover { box-shadow: inset 0 3px 0 var(--plexus); }
.mpm-modality:nth-child(4n+4):hover { box-shadow: inset 0 3px 0 var(--ember); }

/* ==========================================================================
   RESOURCES / OFFERS
   ========================================================================== */

.mpm-resource {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  gap: 1.5rem;
  align-items: center;
  padding: 1.5rem 0;
  padding-inline: var(--gutter);
  border-bottom: var(--rule);
  text-decoration: none;
  transition: box-shadow 0.2s;
  padding-left: calc(var(--gutter) + 0.75rem);
  margin-left: -0.75rem;
}
.mpm-resource:first-child { border-top: var(--rule); }
.mpm-resource:hover .mpm-resource__title { color: var(--throat); }
.mpm-resource__geo { width: 56px; height: 56px; opacity: 0.55; }
.mpm-resource__title {
  font-family: var(--display);
  font-size: var(--step-1);
  margin: 0 0 0.25rem;
  transition: color 0.2s;
}
.mpm-resource__desc {
  margin: 0;
  font-size: var(--step--1);
  color: var(--graphite);
}
.mpm-resource__go {
  font-family: var(--data);
  font-size: var(--step--1);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}
@media (max-width: 640px) {
  .mpm-resource { grid-template-columns: 44px minmax(0, 1fr); gap: 1rem; }
  .mpm-resource__go { grid-column: 2; }
  .mpm-resource__geo { width: 44px; height: 44px; }
}
.mpm-resource:nth-child(4n+1):hover { box-shadow: inset 3px 0 0 var(--throat); }
.mpm-resource:nth-child(4n+2):hover { box-shadow: inset 3px 0 0 var(--heart); }
.mpm-resource:nth-child(4n+3):hover { box-shadow: inset 3px 0 0 var(--plexus); }
.mpm-resource:nth-child(4n+4):hover { box-shadow: inset 3px 0 0 var(--ember); }

.mpm-disclosure {
  font-size: var(--step--1);
  color: var(--graphite);
  border-left: 2px solid var(--plexus);
  padding-left: 1rem;
  margin-top: 2.5rem;
  max-width: var(--measure);
}

/* ==========================================================================
   POST LIST
   ========================================================================== */
.mpm-posts {
  display: grid;
  gap: 0;
  padding-inline: var(--gutter);
}
.mpm-post-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr);
  gap: clamp(1.5rem, 5vw, 4rem);
  padding-block: 2.25rem;
  border-bottom: var(--rule);
  align-items: start;
  transition: box-shadow 0.2s;
  padding-left: 0.75rem;
  margin-left: -0.75rem;
}
.mpm-post-row:first-child { border-top: var(--rule); }
.mpm-post-row:hover { box-shadow: inset 3px 0 0 var(--ember); }
@media (max-width: 760px) {
  .mpm-post-row { grid-template-columns: 1fr; gap: 0.75rem; }
}
.mpm-post-row__date {
  font-family: var(--data);
  font-size: var(--step--1);
  color: var(--graphite);
  letter-spacing: 0.08em;
  padding-top: 0.4rem;
}
.mpm-post-row h2 { font-size: var(--step-2); margin: 0 0 0.5rem; }
.mpm-post-row h2 a { text-decoration: none; }
.mpm-post-row h2 a:hover { color: var(--throat); }
.mpm-post-row p { margin: 0; color: var(--graphite); max-width: 60ch; }
.sticky .mpm-post-row__date::after {
  content: " / pinned";
  color: var(--ember);
}

/* ==========================================================================
   PAGINATION
   ========================================================================== */

.mpm-pagination {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 3rem;
  font-family: var(--data);
  font-size: var(--step--1);
}
.mpm-pagination .page-numbers {
  padding: 0.6rem 1rem;
  border: var(--rule);
  text-decoration: none;
  letter-spacing: 0.06em;
}
.mpm-pagination .page-numbers.current,
.mpm-pagination .page-numbers:hover {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

.mpm-footer {
  border-top: 1px solid var(--void-line);
  padding-block: clamp(3rem, 8vh, 5rem) 2rem;
  margin-top: 0;
}
.mpm-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(auto-fit, minmax(160px, 1fr));
  gap: 2.5rem;
  margin-bottom: 3rem;
}
.mpm-footer h4 {
  font-family: var(--data);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--graphite);
  margin: 0 0 1rem;
}
.mpm-footer ul { list-style: none; margin: 0; padding: 0; }
.mpm-footer li { margin-bottom: 0.5rem; }
.mpm-footer a { text-decoration: none; font-size: var(--step--1); }
.mpm-footer a:hover { color: var(--throat); }
.mpm-footer__blurb { max-width: 34ch; font-size: var(--step--1); color: var(--graphite); }

.mpm-colophon {
  border-top: var(--rule);
  padding-top: 1.5rem;
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  font-family: var(--data);
  font-size: var(--step--1);
  color: var(--graphite);
  letter-spacing: 0.05em;
  position: relative;
}
.mpm-colophon::before {
  content: "";
  position: absolute;
  top: -1px; left: 0;
  width: 104px;
  height: 2px;
  background: linear-gradient(
    90deg,
    var(--throat)  0 20px, transparent 20px 28px,
    var(--heart)  28px 48px, transparent 48px 56px,
    var(--plexus) 56px 76px, transparent 76px 84px,
    var(--ember)  84px 104px
  );
}

/* ==========================================================================
   WORDPRESS CORE CLASSES
   ========================================================================== */

.screen-reader-text {
  border: 0; clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%); height: 1px; width: 1px;
  margin: -1px; overflow: hidden; padding: 0; position: absolute;
  word-wrap: normal !important;
}
.alignleft  { float: left; margin: 0.5rem 1.5rem 1rem 0; }
.alignright { float: right; margin: 0.5rem 0 1rem 1.5rem; }
.aligncenter { margin-inline: auto; }
.alignwide, .alignfull { max-width: none; }
.wp-caption { max-width: 100%; }

/* ==========================================================================
   SONG HEADER WRAP
   ========================================================================== */

.mpm-song-head-wrap {
  border-bottom: 1px solid var(--void-line);
}
.mpm-song-head-wrap .mpm-song-head { border-bottom: 0; }

.mpm-dark .mpm-player audio { filter: invert(1) hue-rotate(180deg); }

/* ==========================================================================
   DARK-SURFACE ADJUSTMENTS
   ========================================================================== */

.mpm-dark .mpm-btn {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--void);
}
.mpm-dark .mpm-btn:hover { background: transparent; color: var(--ink); }
.mpm-dark .mpm-btn--ghost { background: transparent; color: var(--ink); }
.mpm-dark .mpm-btn--ghost:hover { background: var(--ink); color: var(--void); }

.mpm-dark .mpm-pagination .page-numbers.current,
.mpm-dark .mpm-pagination .page-numbers:hover {
  background: var(--ink);
  color: var(--void);
  border-color: var(--ink);
}

.mpm-dark .mpm-more { border-bottom-color: var(--ink); }
.mpm-dark .mpm-more:hover { border-bottom-color: var(--throat); color: var(--throat); }

.mpm-dark .mpm-nav a { color: var(--ink-soft); }
.mpm-dark .mpm-nav a:hover { color: var(--ink); }
.mpm-dark .mpm-navtoggle { color: var(--ink); border-color: var(--hairline); }

.mpm-masthead.mpm-dark { background: var(--void); }
.mpm-masthead { background: var(--void); }

/* ==========================================================================
   PHOTO BANNERS
   ========================================================================== */

.mpm-photobanner {
  position: relative;
  background: var(--void);
}
.mpm-photobanner img {
  display: block;
  width: 100%;
  height: clamp(300px, 44vw, 620px);
  object-fit: cover;
  object-position: center 30%;
}
.mpm-photobanner::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 34%;
  background: linear-gradient(to bottom, transparent, var(--void));
  pointer-events: none;
}

.mpm-photobanner + .mpm-pagehero,
.mpm-photobanner + .mpm-hero {
  border-top: 0;
  padding-top: clamp(1.5rem, 4vh, 3rem);
}
.mpm-photobanner + .mpm-pagehero .mpm-pagehero__art,
.mpm-photobanner + .mpm-hero .mpm-hero__art {
  opacity: 0.18;
}

/* ==========================================================================
   COLOUR DASHES
   ========================================================================== */

.mpm-masthead::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: linear-gradient(
    90deg,
    var(--throat)  0 17%, transparent 17% 25%,
    var(--heart)  25% 42%, transparent 42% 50%,
    var(--plexus) 50% 67%, transparent 67% 75%,
    var(--ember)  75% 92%, transparent 92% 100%
  );
}

.mpm-eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  flex-shrink: 0;
  background: var(--plexus);
}
section:nth-of-type(4n+1) .mpm-eyebrow::before { background: var(--throat); }
section:nth-of-type(4n+2) .mpm-eyebrow::before { background: var(--heart); }
section:nth-of-type(4n+3) .mpm-eyebrow::before { background: var(--plexus); }
section:nth-of-type(4n+4) .mpm-eyebrow::before { background: var(--ember); }

/* ==========================================================================
   PAGE BANNER SLOTS
   ========================================================================== */

.mpm-page-banner { padding-top: 0; }
.mpm-page-banner:empty { display: none; }

@media (max-width: 640px) {
  .mpm-card {
    flex: 1 1 100%;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    text-align: center;
    justify-items: center;
    gap: 1rem;
  }
  .mpm-card__visual {
    width: 140px;
    height: 140px;
  }
  .mpm-card__content {
    align-items: center;
  }
  .mpm-card__chakra-row,
  .mpm-card__tag-row,
  .mpm-card__meta {
    justify-content: center;
  }
  .mpm-card__action {
    width: 100%;
  }
  .mpm-dl-btn {
    display: block;
    width: 100%;
    text-align: center;
  }
}

@media (max-width: 900px) {
  .mpm-card {
    flex: 1 1 100%;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    text-align: center;
    justify-items: center;
    gap: 1rem;
  }
  .mpm-card__visual {
    width: 140px;
    height: 140px;
  }
  .mpm-card__content {
    align-items: center;
  }
  .mpm-card__chakra-row,
  .mpm-card__tag-row,
  .mpm-card__meta {
    justify-content: center;
  }
  .mpm-card__action {
    width: 100%;
  }
  .mpm-dl-btn {
    display: block;
    width: 100%;
    text-align: center;
  }
}

.mpm-post-row__media {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 250px;
}
.mpm-post-row__media img {
  width: 250px;
  height: 250px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 4px;
}

.mpm-resource__go {
  text-decoration: none;
}