/*
Theme Name: McAuley Tucker
Theme URI: https://mcauleytucker.com
Author: McAuley Tucker
Author URI: https://mcauleytucker.com
Description: Editorial block theme for McAuley Tucker — interviewer, writer, filmmaker, and artist. Six content sections (interviews, articles, fiction, films, art, music), self-hosted fonts, structured data for every work type, and no third-party requests on the front end.
Version: 3.6.0
Requires at least: 6.5
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mcauley-tucker
Tags: block-theme, full-site-editing, portfolio, blog, photography, one-column, two-columns, custom-colors, custom-menu, editor-style, featured-images, threaded-comments, translation-ready, accessibility-ready

Fonts: Inter, Playfair Display and Cormorant Garamond are bundled under the
SIL Open Font License 1.1. See assets/fonts/OFL.txt.
*/

/* ==========================================================================
   1. TOKENS
   The palette also lives in theme.json so the editor sees it. These mirror
   it for the hand-written CSS below, plus the values theme.json has no
   concept of: durations, easings, and the header height that three other
   rules depend on.
   ========================================================================== */

:root {
  --mct-bg:              #FBFAF7;
  --mct-bg-warm:         #F3EEE5;
  --mct-bg-dark:         #0C0C0D;
  --mct-bg-dark-soft:    #17171A;

  --mct-text:            #16161A;
  --mct-text-muted:      #5F5F66;
  --mct-text-light:      #FBFAF7;
  --mct-text-light-muted: rgba(251, 250, 247, 0.68);

  --mct-accent:          #8B2332;
  --mct-accent-hover:    #6E1B28;
  --mct-gold:            #C9A84C;

  --mct-rule:            rgba(22, 22, 26, 0.10);
  --mct-rule-strong:     rgba(22, 22, 26, 0.18);
  --mct-rule-light:      rgba(251, 250, 247, 0.14);

  --mct-font-body:       Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --mct-font-heading:    'Playfair Display', Georgia, 'Times New Roman', serif;
  --mct-font-quote:      'Cormorant Garamond', Georgia, serif;

  /* One scale, used everywhere. Section padding grows with the viewport
     rather than stepping at breakpoints, which is what keeps the rhythm
     identical on a 375px phone and a 2560px display. */
  --mct-gap:             clamp(1.25rem, 2.8vw, 3.25rem);
  --mct-section-y:       clamp(3.5rem, 9vw, 10rem);
  --mct-section-y-lg:    clamp(4.5rem, 13vw, 14rem);
  --mct-gutter:          clamp(1.25rem, 5vw, 4.5rem);

  --mct-measure:         68ch;
  --mct-max:             1280px;
  --mct-max-narrow:      700px;
  --mct-max-mid:         980px;

  --mct-radius:          2px;
  --mct-radius-lg:       4px;

  --mct-header-h:        4.5rem;

  --mct-ease:            cubic-bezier(0.22, 0.61, 0.36, 1);
  --mct-ease-out:        cubic-bezier(0.16, 1, 0.3, 1);
  --mct-dur:             240ms;
  --mct-dur-slow:        520ms;

  --mct-shadow-soft:     0 1px 2px rgba(12, 12, 13, 0.04), 0 8px 24px rgba(12, 12, 13, 0.06);
  --mct-shadow-lift:     0 2px 4px rgba(12, 12, 13, 0.05), 0 18px 44px rgba(12, 12, 13, 0.11);
}

/* ==========================================================================
   2. BASE
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Anchor links land below the fixed header instead of under it. */
  scroll-padding-top: calc(var(--mct-header-h) + 1.5rem);
}

body {
  margin: 0;
  background: var(--mct-bg);
  color: var(--mct-text);
  font-family: var(--mct-font-body);
  font-size: 1.0625rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1;
  overflow-x: hidden;
}

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

/* Stop a long unbroken URL in a comment or a quote from forcing a
   horizontal scrollbar on the whole page. */
p, li, h1, h2, h3, h4, h5, h6, blockquote { overflow-wrap: break-word; }

h1, h2, h3, h4 {
  font-family: var(--mct-font-heading);
  font-weight: 700;
  margin: 0 0 0.5em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.125rem, 1.4rem + 3.2vw, 3.5rem);  line-height: 1.08; letter-spacing: -0.022em; }
h2 { font-size: clamp(1.75rem, 1.25rem + 2.3vw, 2.75rem); line-height: 1.14; letter-spacing: -0.018em; }
h3 { font-size: clamp(1.375rem, 1.15rem + 1vw, 1.875rem); line-height: 1.22; letter-spacing: -0.012em; font-weight: 600; }
h4 {
  font-family: var(--mct-font-body);
  font-size: clamp(1.1875rem, 1.1rem + 0.4vw, 1.4375rem);
  line-height: 1.35;
  font-weight: 600;
  letter-spacing: -0.008em;
}

p { margin: 0 0 1.25em; }
p:last-child { margin-bottom: 0; }

a { color: var(--mct-accent); text-decoration: none; transition: color var(--mct-dur) var(--mct-ease); }
a:hover { color: var(--mct-accent-hover); }

/* One visible, consistent focus ring across the whole site. Never removed. */
:focus-visible {
  outline: 2px solid var(--mct-accent);
  outline-offset: 3px;
  border-radius: 1px;
}
.section--dark :focus-visible,
.site-footer :focus-visible { outline-color: var(--mct-gold); }

::selection { background: var(--mct-accent); color: var(--mct-text-light); }

hr, .wp-block-separator {
  border: 0;
  border-top: 1px solid var(--mct-rule);
  margin: var(--mct-section-y) auto;
  max-width: 100%;
}

blockquote {
  font-family: var(--mct-font-quote);
  font-size: clamp(1.375rem, 1.1rem + 1.2vw, 1.875rem);
  font-style: italic;
  line-height: 1.4;
  margin: 2.5rem 0;
  padding-left: 1.75rem;
  border-left: 2px solid var(--mct-accent);
  color: var(--mct-text);
}
blockquote cite {
  display: block;
  margin-top: 1rem;
  font-family: var(--mct-font-body);
  font-size: 0.875rem;
  font-style: normal;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mct-text-muted);
}

/* ==========================================================================
   3. ACCESSIBILITY UTILITIES
   ========================================================================== */

.screen-reader-text {
  position: absolute !important;
  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;
}

.skip-link:focus {
  position: fixed !important;
  top: 0.75rem; left: 0.75rem;
  z-index: 10000;
  width: auto; height: auto;
  clip: auto; clip-path: none;
  padding: 0.85rem 1.35rem;
  background: var(--mct-bg-dark);
  color: var(--mct-text-light);
  font-size: 0.875rem;
  font-weight: 600;
  border-radius: var(--mct-radius);
  box-shadow: var(--mct-shadow-lift);
}

/* Honour the OS setting. Everything still works; it just stops moving. */
@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;
    scroll-behavior: auto !important;
  }
  .fade-in { opacity: 1 !important; transform: none !important; }
}

/* ==========================================================================
   4. LAYOUT
   ========================================================================== */

.wp-site-blocks { overflow-x: clip; }

.section {
  padding-block: var(--mct-section-y);
  padding-inline: var(--mct-gutter);
  position: relative;
}
.section--lg    { padding-block: var(--mct-section-y-lg); }
.section--flush { padding-block: 0; }
.section--warm  { background: var(--mct-bg-warm); }

.section--dark {
  background: var(--mct-bg-dark);
  color: var(--mct-text-light);
}
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: var(--mct-text-light); }
.section--dark p:not([class]) { color: var(--mct-text-light-muted); }
.section--dark a:not(.btn):not(.wp-block-button__link) { color: var(--mct-gold); }
.section--dark hr, .section--dark .wp-block-separator { border-color: var(--mct-rule-light); }

.container {
  width: 100%;
  max-width: var(--mct-max);
  margin-inline: auto;
}
.container--narrow { max-width: var(--mct-max-narrow); }
.container--mid    { max-width: var(--mct-max-mid); }

/* Section headers. The eyebrow/heading/subcopy trio is the spine of every
   page, so it gets one definition rather than being re-styled per section. */
.section-header { margin-bottom: clamp(2.5rem, 6vw, 6rem); max-width: 46rem; }
.section-header--center { margin-inline: auto; text-align: center; }
.section-header p:last-child { margin-bottom: 0; }

.eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mct-text-muted);
  margin: 0 0 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
/* The short rule beside an eyebrow is the one flourish the design allows
   itself. It marks a section start without needing a heavier divider. */
.eyebrow::before {
  content: '';
  width: 1.75rem;
  height: 1px;
  background: currentColor;
  opacity: 0.5;
  flex: none;
}
.section-header--center .eyebrow { justify-content: center; }
.eyebrow--accent { color: var(--mct-accent); }
.eyebrow--gold   { color: var(--mct-gold); }

.section-subcopy {
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  color: var(--mct-text-muted);
  max-width: 46ch;
  margin-top: 1.25rem;
}
.section--dark .section-subcopy { color: var(--mct-text-light-muted); }
.section-header--center .section-subcopy { margin-inline: auto; }

/* Grids. auto-fit with a minimum means the columns collapse when they run
   out of room instead of at an arbitrary breakpoint — one rule covers
   every screen between a phone and an ultrawide. */
.grid { display: grid; gap: var(--mct-gap); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }

/* Asymmetric splits. These stay two-up only when there is genuinely room. */
.grid--60-40, .grid--40-60, .grid--55-45 { grid-template-columns: 1fr; }
@media (min-width: 60em) {
  .grid--60-40 { grid-template-columns: 1.5fr 1fr; }
  .grid--40-60 { grid-template-columns: 1fr 1.5fr; }
  .grid--55-45 { grid-template-columns: 1.22fr 1fr; }
  .grid--60-40, .grid--40-60, .grid--55-45 { gap: clamp(2.5rem, 6vw, 7rem); align-items: center; }
}

/* ==========================================================================
   5. HEADER
   ========================================================================== */

.site-header {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 100;
  height: var(--mct-header-h);
  display: flex;
  align-items: center;
  padding-inline: var(--mct-gutter);
  background: rgba(251, 250, 247, 0.86);
  border-bottom: 1px solid var(--mct-rule);
  transition: background var(--mct-dur) var(--mct-ease),
              border-color var(--mct-dur) var(--mct-ease),
              transform var(--mct-dur-slow) var(--mct-ease-out);
}
@supports (backdrop-filter: blur(1px)) {
  .site-header { backdrop-filter: saturate(1.4) blur(14px); }
}

.header-inner {
  width: 100%;
  max-width: var(--mct-max);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.site-logo {
  font-family: var(--mct-font-heading);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 0;
  flex: none;
}
.site-logo a { color: inherit; }
.site-logo a:hover { color: var(--mct-accent); }

/* Transparent over a dark hero, solid once the page scrolls. The class is
   set server-side so it is correct on the very first painted frame. */
.has-transparent-header .site-header:not(.is-scrolled) {
  background: transparent;
  border-bottom-color: transparent;
  color: var(--mct-text-light);
  backdrop-filter: none;
}
.has-transparent-header .site-header:not(.is-scrolled) .site-logo a,
.has-transparent-header .site-header:not(.is-scrolled) .nav-menu a { color: var(--mct-text-light); }
.has-transparent-header .site-header:not(.is-scrolled) .nav-menu a:hover { color: var(--mct-gold); }
.has-transparent-header .site-header:not(.is-scrolled) .hamburger span { background: var(--mct-text-light); }

.site-header.is-scrolled { box-shadow: 0 1px 0 var(--mct-rule), 0 6px 24px rgba(12, 12, 13, 0.05); }

/* Slide the bar away when scrolling down, bring it back on scroll up.
   Reading a long article should not cost 4.5rem of screen. */
.site-header.is-hidden { transform: translateY(-100%); }

.nav-menu {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 2.2vw, 2.25rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-menu a {
  position: relative;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--mct-text);
  padding-block: 0.4rem;
  letter-spacing: -0.005em;
}
/* Underline grows from the left rather than fading in — cheaper to render
   and it reads as deliberate rather than as a default hover state. */
.nav-menu a::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--mct-dur) var(--mct-ease);
}
.nav-menu a:hover::after,
.nav-menu .current-menu-item > a::after { transform: scaleX(1); }
.nav-menu .current-menu-item > a { color: var(--mct-accent); }

.nav-cta { flex: none; }

.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 2.75rem; height: 2.75rem;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  flex: none;
}
.hamburger span {
  display: block;
  width: 22px; height: 1.5px;
  background: var(--mct-text);
  margin-inline: auto;
  transition: transform var(--mct-dur) var(--mct-ease), opacity 140ms linear;
}
.hamburger[aria-expanded='true'] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.hamburger[aria-expanded='true'] span:nth-child(2) { opacity: 0; }
.hamburger[aria-expanded='true'] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* --- Mobile navigation --- */

.mobile-nav {
  position: fixed;
  inset: var(--mct-header-h) 0 0;
  z-index: 99;
  background: var(--mct-bg-dark);
  padding: clamp(2rem, 8vw, 3.5rem) var(--mct-gutter);
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* visibility, not display, so the transition can actually run. */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-0.75rem);
  transition: opacity var(--mct-dur) var(--mct-ease),
              transform var(--mct-dur) var(--mct-ease),
              visibility 0s linear var(--mct-dur);
}
.mobile-nav.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}
.mobile-nav a {
  display: block;
  padding-block: 0.85rem;
  font-family: var(--mct-font-heading);
  font-size: 1.625rem;
  font-weight: 600;
  color: var(--mct-text-light);
  border-bottom: 1px solid var(--mct-rule-light);
  letter-spacing: -0.015em;
}
.mobile-nav a:hover { color: var(--mct-gold); }
.mobile-nav .wp-block-buttons,
.mobile-nav .btn-group { margin-top: 2rem; }

body.nav-open { overflow: hidden; }

@media (max-width: 60em) {
  .nav-menu, .nav-cta { display: none; }
  .hamburger { display: flex; }
}
@media (min-width: 60.01em) {
  .mobile-nav { display: none; }
}

/* Push content below the fixed bar, except where a hero sits under it. */
.wp-site-blocks > main { padding-top: var(--mct-header-h); }
.has-transparent-header .wp-site-blocks > main { padding-top: 0; }

/* ==========================================================================
   6. BUTTONS
   ========================================================================== */

.btn,
.wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.95em 1.9em;
  font-family: var(--mct-font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-align: center;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--mct-radius);
  cursor: pointer;
  transition: background-color var(--mct-dur) var(--mct-ease),
              color var(--mct-dur) var(--mct-ease),
              border-color var(--mct-dur) var(--mct-ease),
              transform var(--mct-dur) var(--mct-ease);
}
.btn:active,
.wp-block-button__link:active { transform: translateY(1px); }

.btn--primary,
.btn--primary .wp-block-button__link {
  background: var(--mct-accent);
  border-color: var(--mct-accent);
  color: var(--mct-text-light);
}
.btn--primary:hover,
.btn--primary .wp-block-button__link:hover {
  background: var(--mct-accent-hover);
  border-color: var(--mct-accent-hover);
  color: var(--mct-text-light);
}

.btn--gold,
.btn--gold .wp-block-button__link {
  background: var(--mct-gold);
  border-color: var(--mct-gold);
  color: var(--mct-bg-dark);
}
.btn--gold:hover,
.btn--gold .wp-block-button__link:hover { background: #b8973f; border-color: #b8973f; }

.btn--ghost,
.btn--ghost .wp-block-button__link {
  background: transparent;
  border-color: var(--mct-rule-strong);
  color: var(--mct-text);
}
.btn--ghost:hover,
.btn--ghost .wp-block-button__link:hover { border-color: var(--mct-text); background: var(--mct-text); color: var(--mct-bg); }

.btn--ghost-light,
.btn--ghost-light .wp-block-button__link {
  background: transparent;
  /* A 14% border reads as a smudge on ink rather than as a control. */
  border-color: rgba(251, 250, 247, 0.32);
  color: var(--mct-text-light);
}
.btn--ghost-light:hover,
.btn--ghost-light .wp-block-button__link:hover {
  background: var(--mct-text-light);
  border-color: var(--mct-text-light);
  color: var(--mct-bg-dark);
}

.btn-group,
.wp-block-buttons.btn-group { display: flex; flex-wrap: wrap; gap: 0.875rem; margin-top: 2rem; }

@media (max-width: 30em) {
  .btn-group, .wp-block-buttons.btn-group { flex-direction: column; align-items: stretch; }
  .btn-group .btn, .btn-group .wp-block-button { width: 100%; }
  .btn-group .wp-block-button__link { width: 100%; }
}

/* ==========================================================================
   7. CARDS
   ========================================================================== */

.card {
  display: flex;
  flex-direction: column;
  background: transparent;
  color: inherit;
  text-decoration: none;
  isolation: isolate;
}
a.card:hover { color: inherit; }

.card__media {
  position: relative;
  overflow: hidden;
  border-radius: var(--mct-radius);
  background: var(--mct-bg-warm);
  aspect-ratio: 16 / 9;
  margin-bottom: 1.5rem;
}
.card__media--portrait { aspect-ratio: 4 / 5; }
.card__media--square   { aspect-ratio: 1 / 1; }
.card__media--wide     { aspect-ratio: 3 / 2; }

.card__media img,
.card__image {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--mct-dur-slow) var(--mct-ease-out),
              filter var(--mct-dur-slow) var(--mct-ease-out);
}
.card:hover .card__media img { transform: scale(1.035); }

/* Placeholder when a post has no cover image: the first letter of the
   title, set large in the heading face. Keeps the grid rhythm and never
   looks like a broken image. */
.card__image--placeholder {
  display: grid;
  place-items: center;
  width: 100%; height: 100%;
  background: var(--mct-bg-warm);
  color: var(--mct-accent);
  font-family: var(--mct-font-heading);
  font-size: clamp(3rem, 8vw, 4.5rem);
  font-weight: 700;
  opacity: 0.28;
}
.section--dark .card__image--placeholder { background: var(--mct-bg-dark-soft); color: var(--mct-gold); }

.card__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, rgba(12,12,13,0) 45%, rgba(12,12,13,0.5) 100%);
  opacity: 0;
  transition: opacity var(--mct-dur) var(--mct-ease);
}
/* Play affordance drawn entirely in CSS: a circle, and a triangle made
   from borders. No icon font, no SVG request, nothing to 404. */
.card__play::after {
  content: '';
  width: 3.25rem; height: 3.25rem;
  border-radius: 50%;
  background: rgba(251, 250, 247, 0.94);
  box-shadow: 0 4px 18px rgba(12, 12, 13, 0.28);
  display: grid;
  place-items: center;
}
.card__play::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  translate: -38% -50%;
  z-index: 1;
  border-style: solid;
  border-width: 0.45rem 0 0.45rem 0.75rem;
  border-color: transparent transparent transparent var(--mct-bg-dark);
}
.card:hover .card__play { opacity: 1; }

.card__badge {
  position: absolute;
  top: 0.875rem; left: 0.875rem;
  padding: 0.32rem 0.7rem;
  background: rgba(12, 12, 13, 0.82);
  color: var(--mct-text-light);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  border-radius: 1px;
  backdrop-filter: blur(4px);
}
.card__badge--gold { background: var(--mct-gold); color: var(--mct-bg-dark); }

.card__body { display: flex; flex-direction: column; flex: 1; }

.card__eyebrow {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--mct-accent);
  margin: 0 0 0.6rem;
}
.section--dark .card__eyebrow { color: var(--mct-gold); }

.card__title {
  font-family: var(--mct-font-heading);
  font-size: clamp(1.3125rem, 1.15rem + 0.6vw, 1.625rem);
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: -0.014em;
  margin: 0 0 0.7rem;
  color: var(--mct-text);
  transition: color var(--mct-dur) var(--mct-ease);
}
.section--dark .card__title { color: var(--mct-text-light); }
.card:hover .card__title { color: var(--mct-accent); }
.section--dark .card:hover .card__title { color: var(--mct-gold); }
.card__title a { color: inherit; }

.card__external { font-size: 0.75em; opacity: 0.5; margin-left: 0.2em; }

.card__excerpt {
  font-size: 0.9375rem;
  max-width: 46ch;
  line-height: 1.62;
  color: var(--mct-text-muted);
  margin: 0 0 0.9rem;
  /* Clamp so a long excerpt cannot break the grid's vertical rhythm. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card__excerpt--serif {
  font-family: var(--mct-font-quote);
  font-size: 1.0625rem;
  font-style: italic;
  line-height: 1.5;
  color: var(--mct-text);
  opacity: 0.82;
}
.section--dark .card__excerpt { color: var(--mct-text-light-muted); }

.card__meta {
  margin: auto 0 0;
  padding-top: 0.35rem;
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  color: var(--mct-text-muted);
}
.section--dark .card__meta { color: var(--mct-text-light-muted); }

/* Exclusive episodes get a hairline gold rule rather than a louder
   treatment — the badge already carries the signal. */
.card--exclusive .card__media { box-shadow: inset 0 0 0 1px var(--mct-gold); }

.card--release .card__title a:hover { color: var(--mct-accent); }

.platform-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
}
.platform-links a {
  color: var(--mct-text-muted);
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
}
.platform-links a:hover { color: var(--mct-accent); border-bottom-color: currentColor; }
.platform-links--large { font-size: 0.9375rem; gap: 0.5rem 1.5rem; }

/* ==========================================================================
   8. FILTER BAR
   ========================================================================== */

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--mct-rule);
}

.filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 1rem;
  background: transparent;
  border: 1px solid var(--mct-rule);
  border-radius: 100px;
  font-family: var(--mct-font-body);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--mct-text-muted);
  cursor: pointer;
  transition: background-color var(--mct-dur) var(--mct-ease),
              color var(--mct-dur) var(--mct-ease),
              border-color var(--mct-dur) var(--mct-ease);
}
.filter-btn:hover { border-color: var(--mct-text); color: var(--mct-text); }
.filter-btn.is-active {
  background: var(--mct-text);
  border-color: var(--mct-text);
  color: var(--mct-bg);
}
.filter-btn__count {
  font-size: 0.6875rem;
  font-variant-numeric: tabular-nums;
  opacity: 0.55;
}
.section--dark .filter-btn { border-color: var(--mct-rule-light); color: var(--mct-text-light-muted); }
.section--dark .filter-btn:hover { border-color: var(--mct-text-light); color: var(--mct-text-light); }
.section--dark .filter-btn.is-active { background: var(--mct-text-light); border-color: var(--mct-text-light); color: var(--mct-bg-dark); }

/* Cards hidden by a filter. display:none rather than opacity so the grid
   reflows and there are no phantom gaps. */
.is-filtered-out { display: none !important; }

.filter-empty {
  padding: 3rem 0;
  text-align: center;
  color: var(--mct-text-muted);
  font-family: var(--mct-font-quote);
  font-size: 1.25rem;
  font-style: italic;
}

.empty-state {
  padding: clamp(3rem, 8vw, 5rem) 1.5rem;
  text-align: center;
  border: 1px dashed var(--mct-rule-strong);
  border-radius: var(--mct-radius-lg);
  color: var(--mct-text-muted);
}
.empty-state p { margin: 0; }
.empty-state__hint { margin-top: 0.75rem !important; font-size: 0.9375rem; }

/* ==========================================================================
   9. ART GALLERY + LIGHTBOX
   ========================================================================== */

/* Columns rather than grid: artwork is not uniform, and a masonry column
   flow respects each piece's real proportions instead of cropping every
   drawing into the same rectangle. */
.art-grid {
  column-gap: var(--mct-gap);
  column-count: 1;
}
@media (min-width: 34em) { .art-grid { column-count: 2; } }
@media (min-width: 56em) { .art-grid--3 { column-count: 3; } .art-grid--4 { column-count: 3; } }
@media (min-width: 80em) { .art-grid--4 { column-count: 4; } }

.art-tile {
  display: block;
  position: relative;
  width: 100%;
  padding: 0;
  margin: 0 0 var(--mct-gap);
  background: none;
  border: 0;
  cursor: zoom-in;
  break-inside: avoid;
  overflow: hidden;
  border-radius: var(--mct-radius);
  text-align: left;
}
.art-tile__image {
  width: 100%;
  height: auto;
  display: block;
  transition: transform var(--mct-dur-slow) var(--mct-ease-out);
}
.art-tile:hover .art-tile__image { transform: scale(1.03); }

.art-tile__overlay {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 2.5rem 1.125rem 1.125rem;
  background: linear-gradient(180deg, rgba(12,12,13,0) 0%, rgba(12,12,13,0.86) 100%);
  color: var(--mct-text-light);
  opacity: 0;
  transform: translateY(0.5rem);
  transition: opacity var(--mct-dur) var(--mct-ease), transform var(--mct-dur) var(--mct-ease);
}
.art-tile:hover .art-tile__overlay,
.art-tile:focus-visible .art-tile__overlay { opacity: 1; transform: none; }

.art-tile__title {
  font-family: var(--mct-font-heading);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.3;
}
.art-tile__caption { font-size: 0.75rem; color: var(--mct-text-light-muted); letter-spacing: 0.02em; }
.art-tile__status {
  margin-top: 0.35rem;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mct-gold);
}

/* Touch devices have no hover, so the caption is always visible there. */
@media (hover: none) {
  .art-tile__overlay { opacity: 1; transform: none; }
}

.lightbox {
  width: 100%;
  max-width: 100vw;
  height: 100%;
  max-height: 100vh;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgba(12, 12, 13, 0.97);
  color: var(--mct-text-light);
  overflow: hidden;
}
.lightbox::backdrop { background: rgba(12, 12, 13, 0.9); }

.lightbox__figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  height: 100%;
  margin: 0;
  padding: clamp(3rem, 8vw, 4.5rem) clamp(1rem, 6vw, 5rem);
}
.lightbox__image {
  max-width: 100%;
  max-height: calc(100vh - 12rem);
  width: auto;
  object-fit: contain;
}
.lightbox__caption {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  text-align: center;
  max-width: 46ch;
}
.lightbox__title { font-family: var(--mct-font-heading); font-size: 1.25rem; font-weight: 600; }
.lightbox__meta  { font-size: 0.8125rem; color: var(--mct-text-light-muted); letter-spacing: 0.03em; }
.lightbox__note  {
  font-family: var(--mct-font-quote);
  font-size: 1.0625rem;
  font-style: italic;
  color: var(--mct-text-light-muted);
  margin-top: 0.4rem;
}
.lightbox__note:empty, .lightbox__meta:empty { display: none; }

.lightbox__close,
.lightbox__nav {
  position: absolute;
  display: grid;
  place-items: center;
  background: rgba(251, 250, 247, 0.08);
  border: 1px solid var(--mct-rule-light);
  color: var(--mct-text-light);
  cursor: pointer;
  border-radius: 50%;
  transition: background-color var(--mct-dur) var(--mct-ease);
}
.lightbox__close:hover, .lightbox__nav:hover { background: rgba(251, 250, 247, 0.18); }

.lightbox__close {
  top: 1.25rem; right: 1.25rem;
  width: 2.75rem; height: 2.75rem;
  font-size: 1.5rem;
  line-height: 1;
}
.lightbox__nav {
  top: 50%;
  transform: translateY(-50%);
  width: 3rem; height: 3rem;
  font-size: 1.75rem;
  line-height: 1;
}
.lightbox__nav--prev { left: 1rem; }
.lightbox__nav--next { right: 1rem; }

@media (max-width: 40em) {
  .lightbox__nav { top: auto; bottom: 1.25rem; transform: none; }
  .lightbox__nav--prev { left: 1.25rem; }
  .lightbox__nav--next { right: 1.25rem; }
}

/* ==========================================================================
   10. VIDEO FACADE
   ========================================================================== */

.video-facade {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--mct-bg-dark);
  border-radius: var(--mct-radius-lg);
  overflow: hidden;
}
.video-facade__button {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}
.video-facade__poster { width: 100%; height: 100%; object-fit: cover; }

.video-facade__play {
  position: absolute;
  top: 50%; left: 50%;
  translate: -50% -50%;
  width: 4.5rem; height: 4.5rem;
  border-radius: 50%;
  background: rgba(251, 250, 247, 0.94);
  box-shadow: 0 6px 28px rgba(12, 12, 13, 0.4);
  transition: transform var(--mct-dur) var(--mct-ease), background-color var(--mct-dur) var(--mct-ease);
}
.video-facade__play::after {
  content: '';
  position: absolute;
  top: 50%; left: 54%;
  translate: -50% -50%;
  border-style: solid;
  border-width: 0.6rem 0 0.6rem 1rem;
  border-color: transparent transparent transparent var(--mct-bg-dark);
}
.video-facade__button:hover .video-facade__play { transform: scale(1.07); background: #fff; }

.video-facade iframe {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  border: 0;
}

/* ==========================================================================
   11. LONG-FORM READING
   Applies to articles, fiction and any page using the narrow template.
   ========================================================================== */

.entry-content > * { max-width: var(--mct-max-narrow); margin-inline: auto; }
.entry-content > .alignwide { max-width: var(--mct-max); }
.entry-content > .alignfull { max-width: none; }

.prose {
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.1875rem);
  line-height: 1.78;
}
.prose p { margin-bottom: 1.5em; }
.prose h2 { margin-top: 2.4em; }
.prose h3 { margin-top: 2em; }
.prose > *:first-child { margin-top: 0; }

.prose ul, .prose ol { margin: 0 0 1.5em; padding-left: 1.4em; }
.prose li { margin-bottom: 0.55em; }

.prose img, .prose figure { margin-block: 2.5rem; }
.prose figcaption {
  margin-top: 0.75rem;
  font-size: 0.8125rem;
  color: var(--mct-text-muted);
  text-align: center;
}

/* Fiction reads better in the serif at a slightly longer line. */
.prose--fiction {
  font-family: var(--mct-font-quote);
  font-size: clamp(1.1875rem, 1.05rem + 0.6vw, 1.4375rem);
  line-height: 1.72;
  max-width: 38rem;
}
.prose--fiction p { margin-bottom: 1.35em; }
/* Indent successive paragraphs the way a printed book does, rather than
   spacing them like a blog post. */
.prose--fiction p + p { text-indent: 1.5em; margin-top: -0.35em; }

.entry-lede {
  font-size: clamp(1.1875rem, 1.05rem + 0.6vw, 1.4375rem);
  line-height: 1.55;
  color: var(--mct-text-muted);
  margin-bottom: 2rem;
}

.entry-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  color: var(--mct-text-muted);
  padding-bottom: 1.75rem;
  margin-bottom: 2.5rem;
  border-bottom: 1px solid var(--mct-rule);
}

.content-note {
  padding: 1rem 1.25rem;
  margin-bottom: 2.5rem;
  border-left: 2px solid var(--mct-gold);
  background: var(--mct-bg-warm);
  font-size: 0.9375rem;
  color: var(--mct-text-muted);
}

.laurels { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.laurels li {
  padding-left: 1.35rem;
  position: relative;
  font-size: 0.9375rem;
  color: var(--mct-text-muted);
}
.laurels li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.62em;
  width: 0.5rem; height: 0.5rem;
  border: 1px solid var(--mct-gold);
  border-radius: 50%;
}

/* ==========================================================================
   12. FORMS
   ========================================================================== */

.contact-form-wrap { max-width: 38rem; }

.form-row--split { display: grid; gap: var(--mct-gap); }
@media (min-width: 40em) { .form-row--split { grid-template-columns: 1fr 1fr; } }

.form-field { margin-bottom: 1.5rem; }
.form-field label {
  display: block;
  margin-bottom: 0.45rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mct-text-muted);
}
.required { color: var(--mct-accent); }

.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  /* 1rem, not 0.875 — anything under 16px makes iOS Safari zoom the
     viewport on focus, which feels like the page is broken. */
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.5;
  padding: 0.8rem 1rem;
  color: var(--mct-text);
  background: #fff;
  border: 1px solid var(--mct-rule-strong);
  border-radius: var(--mct-radius);
  transition: border-color var(--mct-dur) var(--mct-ease), box-shadow var(--mct-dur) var(--mct-ease);
}
.form-field textarea { resize: vertical; min-height: 9rem; }

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--mct-accent);
  box-shadow: 0 0 0 3px rgba(139, 35, 50, 0.13);
}
.form-field input:focus-visible,
.form-field textarea:focus-visible { outline: none; }

.form-field input:user-invalid,
.form-field textarea:user-invalid { border-color: var(--mct-accent); }

/* The honeypot. Off-screen rather than display:none, because some bots
   skip fields that are explicitly hidden. */
.form-hp {
  position: absolute !important;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

.form-consent {
  font-size: 0.8125rem;
  color: var(--mct-text-muted);
  margin-bottom: 1.5rem;
}

.btn--submit { min-width: 12rem; }

.form-notice {
  padding: 1.125rem 1.375rem;
  margin-bottom: 2rem;
  border-left: 3px solid;
  border-radius: var(--mct-radius);
  font-size: 0.9375rem;
}
.form-notice p { margin: 0; }
.form-notice p + p { margin-top: 0.35rem; }
.form-notice--success { border-color: #2E6B4F; background: rgba(46, 107, 79, 0.07); }
.form-notice--error   { border-color: var(--mct-accent); background: rgba(139, 35, 50, 0.07); }

.wp-block-search__input { border-radius: var(--mct-radius); border: 1px solid var(--mct-rule-strong); padding: 0.75rem 1rem; }

/* ==========================================================================
   13. FOOTER
   ========================================================================== */

.site-footer {
  background: var(--mct-bg-dark);
  color: var(--mct-text-light);
  padding: var(--mct-section-y) var(--mct-gutter) 2rem;
  margin-top: auto;
}
.site-footer a { color: var(--mct-text-light-muted); }
.site-footer a:hover { color: var(--mct-gold); }

.footer-inner {
  max-width: var(--mct-max);
  margin-inline: auto;
  display: grid;
  gap: clamp(2.5rem, 5vw, 3.5rem);
  grid-template-columns: 1fr;
}
@media (min-width: 48em) { .footer-inner { grid-template-columns: 1.6fr 1fr 1fr; } }

.footer-tagline {
  font-family: var(--mct-font-quote);
  font-size: 1.1875rem;
  font-style: italic;
  color: var(--mct-text-light-muted);
  margin: 0.75rem 0 0;
  max-width: 26ch;
}
.site-footer .site-logo a { color: var(--mct-text-light); }
.site-footer .site-logo a:hover { color: var(--mct-gold); }

.footer-heading {
  font-family: var(--mct-font-body);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mct-gold);
  margin: 0 0 1.125rem;
}

.footer-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.footer-links a { font-size: 0.9375rem; }

.footer-bottom {
  max-width: var(--mct-max);
  margin: clamp(3rem, 6vw, 4.5rem) auto 0;
  padding-top: 1.75rem;
  border-top: 1px solid var(--mct-rule-light);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  font-size: 0.8125rem;
  color: var(--mct-text-light-muted);
}
.footer-bottom p { margin: 0; }

.social-links { display: flex; gap: 1.25rem; list-style: none; margin: 0; padding: 0; }
.social-links a { font-size: 0.8125rem; letter-spacing: 0.06em; }

/* A sticky call to action on phones only. On desktop the header CTA is
   always visible, so this would just be clutter. */
.mobile-sticky-cta { display: none; }
@media (max-width: 48em) {
  .mobile-sticky-cta {
    display: block;
    position: fixed;
    inset: auto 0 0 0;
    z-index: 90;
    padding: 0.75rem var(--mct-gutter) calc(0.75rem + env(safe-area-inset-bottom));
    background: rgba(251, 250, 247, 0.94);
    border-top: 1px solid var(--mct-rule);
    transform: translateY(110%);
    transition: transform var(--mct-dur-slow) var(--mct-ease-out);
  }
  @supports (backdrop-filter: blur(1px)) {
    .mobile-sticky-cta { backdrop-filter: blur(12px); }
  }
  .mobile-sticky-cta.is-visible { transform: none; }
  .mobile-sticky-cta .wp-block-button,
  .mobile-sticky-cta .wp-block-button__link { width: 100%; }
  body.nav-open .mobile-sticky-cta { transform: translateY(110%); }
}

/* ==========================================================================
   14. HEROES
   ========================================================================== */

.page-hero {
  padding-block: calc(var(--mct-header-h) + clamp(3.5rem, 10vw, 11rem)) clamp(3rem, 9vw, 9rem);
  padding-inline: var(--mct-gutter);
  background: var(--mct-bg-dark);
  color: var(--mct-text-light);
}
.page-hero__inner { max-width: var(--mct-max); margin-inline: auto; }
.page-hero h1 { color: var(--mct-text-light); max-width: 18ch; }
/* :not([class]) matters here. Without it this rule is specificity 0,1,1 and
   quietly beats .eyebrow, .metric__number and .metric__label at 0,1,0 —
   so every hero eyebrow and statistic rendered at sub-copy size. Scoping it
   to unclassed paragraphs means the hero's own copy is styled and every
   component inside it keeps the styling it declares for itself. */
.page-hero p:not([class]) { color: var(--mct-text-light-muted); max-width: 52ch; font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem); }

.home-hero {
  min-height: min(90svh, 54rem);
  display: flex;
  align-items: center;
  padding-block: calc(var(--mct-header-h) + clamp(3rem, 8vw, 8rem)) clamp(3rem, 8vw, 8rem);
  padding-inline: var(--mct-gutter);
  background: var(--mct-bg-dark);
  color: var(--mct-text-light);
}
.home-hero h1 {
  font-size: clamp(2.5rem, 1.5rem + 4.4vw, 4.5rem);
  line-height: 1.02;
  letter-spacing: -0.028em;
  color: var(--mct-text-light);
  max-width: 24ch;
  text-wrap: balance;
}
.home-hero .hero-lede {
  font-size: clamp(1.0625rem, 1rem + 0.5vw, 1.3125rem);
  line-height: 1.6;
  color: var(--mct-text-light-muted);
  max-width: 46ch;
  margin-top: 1.5rem;
}
.home-hero__portrait {
  border-radius: var(--mct-radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 5;
}
.home-hero__portrait img { width: 100%; height: 100%; object-fit: cover; }

.episode-hero { max-width: var(--mct-max-mid); }
.episode-hero__title {
  font-size: clamp(1.875rem, 1.3rem + 2.6vw, 3rem);
  line-height: 1.1;
  margin-bottom: 1rem;
}
.episode-hero__meta {
  font-size: 0.875rem;
  letter-spacing: 0.05em;
  color: var(--mct-text-muted);
  margin: 0;
}
.section--dark .episode-hero__meta { color: var(--mct-text-light-muted); }

/* ==========================================================================
   15. MISC SECTIONS
   ========================================================================== */

.metrics-bar {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
  text-align: center;
}
.metric-number {
  display: block;
  font-family: var(--mct-font-heading);
  font-size: clamp(2.25rem, 1.6rem + 2.6vw, 3.25rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--mct-accent);
  font-variant-numeric: tabular-nums;
}
.section--dark .metric-number { color: var(--mct-gold); }
.metric-label {
  display: block;
  margin-top: 0.6rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--mct-text-muted);
}
.section--dark .metric-label { color: var(--mct-text-light-muted); }

.related-work {
  padding-block: var(--mct-section-y);
  padding-inline: var(--mct-gutter);
  border-top: 1px solid var(--mct-rule);
  margin-top: var(--mct-section-y);
}
.related-work__heading {
  max-width: var(--mct-max);
  margin: 0 auto clamp(2rem, 4vw, 3rem);
  font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
}
.related-work .grid { max-width: var(--mct-max); margin-inline: auto; }

.testimonial {
  max-width: 44rem;
  margin-inline: auto;
  text-align: center;
}
.testimonial__quote {
  font-family: var(--mct-font-quote);
  font-size: clamp(1.375rem, 1.1rem + 1.4vw, 2.125rem);
  font-style: italic;
  line-height: 1.38;
  margin: 0 0 1.75rem;
}
.testimonial__attribution {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--mct-text-muted);
}
.section--dark .testimonial__attribution { color: var(--mct-gold); }

/* Entrance animation. Opt-in per element, off entirely under
   prefers-reduced-motion, and it never hides content if JS fails —
   the class is only added by script. */
.fade-in {
  opacity: 0;
  transform: translateY(1.25rem);
  transition: opacity var(--mct-dur-slow) var(--mct-ease-out),
              transform var(--mct-dur-slow) var(--mct-ease-out);
}
.fade-in.is-visible { opacity: 1; transform: none; }

/* ==========================================================================
   16. WORDPRESS PLUMBING
   ========================================================================== */

.alignwide  { max-width: var(--mct-max); margin-inline: auto; }
.alignfull  { max-width: none; margin-inline: 0; }
.aligncenter { margin-inline: auto; }

.wp-block-image img { border-radius: var(--mct-radius); }
.wp-block-image.is-style-rounded img { border-radius: var(--mct-radius-lg); }

.wp-block-group.has-background { padding: clamp(1.5rem, 4vw, 2.5rem); }

.wp-block-post-title a { color: inherit; }

.sticky { position: relative; }

.comment-respond { margin-top: var(--mct-section-y); }

.pagination, .wp-block-query-pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  font-size: 0.9375rem;
}
.wp-block-query-pagination-numbers .page-numbers {
  display: inline-grid;
  place-items: center;
  min-width: 2.5rem;
  height: 2.5rem;
  padding-inline: 0.5rem;
  border: 1px solid var(--mct-rule);
  border-radius: var(--mct-radius);
  color: var(--mct-text-muted);
}
.wp-block-query-pagination-numbers .page-numbers.current,
.wp-block-query-pagination-numbers .page-numbers:hover {
  background: var(--mct-text);
  border-color: var(--mct-text);
  color: var(--mct-bg);
}

/* ==========================================================================
   17. PRINT
   An article or a story is something people print. This makes that not
   look like a mistake.
   ========================================================================== */

@media print {
  .site-header, .mobile-nav, .site-footer, .mobile-sticky-cta,
  .filter-bar, .related-work, .video-facade, .hamburger, .skip-link { display: none !important; }

  body { background: #fff; color: #000; font-size: 11pt; line-height: 1.55; }
  .section, .page-hero { padding: 0 !important; background: #fff !important; color: #000 !important; }
  .page-hero h1, .section--dark h1, .section--dark h2, .section--dark h3 { color: #000 !important; }
  .wp-site-blocks > main { padding-top: 0 !important; }

  a { color: #000; text-decoration: underline; }
  /* Print the destination of links so a paper copy stays useful. */
  .prose a[href^='http']::after { content: ' (' attr(href) ')'; font-size: 9pt; word-break: break-all; }

  h1, h2, h3, h4 { page-break-after: avoid; break-after: avoid; }
  p, blockquote, figure { page-break-inside: avoid; break-inside: avoid; }
  img { max-width: 100% !important; }
}

/* ==========================================================================
   18. FORCED COLORS / HIGH CONTRAST
   ========================================================================== */

@media (forced-colors: active) {
  .btn, .wp-block-button__link, .filter-btn { border: 1px solid ButtonBorder; }
  .card__badge { border: 1px solid CanvasText; }
  .eyebrow::before { background: CanvasText; }
  .card__media { border: 1px solid CanvasText; }
}

/* ==========================================================================
   19. BLOCK STYLE VARIATIONS
   Registered in assets/js/editor.js so they appear in the sidebar. The
   older btn--* classes above are kept because they are already saved into
   existing page content — both spellings resolve to the same treatment.
   ========================================================================== */

.wp-block-button.is-style-primary .wp-block-button__link {
  background: var(--mct-accent);
  border-color: var(--mct-accent);
  color: var(--mct-text-light);
}
.wp-block-button.is-style-primary .wp-block-button__link:hover {
  background: var(--mct-accent-hover);
  border-color: var(--mct-accent-hover);
}

.wp-block-button.is-style-gold .wp-block-button__link {
  background: var(--mct-gold);
  border-color: var(--mct-gold);
  color: var(--mct-bg-dark);
}
.wp-block-button.is-style-gold .wp-block-button__link:hover { background: #b8973f; border-color: #b8973f; }

.wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent;
  border-color: var(--mct-rule-strong);
  color: var(--mct-text);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: var(--mct-text);
  border-color: var(--mct-text);
  color: var(--mct-bg);
}

.wp-block-button.is-style-outline-light .wp-block-button__link {
  background: transparent;
  border-color: var(--mct-rule-light);
  color: var(--mct-text-light);
}
.wp-block-button.is-style-outline-light .wp-block-button__link:hover {
  background: var(--mct-text-light);
  border-color: var(--mct-text-light);
  color: var(--mct-bg-dark);
}

/* Group variations, so a section can be switched light/warm/dark from the
   sidebar without touching a class field. */
.wp-block-group.is-style-section-dark {
  background: var(--mct-bg-dark);
  color: var(--mct-text-light);
  padding-block: var(--mct-section-y);
  padding-inline: var(--mct-gutter);
}
.wp-block-group.is-style-section-dark h1,
.wp-block-group.is-style-section-dark h2,
.wp-block-group.is-style-section-dark h3,
.wp-block-group.is-style-section-dark h4 { color: var(--mct-text-light); }
.wp-block-group.is-style-section-dark p { color: var(--mct-text-light-muted); }

.wp-block-group.is-style-section-warm {
  background: var(--mct-bg-warm);
  padding-block: var(--mct-section-y);
  padding-inline: var(--mct-gutter);
}

/* ==========================================================================
   20. LEGACY COMPATIBILITY
   ==========================================================================
   Your existing pages already have their layout saved into the database as
   block markup, and that markup carries the previous theme's class names.
   Nothing in the database changes when a theme is switched — so without
   this section, every page built before v3 would load unstyled.

   Each rule below re-expresses an old class in the new design tokens, so
   old pages inherit the new typography, spacing and colour automatically
   instead of merely surviving. New content should use the classes above;
   this exists so nothing has to be rebuilt on day one.
   ========================================================================== */

/* --- Sections --- */
.section--light { background: var(--mct-bg); }
.section--cream { background: var(--mct-bg-warm); }
.section--tight { padding-block: clamp(2.25rem, 5vw, 3rem); }
.page-hero--dark { background: var(--mct-bg-dark); color: var(--mct-text-light); }
.section-header--dark h2,
.section-header--dark h3 { color: var(--mct-text-light); }
.section-header--dark p:not([class]) { color: var(--mct-text-light-muted); }
.section-header-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

/* --- Article card (the old writing list was a stacked, ruled list) --- */
.article-card {
  display: block;
  padding-block: 2rem;
  border-bottom: 1px solid var(--mct-rule);
  color: inherit;
  text-decoration: none;
  transition: padding-left var(--mct-dur) var(--mct-ease), background-color var(--mct-dur) var(--mct-ease);
}
.article-card:hover { padding-left: 0.75rem; color: inherit; }
.article-card:last-child { border-bottom: 0; }

/* The image variant was a card, not a list row. */
.article-card--image {
  display: flex;
  flex-direction: column;
  padding: 0;
  border-bottom: 0;
}
.article-card--image:hover { padding-left: 0; }

.article-card__image {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--mct-radius);
  margin-bottom: 1.25rem;
  transition: transform var(--mct-dur-slow) var(--mct-ease-out);
}
.article-card--image:hover .article-card__image { transform: scale(1.03); }
.article-card__image--placeholder {
  background: var(--mct-bg-warm);
  aspect-ratio: 16 / 9;
  border-radius: var(--mct-radius);
  margin-bottom: 1.25rem;
}
.article-card__body { display: flex; flex-direction: column; flex: 1; }
.article-card__category {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--mct-accent);
  margin: 0 0 0.6rem;
}
.article-card__title {
  font-family: var(--mct-font-heading);
  font-size: 1.3125rem;
  font-weight: 600;
  line-height: 1.28;
  letter-spacing: -0.012em;
  margin: 0 0 0.6rem;
  transition: color var(--mct-dur) var(--mct-ease);
}
.article-card:hover .article-card__title { color: var(--mct-accent); }
.article-card__excerpt {
  font-size: 0.9375rem;
  line-height: 1.62;
  color: var(--mct-text-muted);
  margin: 0 0 0.9rem;
}
.article-card__meta {
  margin: auto 0 0;
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  color: var(--mct-text-muted);
}

/* --- Episode card --- */
.episode-card {
  display: flex;
  flex-direction: column;
  background: var(--mct-bg-warm);
  border-radius: var(--mct-radius);
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  transition: transform var(--mct-dur) var(--mct-ease), box-shadow var(--mct-dur) var(--mct-ease);
}
.episode-card:hover { transform: translateY(-3px); box-shadow: var(--mct-shadow-lift); color: inherit; }
.episode-card__image,
.episode-card__image--placeholder {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--mct-bg-warm);
}
.episode-card__content { padding: 1.5rem 1.5rem 1.75rem; display: flex; flex-direction: column; flex: 1; }
.episode-card__title {
  font-family: var(--mct-font-heading);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.28;
  margin: 0 0 0.5rem;
}
.episode-card__meta { margin: auto 0 0; font-size: 0.8125rem; color: var(--mct-text-muted); }
.episode-card__badges { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.75rem; }
.episode-card__tag,
.episode-card__format-badge {
  display: inline-block;
  padding: 0.28rem 0.6rem;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 1px;
  background: rgba(22, 22, 26, 0.08);
  color: var(--mct-text-muted);
}
.episode-card__tag--exclusive,
.episode-card__format-badge--exclusive { background: var(--mct-gold); color: var(--mct-bg-dark); }
.episode-card--exclusive { box-shadow: inset 0 0 0 1px var(--mct-gold); }

/* --- Release card --- */
.release-card {
  display: flex;
  flex-direction: column;
  transition: transform var(--mct-dur) var(--mct-ease), box-shadow var(--mct-dur) var(--mct-ease);
}
.release-card:hover { transform: translateY(-4px); }
.release-card__cover { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--mct-radius); margin-bottom: 1.125rem; }
.release-card__body { display: flex; flex-direction: column; flex: 1; }
.release-card__title { font-family: var(--mct-font-heading); font-size: 1.1875rem; font-weight: 600; margin: 0 0 0.35rem; }
.release-card__year,
.release-card__meta { font-size: 0.8125rem; color: var(--mct-text-muted); margin: 0 0 0.5rem; }
.release-card__excerpt { font-size: 0.9375rem; color: var(--mct-text-muted); }
.release-card__platforms { display: flex; flex-wrap: wrap; gap: 0.35rem 0.6rem; margin-top: auto; padding-top: 0.75rem; font-size: 0.8125rem; }
.release-card__platform { color: var(--mct-text-muted); }
.release-card__platform:hover { color: var(--mct-accent); }
.release-card__platform-sep { color: var(--mct-rule-strong); }
.release-card__flag,
.release-card--premium .release-card__flag {
  display: inline-block;
  padding: 0.25rem 0.55rem;
  margin-bottom: 0.6rem;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  background: var(--mct-gold);
  color: var(--mct-bg-dark);
}

/* --- Generic content cards --- */
/* No border, no drop shadow, no lift on hover. A 1px outline plus a soft
   shadow around a rounded box is the single most recognisable generated-UI
   pattern there is; the depth it implies is not real and it makes six
   different sections look like the same widget. These sit on a tonal
   ground instead and are separated by space and type, not by outlines. */
.card--white,
.feature-card,
.service-card,
.collaborator-card,
.contact-method {
  background: var(--mct-bg-warm);
  border: 0;
  border-radius: var(--mct-radius);
  padding: clamp(1.75rem, 3.5vw, 2.75rem);
}
.section--warm .card--white,
.section--warm .feature-card,
.section--warm .service-card { background: var(--mct-bg); }
.card--light { background: var(--mct-bg-warm); border-radius: var(--mct-radius-lg); padding: clamp(1.75rem, 4vw, 2.5rem); }
.card--dark  { background: var(--mct-bg-dark); color: var(--mct-text-light); border-radius: var(--mct-radius-lg); padding: clamp(1.75rem, 4vw, 2.5rem); }
.card--dark h2, .card--dark h3, .card--dark h4 { color: var(--mct-text-light); }
.card--dark p:not([class]) { color: var(--mct-text-light-muted); }

.collaborator-card { text-align: center; }
.collaborator-card__avatar { width: 5rem; height: 5rem; border-radius: 50%; object-fit: cover; margin: 0 auto 1.125rem; }
.collaborator-card__name { font-family: var(--mct-font-heading); font-size: 1.125rem; font-weight: 600; margin: 0 0 0.25rem; }
.collaborator-card__role,
.collaborator-card__credits { font-size: 0.8125rem; color: var(--mct-text-muted); margin: 0 0 0.5rem; }
.collaborator-card__bio { font-size: 0.9375rem; color: var(--mct-text-muted); }

.feature-card__title,
.service-card__title { font-family: var(--mct-font-heading); font-size: 1.25rem; font-weight: 600; margin: 0 0 0.6rem; }
.feature-card__body,
.service-card__body { font-size: 0.9375rem; color: var(--mct-text-muted); }
.service-card__num {
  display: block;
  font-family: var(--mct-font-heading);
  font-size: 2rem;
  font-weight: 700;
  color: var(--mct-gold);
  line-height: 1;
  margin-bottom: 0.75rem;
}

.contact-method { text-align: left; }
.contact-method__label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--mct-text-muted);
  margin: 0 0 0.4rem;
}

/* --- Legacy grids --- */
.writing-cpt-grid,
.release-grid,
.collaborator-grid,
.contact-methods-grid {
  display: grid;
  gap: var(--mct-gap);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
}
.grid--45-55 { display: grid; gap: var(--mct-gap); grid-template-columns: 1fr; }
@media (min-width: 60em) {
  .grid--45-55 { grid-template-columns: 1fr 1.22fr; gap: clamp(2.5rem, 5vw, 4.5rem); align-items: center; }
}

.publications-row,
.credentials-logos,
.client-logo-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(1.5rem, 4vw, 3rem);
}
.client-logo { max-height: 2.25rem; width: auto; opacity: 0.55; transition: opacity var(--mct-dur) var(--mct-ease); }
.client-logo:hover { opacity: 1; }

/* --- Legacy filters --- */
.archive-filter-system { margin-bottom: clamp(2rem, 4vw, 3rem); }
.filter-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; margin-bottom: 0.75rem; }
.filter-row__label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--mct-text-muted);
  margin-right: 0.25rem;
}
.filter-bar--category,
.filter-bar--format { border-bottom: 0; padding-bottom: 0; margin-bottom: 0.75rem; }
/* The old active-state class, restyled to match the new pill. */
.filter-btn--active {
  background: var(--mct-text);
  border-color: var(--mct-text);
  color: var(--mct-bg);
}
.archive-results { margin-top: 1.5rem; }
.archive-empty {
  padding: 3rem 0;
  text-align: center;
  color: var(--mct-text-muted);
  font-family: var(--mct-font-quote);
  font-size: 1.25rem;
  font-style: italic;
}

/* --- Legacy single-article layout --- */
.article-hero {
  padding-block: calc(var(--mct-header-h) + clamp(3rem, 8vw, 5rem)) clamp(2.5rem, 6vw, 3.75rem);
  background: var(--mct-bg-dark);
  color: var(--mct-text-light);
}
.article-hero .wp-block-post-title,
.article-hero h1 { color: var(--mct-text-light); }
.article-hero__eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mct-gold);
  margin-bottom: 1rem;
}
.article-hero__meta { font-size: 0.875rem; color: var(--mct-text-light-muted); letter-spacing: 0.04em; }
.article-featured-image { border-radius: var(--mct-radius); overflow: hidden; margin-bottom: 2.5rem; }
.article-excerpt {
  font-size: clamp(1.1875rem, 1.05rem + 0.6vw, 1.4375rem);
  line-height: 1.55;
  color: var(--mct-text-muted);
  margin-bottom: 2rem;
}
.article-content { font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.1875rem); line-height: 1.78; }
.article-content p { margin-bottom: 1.5em; }
.article-content h2 { margin-top: 2.4em; }
.article-content h3 { margin-top: 2em; }
.article-back-link {
  display: inline-block;
  margin-bottom: 2rem;
  font-size: 0.875rem;
  letter-spacing: 0.04em;
  color: var(--mct-text-muted);
}
.article-back-link:hover { color: var(--mct-accent); }

/* --- Legacy forms --- */
.form-group { margin-bottom: 1.5rem; }
.form-label {
  display: block;
  margin-bottom: 0.45rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mct-text-muted);
}
.form-input,
.form-textarea {
  width: 100%;
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.5;
  padding: 0.8rem 1rem;
  color: var(--mct-text);
  background: #fff;
  border: 1px solid var(--mct-rule-strong);
  border-radius: var(--mct-radius);
  transition: border-color var(--mct-dur) var(--mct-ease), box-shadow var(--mct-dur) var(--mct-ease);
}
.form-textarea { resize: vertical; min-height: 9rem; }
.form-input:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--mct-accent);
  box-shadow: 0 0 0 3px rgba(139, 35, 50, 0.13);
}

/* --- Legacy footer --- */
.footer-columns-wrap {
  max-width: var(--mct-max);
  margin-inline: auto;
  display: grid;
  gap: clamp(2.5rem, 5vw, 3.5rem);
  grid-template-columns: 1fr;
}
@media (min-width: 48em) { .footer-columns-wrap { grid-template-columns: 1.6fr 1fr 1fr; } }
.footer-copyright { font-size: 0.8125rem; color: var(--mct-text-light-muted); margin: 0; }

/* --- Legacy metrics --- */
.metric { text-align: center; }
.metric__number {
  display: block;
  font-family: var(--mct-font-heading);
  font-size: clamp(2.25rem, 1.6rem + 2.6vw, 3.25rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--mct-accent);
  font-variant-numeric: tabular-nums;
}
.section--dark .metric__number { color: var(--mct-gold); }
.metric__label {
  display: block;
  margin-top: 0.6rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--mct-text-muted);
}
.section--dark .metric__label { color: var(--mct-text-light-muted); }

/* --- Legacy testimonial --- */
.testimonial-quote {
  font-family: var(--mct-font-quote);
  font-size: clamp(1.25rem, 1.05rem + 1vw, 1.75rem);
  font-style: italic;
  line-height: 1.42;
  margin-bottom: 1rem;
}
.testimonial-quote--large { font-size: clamp(1.5rem, 1.15rem + 1.6vw, 2.25rem); }
.testimonial-name {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  margin: 0;
}
.testimonial-title { font-size: 0.8125rem; color: var(--mct-text-muted); margin: 0.2rem 0 0; }
.section--dark .testimonial-name { color: var(--mct-gold); }
.section--dark .testimonial-title { color: var(--mct-text-light-muted); }

/* --- Legacy buttons --- */
.wp-block-button.btn--secondary > .wp-block-button__link,
.btn--secondary {
  background: transparent;
  border: 1px solid var(--mct-accent);
  color: var(--mct-accent);
}
.wp-block-button.btn--secondary > .wp-block-button__link:hover,
.btn--secondary:hover { background: var(--mct-accent); color: var(--mct-text-light); }

/* --- Legacy odds and ends --- */
.gold-separator {
  width: 3.75rem;
  height: 1px;
  background: rgba(201, 168, 76, 0.45);
  border: 0;
  margin: clamp(2rem, 5vw, 3rem) 0;
}
.text-center { text-align: center; }
.small-text { font-size: 0.8125rem; color: var(--mct-text-muted); }

.check-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.check-list li { position: relative; padding-left: 1.6rem; }
.check-list li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.55em;
  width: 0.5rem; height: 0.28rem;
  border-left: 1.5px solid var(--mct-accent);
  border-bottom: 1.5px solid var(--mct-accent);
  transform: rotate(-45deg);
}
.section--dark .check-list li::before { border-color: var(--mct-gold); }

.sticky-portrait { position: sticky; top: calc(var(--mct-header-h) + 2rem); }
@media (max-width: 60em) { .sticky-portrait { position: static; } }

.video-embed { position: relative; aspect-ratio: 16 / 9; border-radius: var(--mct-radius-lg); overflow: hidden; background: var(--mct-bg-dark); }
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.subscribe-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem; }
.subscribe-bar__label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--mct-text-muted);
}
.subscribe-bar__link,
.subscribe-bar a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1.1rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--mct-text-muted);
  border: 1px solid var(--mct-rule);
  border-radius: 100px;
  transition: border-color var(--mct-dur) var(--mct-ease), color var(--mct-dur) var(--mct-ease);
}
.subscribe-bar a:hover { border-color: var(--mct-accent); color: var(--mct-accent); }
.subscribe-bar__sep { color: var(--mct-rule-strong); }

.signature-release { display: grid; gap: clamp(2rem, 5vw, 3.5rem); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 60em) { .signature-release { grid-template-columns: 1fr 1.3fr; } }
.signature-release__cover { width: 100%; border-radius: var(--mct-radius); }
.signature-release__meta-row { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; font-size: 0.8125rem; color: var(--mct-text-light-muted); }
.signature-release__tag {
  display: inline-block;
  padding: 0.28rem 0.6rem;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  background: var(--mct-gold);
  color: var(--mct-bg-dark);
}

/* The old theme's container/section names, kept alive so hand-written
   HTML blocks inside existing pages keep their intended width. */
.container-narrow { max-width: var(--mct-max-narrow); margin-inline: auto; }
.container-medium { max-width: var(--mct-max-mid); margin-inline: auto; }

/* The old contact form wrapper. The new form styles above already cover
   its inputs; this just gives the element its own measure. */
.contact-form { max-width: 38rem; }

/* A transparent header removes main's top padding so a hero can sit behind
   it. Any first section that is NOT one of the purpose-built heroes still
   needs to clear the bar, or its first line renders underneath it. */
.has-transparent-header .wp-site-blocks > main > *:first-child:not(.home-hero):not(.page-hero) {
  padding-top: calc(var(--mct-header-h) + var(--mct-section-y));
}

/* ==========================================================================
   21. NAVIGATION SUBMENU
   The header carries a "Work" dropdown holding the six sections. Core's
   default submenu is a bordered white box, which reads as unstyled — and
   sits badly over the dark transparent header on the homepage.
   ========================================================================== */

.wp-block-navigation .wp-block-navigation-submenu__toggle { padding: 0; }

.wp-block-navigation .wp-block-navigation__submenu-container {
  min-width: 13rem;
  padding: 0.5rem 0;
  background: var(--mct-bg);
  border: 1px solid var(--mct-rule);
  border-radius: var(--mct-radius);
  box-shadow: var(--mct-shadow-lift);
}
@supports (backdrop-filter: blur(1px)) {
  .wp-block-navigation .wp-block-navigation__submenu-container {
    background: rgba(251, 250, 247, 0.97);
    backdrop-filter: saturate(1.4) blur(14px);
  }
}

.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  display: block;
  width: 100%;
  padding: 0.5rem 1.125rem;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--mct-text);
  transition: background-color var(--mct-dur) var(--mct-ease), color var(--mct-dur) var(--mct-ease);
}
/* The growing underline belongs to top-level items only; inside the panel
   a background change reads better and does not shift the row. */
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content::after { display: none; }
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
  background: var(--mct-bg-warm);
  color: var(--mct-accent);
}

/* The panel keeps the light palette even under the transparent dark header —
   a dark-on-dark dropdown against a photographic hero is unreadable. */
.has-transparent-header .site-header:not(.is-scrolled) .wp-block-navigation__submenu-container .wp-block-navigation-item__content { color: var(--mct-text); }

/* The submenu arrow should sit with the label, not float away from it. */
.wp-block-navigation .wp-block-navigation__submenu-icon { margin-left: 0.3rem; }
.wp-block-navigation .wp-block-navigation__submenu-icon svg { width: 0.7em; height: 0.7em; }

/* In the mobile panel the submenu is already expanded inline, so it needs
   none of the panel chrome — just an indent to show the nesting. */
.mobile-nav .wp-block-navigation__submenu-container {
  position: static;
  min-width: 0;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
  opacity: 1;
  visibility: visible;
}
.mobile-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  padding: 0.85rem 0 0.85rem 1.25rem;
  font-family: var(--mct-font-heading);
  font-size: 1.375rem;
  color: var(--mct-text-light);
}

/* ==========================================================================
   22. TRANSPARENT HEADER, DETECTED RATHER THAN ASSUMED
   The header may only go transparent when the first thing under it is
   actually dark. PHP cannot know that for a page whose content the owner
   built, so the check happens here, where the first section is visible to
   the selector. Browsers without :has() get the solid header — which is
   the safe outcome, not a broken one.
   ========================================================================== */

@supports selector(:has(*)) {
  body:has(.wp-site-blocks > main > :first-child.section--dark),
  body:has(.wp-site-blocks > main > :first-child.home-hero),
  body:has(.wp-site-blocks > main > :first-child.page-hero) {
    /* Same treatment the body class gives, applied only when earned. */
  }

  body:has(.wp-site-blocks > main > :first-child.section--dark) .site-header:not(.is-scrolled),
  body:has(.wp-site-blocks > main > :first-child.home-hero) .site-header:not(.is-scrolled),
  body:has(.wp-site-blocks > main > :first-child.page-hero) .site-header:not(.is-scrolled) {
    background: transparent;
    border-bottom-color: transparent;
    backdrop-filter: none;
  }

  body:has(.wp-site-blocks > main > :first-child.section--dark) .site-header:not(.is-scrolled) .site-logo a,
  body:has(.wp-site-blocks > main > :first-child.home-hero) .site-header:not(.is-scrolled) .site-logo a,
  body:has(.wp-site-blocks > main > :first-child.page-hero) .site-header:not(.is-scrolled) .site-logo a,
  body:has(.wp-site-blocks > main > :first-child.section--dark) .site-header:not(.is-scrolled) .nav-menu a,
  body:has(.wp-site-blocks > main > :first-child.home-hero) .site-header:not(.is-scrolled) .nav-menu a,
  body:has(.wp-site-blocks > main > :first-child.page-hero) .site-header:not(.is-scrolled) .nav-menu a {
    color: var(--mct-text-light);
  }

  body:has(.wp-site-blocks > main > :first-child.section--dark) .site-header:not(.is-scrolled) .hamburger span,
  body:has(.wp-site-blocks > main > :first-child.home-hero) .site-header:not(.is-scrolled) .hamburger span,
  body:has(.wp-site-blocks > main > :first-child.page-hero) .site-header:not(.is-scrolled) .hamburger span {
    background: var(--mct-text-light);
  }

  /* A hero that sits behind the header owns its own top padding, so main
     must not add any on top of it. */
  body:has(.wp-site-blocks > main > :first-child.home-hero) .wp-site-blocks > main,
  body:has(.wp-site-blocks > main > :first-child.page-hero) .wp-site-blocks > main {
    padding-top: 0;
  }
}

/* The nav gap belongs to the list core renders, not to the <nav> wrapper
   that carries the class — otherwise the spacing here is inert and core's
   default wins. */
.nav-menu .wp-block-navigation__container { gap: clamp(1.25rem, 2.2vw, 2.25rem); }

/* ==========================================================================
   23. FILTER PANEL
   Several axes, combined with AND. Each row is labelled so the grouping is
   readable rather than implied by a gap.
   ========================================================================== */

.filter-panel {
  display: grid;
  gap: 0.9rem;
  padding-bottom: 1.5rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
  border-bottom: 1px solid var(--mct-rule);
}

.filter-row {
  display: grid;
  gap: 0.5rem;
  align-items: baseline;
  grid-template-columns: 1fr;
}
@media (min-width: 42em) {
  .filter-row { grid-template-columns: 7.5rem 1fr; gap: 0.75rem 1rem; }
}

.filter-row__label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mct-text-muted);
  padding-top: 0.55rem;
}
.section--dark .filter-row__label { color: var(--mct-text-light-muted); }

.filter-row__pills { display: flex; flex-wrap: wrap; gap: 0.4rem; }

/* On a phone the rows scroll sideways instead of wrapping into six lines
   of pills and pushing the actual work below the fold. */
@media (max-width: 42em) {
  .filter-row__pills {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    padding-bottom: 0.35rem;
    margin-inline: calc(var(--mct-gutter) * -1);
    padding-inline: var(--mct-gutter);
  }
  .filter-row__pills::-webkit-scrollbar { display: none; }
  .filter-row__pills .filter-btn { flex: none; scroll-snap-align: start; }
}

.filter-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  padding-top: 0.35rem;
}
@media (min-width: 42em) { .filter-status { padding-left: 8.5rem; } }

.filter-count {
  margin: 0;
  font-size: 0.8125rem;
  letter-spacing: 0.03em;
  color: var(--mct-text-muted);
  font-variant-numeric: tabular-nums;
}
.section--dark .filter-count { color: var(--mct-text-light-muted); }

.filter-clear {
  background: none;
  border: 0;
  padding: 0;
  font-family: inherit;
  font-size: 0.8125rem;
  color: var(--mct-accent);
  cursor: pointer;
  border-bottom: 1px solid currentColor;
  line-height: 1.3;
}
.filter-clear:hover { color: var(--mct-accent-hover); }
.section--dark .filter-clear { color: var(--mct-gold); }

/* ==========================================================================
   24. PLATFORM BUTTONS
   The listen row on an episode page. Each mark is drawn in CSS — no icon
   font, no SVG sprite, nothing that can fail to load and leave a blank box.
   ========================================================================== */

.listen-row {
  padding: clamp(1.25rem, 3vw, 1.75rem);
  background: var(--mct-bg-warm);
  border-radius: var(--mct-radius-lg);
  margin-bottom: 2.5rem;
}
.listen-row__label {
  margin: 0 0 0.9rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mct-text-muted);
}
.listen-row__buttons { display: flex; flex-wrap: wrap; gap: 0.6rem; }

.platform-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.72rem 1.15rem;
  background: var(--mct-bg-dark);
  color: var(--mct-text-light);
  border-radius: 100px;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.005em;
  text-decoration: none;
  transition: transform var(--mct-dur) var(--mct-ease), background-color var(--mct-dur) var(--mct-ease);
}
.platform-btn:hover { color: var(--mct-text-light); transform: translateY(-1px); }
.platform-btn:active { transform: none; }

.platform-btn__mark { width: 1.05rem; height: 1.05rem; flex: none; position: relative; }

/* YouTube: rounded rectangle with a play triangle knocked out. */
.platform-btn--youtube:hover { background: #C4302B; }
.platform-btn--youtube .platform-btn__mark {
  background: currentColor;
  border-radius: 5px / 3.5px;
  height: 0.78rem;
  margin-block: 0.13rem;
}
.platform-btn--youtube .platform-btn__mark::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  translate: -40% -50%;
  border-style: solid;
  border-width: 0.19rem 0 0.19rem 0.3rem;
  border-color: transparent transparent transparent var(--mct-bg-dark);
}
.platform-btn--youtube:hover .platform-btn__mark::after { border-left-color: #C4302B; }

/* Spotify: a disc with three arcs, drawn as stacked radial bands. */
.platform-btn--spotify:hover { background: #1DB954; }
.platform-btn--spotify .platform-btn__mark {
  background: currentColor;
  border-radius: 50%;
  overflow: hidden;
}
.platform-btn--spotify .platform-btn__mark::before,
.platform-btn--spotify .platform-btn__mark::after {
  content: '';
  position: absolute;
  left: 12%;
  right: 12%;
  border-top: 1.6px solid var(--mct-bg-dark);
  border-radius: 50%;
  height: 0.36rem;
}
.platform-btn--spotify .platform-btn__mark::before { top: 26%; }
.platform-btn--spotify .platform-btn__mark::after  { top: 52%; left: 22%; right: 22%; }
.platform-btn--spotify:hover .platform-btn__mark::before,
.platform-btn--spotify:hover .platform-btn__mark::after { border-top-color: #1DB954; }

/* Apple Podcasts: a microphone silhouette. */
.platform-btn--apple:hover { background: #9933CC; }
.platform-btn--apple .platform-btn__mark::before {
  content: '';
  position: absolute;
  top: 4%; left: 50%;
  translate: -50% 0;
  width: 0.4rem; height: 0.6rem;
  background: currentColor;
  border-radius: 0.2rem;
}
.platform-btn--apple .platform-btn__mark::after {
  content: '';
  position: absolute;
  bottom: 6%; left: 50%;
  translate: -50% 0;
  width: 0.72rem; height: 0.4rem;
  border: 1.6px solid currentColor;
  border-top: 0;
  border-radius: 0 0 0.4rem 0.4rem;
}

/* Chips linking to the genre and theme archives. */
.term-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  list-style: none;
  margin: 0 0 2.5rem;
  padding: 0;
}
.term-chips a {
  display: inline-block;
  padding: 0.32rem 0.8rem;
  font-size: 0.75rem;
  letter-spacing: 0.03em;
  color: var(--mct-text-muted);
  border: 1px solid var(--mct-rule);
  border-radius: 100px;
  transition: border-color var(--mct-dur) var(--mct-ease), color var(--mct-dur) var(--mct-ease);
}
.term-chips a:hover { border-color: var(--mct-accent); color: var(--mct-accent); }

.guest-bio__heading { font-size: 1.25rem; margin-bottom: 0.75rem; }

/* ==========================================================================
   25. SECTION-SPECIFIC RHYTHM
   The card modifiers above are mostly hooks with no styling of their own.
   These are the few places where a section genuinely reads better with a
   different rhythm than the shared card.
   ========================================================================== */

/* Fiction is read, not scanned, so the cards get more air between them and
   a slightly narrower column — closer to a shelf than a grid. */
.grid--fiction { gap: clamp(1.75rem, 3.5vw, 2.75rem); }
.card--fiction .card__body { padding-right: 0.5rem; }

/* Exclusive episodes sit slightly apart from the standard grid. */
.grid--exclusive { gap: clamp(1.5rem, 3vw, 2.25rem); }

/* Writing cards carry an excerpt, so their titles need a touch less space
   below than an episode card where the title is the last text element. */
.card--writing .card__title { margin-bottom: 0.5rem; }

/* Film cards lead with a logline; keep it to two lines so a long one does
   not push the year and runtime out of alignment across the row. */
.card--film .card__excerpt { -webkit-line-clamp: 2; }

.episode-details { margin-top: 2.5rem; }
.guest-bio {
  padding-top: 2rem;
  border-top: 1px solid var(--mct-rule);
}
.platform-btn__text { white-space: nowrap; }

/* On the narrowest phones the listen buttons should fill the width rather
   than leaving three ragged pills. */
@media (max-width: 26em) {
  .listen-row__buttons { flex-direction: column; align-items: stretch; }
  .platform-btn { justify-content: center; }
}

/* ==========================================================================
   26. TOUCH TARGETS
   The filter pills and term chips are comfortable with a mouse and too
   small with a thumb. On coarse pointers they grow to the 44px the WCAG
   target-size guidance asks for, without changing the desktop rhythm.
   ========================================================================== */

@media (pointer: coarse) {
  .filter-btn { padding: 0.7rem 1.1rem; font-size: 0.875rem; }
  .term-chips a { padding: 0.55rem 1rem; font-size: 0.8125rem; }
  .platform-btn { padding: 0.85rem 1.3rem; }
  .platform-links a,
  .footer-links a,
  .social-links a { display: inline-block; padding-block: 0.35rem; }
  .filter-clear { padding-block: 0.4rem; }
}

/* .btn--submit had a fixed minimum that would overflow the smallest
   phones once the form padding is accounted for. */
@media (max-width: 26em) {
  .btn--submit { min-width: 0; width: 100%; }
}

/* The nav dropdown's 13rem minimum is fine on desktop, where it lives, but
   must not apply to the inline mobile version. */
.mobile-nav .wp-block-navigation__submenu-container { min-width: 0; }

/* ==========================================================================
   27. THE ENTRY LIST
   ==========================================================================
   The replacement for the three-up card grid.

   A card grid says "here are some equally-weighted boxes". An entry list
   says "here is an index" — a label in the left margin, the content in the
   right, a hairline between rows. It is how a masthead, a filmography or a
   table of contents has always been set, it reads as considered rather than
   assembled, and it collapses to a clean single column on a phone without
   any of the boxes-become-a-vertical-stack awkwardness.

   Built from core group blocks, so every part stays editable in the Site
   Editor.
   ========================================================================== */

.entry-list { display: grid; }

.entry {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.35rem;
  padding-block: clamp(1.75rem, 3.5vw, 2.75rem);
  border-top: 1px solid var(--mct-rule);
}
.entry:last-child { border-bottom: 1px solid var(--mct-rule); }

@media (min-width: 48em) {
  .entry {
    /* The label column is fixed so every row's content starts on the same
       vertical line — that alignment is what makes it read as a set. */
    grid-template-columns: 11rem 1fr;
    gap: clamp(2rem, 4vw, 4rem);
    align-items: start;
  }
}

.entry__label {
  margin: 0;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--mct-accent);
  padding-top: 0.55rem;
}
.section--dark .entry__label { color: var(--mct-gold); }

.entry__content { display: grid; gap: 0.6rem; }

.entry__content h3 {
  margin: 0;
  font-size: clamp(1.375rem, 1.15rem + 1vw, 1.875rem);
  line-height: 1.2;
}
.entry__content h3 a { color: inherit; }
.entry__content h3 a:hover { color: var(--mct-accent); }
.section--dark .entry__content h3 a:hover { color: var(--mct-gold); }

.entry__content p {
  margin: 0;
  max-width: 56ch;
  color: var(--mct-text-muted);
}
.section--dark .entry__content p { color: var(--mct-text-light-muted); }

.section--dark .entry { border-color: var(--mct-rule-light); }
.section--dark .entry:last-child { border-bottom-color: var(--mct-rule-light); }

/* The whole row is a target when it links somewhere. The underline appears
   on the title only, so the hover reads as "this is a link" rather than
   "this box lit up". */
a.entry { text-decoration: none; color: inherit; }
a.entry:hover .entry__content h3 { color: var(--mct-accent); }

/* ==========================================================================
   28. RHYTHM VARIATION
   Sections of identical height stacked one after another is what makes a
   page read as generated. These give the page a beat: a strip is short, a
   statement section is tall, and the eye has somewhere to rest.
   ========================================================================== */

.section--tight { padding-block: clamp(2.5rem, 5vw, 4.5rem); }

/* Metrics in a hero belong on the same left axis as the headline above
   them. Centring them there is a reflex, not a decision, and it breaks the
   one strong vertical line the hero has. */
.page-hero .metrics-bar,
.home-hero .metrics-bar {
  text-align: left;
  grid-template-columns: repeat(auto-fit, minmax(min(50%, 8rem), max-content));
  gap: clamp(2rem, 5vw, 4.5rem);
  justify-content: start;
}
.page-hero .metric__number,
.home-hero .metric__number {
  color: var(--mct-gold);
  font-size: clamp(2.25rem, 1.6rem + 2.6vw, 3.25rem);
  line-height: 1;
}
.page-hero .metric__label,
.home-hero .metric__label {
  color: var(--mct-text-light-muted);
  font-size: 0.75rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}
.page-hero .eyebrow,
.home-hero .eyebrow { font-size: 0.75rem; letter-spacing: 0.16em; }

/* A hairline above the metrics ties them to the hero copy instead of
   leaving them floating in the space below it. */
.page-hero .metrics-bar {
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--mct-rule-light);
  max-width: 46rem;
}

/* The subscribe strip reads as a line of text, not a row of chips, when it
   sits inside a tight section. */
.section--tight .subscribe-bar { justify-content: flex-start; }
.publications-row {
  font-family: var(--mct-font-quote);
  font-size: clamp(1.0625rem, 1rem + 0.5vw, 1.375rem);
  font-style: italic;
  color: var(--mct-text-light-muted);
}

/* A legacy light card dropped inside a dark section needs the dark
   treatment, or it renders as a white slab with white text on it. */
.section--dark .card--white,
.section--dark .feature-card,
.section--dark .service-card,
.section--dark .collaborator-card,
.section--dark .contact-method {
  background: var(--mct-bg-dark-soft);
  color: var(--mct-text-light);
}
.section--dark .card--white h2, .section--dark .card--white h3, .section--dark .card--white h4,
.section--dark .feature-card h3, .section--dark .service-card h3, .section--dark .collaborator-card h3 { color: var(--mct-text-light); }
.section--dark .card--white p,
.section--dark .feature-card p, .section--dark .service-card p { color: var(--mct-text-light-muted); }

/* ==========================================================================
   29. NAVIGATION LIST RESET
   core/navigation ships its own list reset, but it arrives in a separate
   stylesheet whose load order is not guaranteed once caching and
   optimisation plugins get involved. If it loses the race the menu renders
   as a bulleted vertical list across the top of the page. Declaring it here
   makes the header correct regardless.
   ========================================================================== */

.nav-menu .wp-block-navigation__container,
.mobile-nav .wp-block-navigation__container {
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-menu .wp-block-navigation__container {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: clamp(1.25rem, 2.2vw, 2.25rem);
}
.mobile-nav .wp-block-navigation__container {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.nav-menu .wp-block-navigation-item,
.mobile-nav .wp-block-navigation-item { margin: 0; }
.nav-menu .wp-block-navigation-item { position: relative; }

/* ==========================================================================
   30. LAYOUT RECONCILIATION  —  read this before changing anything above
   ==========================================================================
   WordPress generates a rule for every block that uses the default (flow)
   layout, which is every group in this theme:

       .wp-container-xxx > *     { margin-block-start: 0; margin-block-end: 0 }
       .wp-container-xxx > * + * { margin-block-start: <blockGap> }

   It is emitted because `appearanceTools: true` switches blockGap on. Its
   specificity is 0,1,0 and it is printed inline, often after the theme's
   own stylesheet — so it silently flattens every bottom margin declared
   above into a single uniform gap. Section padding survives, which is why
   the symptom is a page with roomy outer bands and a cramped interior.

   Load order cannot be relied on to fix this: layout styles for blocks
   inside post content are collected during rendering and can be printed
   after the theme stylesheet no matter what dependencies are declared.
   Specificity can. Each selector below is the same rule from above with a
   `:root` prefix, taking it to 0,2,0 — out of reach of the generated rule
   in either order.

   Adjacent vertical margins still collapse normally, so WordPress's gap
   acts as a floor rather than adding to these values.

   This block is generated from the rules above. If you change a margin up
   there, change it here too, or delete the matching line here and let the
   uniform gap apply.
   ========================================================================== */

:root h1,
:root h2,
:root h3,
:root h4 { margin-block-start: 0; margin-block-end: 0.5em; }
:root p { margin-block-start: 0; margin-block-end: 1.25em; }
:root hr,
:root .wp-block-separator { margin-block-start: var(--mct-section-y); margin-block-end: var(--mct-section-y); }
:root blockquote { margin-block-start: 2.5rem; margin-block-end: 2.5rem; }
:root blockquote cite { margin-block-start: 1rem; }
:root .screen-reader-text { margin-block-start: -1px; margin-block-end: -1px; }
:root .section-header { margin-block-end: clamp(2.5rem, 6vw, 6rem); }
:root .eyebrow { margin-block-start: 0; margin-block-end: 1rem; }
:root .section-subcopy { margin-block-start: 1.25rem; }
:root .mobile-nav .wp-block-buttons,
:root .mobile-nav .btn-group { margin-block-start: 2rem; }
:root .btn-group,
:root .wp-block-buttons.btn-group { margin-block-start: 2rem; }
:root .card__media { margin-block-end: 1.5rem; }
:root .card__eyebrow { margin-block-start: 0; margin-block-end: 0.6rem; }
:root .card__title { margin-block-start: 0; margin-block-end: 0.7rem; }
:root .card__excerpt { margin-block-start: 0; margin-block-end: 0.9rem; }
:root .card__meta { margin-block-start: auto; margin-block-end: 0; }
:root .platform-links { margin-block-start: 0.75rem; margin-block-end: 0; }
:root .filter-bar { margin-block-end: clamp(2rem, 4vw, 3rem); }
:root .empty-state__hint { margin-block-start: 0.75rem !important; }
:root .art-tile { margin-block-start: 0; margin-block-end: var(--mct-gap); }
:root .art-tile__status { margin-block-start: 0.35rem; }
:root .lightbox__note { margin-block-start: 0.4rem; }
:root .prose p { margin-block-end: 1.5em; }
:root .prose h2 { margin-block-start: 2.4em; }
:root .prose h3 { margin-block-start: 2em; }
:root .prose ul,
:root .prose ol { margin-block-start: 0; margin-block-end: 1.5em; }
:root .prose li { margin-block-end: 0.55em; }
:root .prose figcaption { margin-block-start: 0.75rem; }
:root .prose--fiction p { margin-block-end: 1.35em; }
:root .prose--fiction p + p { margin-block-start: -0.35em; }
:root .entry-lede { margin-block-end: 2rem; }
:root .entry-meta { margin-block-end: 2.5rem; }
:root .content-note { margin-block-end: 2.5rem; }
:root .form-field { margin-block-end: 1.5rem; }
:root .form-field label { margin-block-end: 0.45rem; }
:root .form-consent { margin-block-end: 1.5rem; }
:root .form-notice { margin-block-end: 2rem; }
:root .form-notice p + p { margin-block-start: 0.35rem; }
:root .site-footer { margin-block-start: auto; }
:root .footer-tagline { margin-block-start: 0.75rem; margin-block-end: 0; }
:root .footer-heading { margin-block-start: 0; margin-block-end: 1.125rem; }
:root .home-hero .hero-lede { margin-block-start: 1.5rem; }
:root .episode-hero__title { margin-block-end: 1rem; }
:root .metric-label { margin-block-start: 0.6rem; }
:root .related-work { margin-block-start: var(--mct-section-y); }
:root .testimonial__quote { margin-block-start: 0; margin-block-end: 1.75rem; }
:root .comment-respond { margin-block-start: var(--mct-section-y); }
:root .pagination,
:root .wp-block-query-pagination { margin-block-start: clamp(2.5rem, 5vw, 4rem); }
:root .section-header-row { margin-block-end: clamp(2rem, 4vw, 3rem); }
:root .article-card__image { margin-block-end: 1.25rem; }
:root .article-card__image--placeholder { margin-block-end: 1.25rem; }
:root .article-card__category { margin-block-start: 0; margin-block-end: 0.6rem; }
:root .article-card__title { margin-block-start: 0; margin-block-end: 0.6rem; }
:root .article-card__excerpt { margin-block-start: 0; margin-block-end: 0.9rem; }
:root .article-card__meta { margin-block-start: auto; margin-block-end: 0; }
:root .episode-card__title { margin-block-start: 0; margin-block-end: 0.5rem; }
:root .episode-card__meta { margin-block-start: auto; margin-block-end: 0; }
:root .episode-card__badges { margin-block-end: 0.75rem; }
:root .release-card__cover { margin-block-end: 1.125rem; }
:root .release-card__title { margin-block-start: 0; margin-block-end: 0.35rem; }
:root .release-card__year,
:root .release-card__meta { margin-block-start: 0; margin-block-end: 0.5rem; }
:root .release-card__platforms { margin-block-start: auto; }
:root .release-card__flag,
:root .release-card--premium .release-card__flag { margin-block-end: 0.6rem; }
:root .collaborator-card__avatar { margin-block-start: 0; margin-block-end: 1.125rem; }
:root .collaborator-card__name { margin-block-start: 0; margin-block-end: 0.25rem; }
:root .collaborator-card__role,
:root .collaborator-card__credits { margin-block-start: 0; margin-block-end: 0.5rem; }
:root .feature-card__title,
:root .service-card__title { margin-block-start: 0; margin-block-end: 0.6rem; }
:root .service-card__num { margin-block-end: 0.75rem; }
:root .contact-method__label { margin-block-start: 0; margin-block-end: 0.4rem; }
:root .archive-filter-system { margin-block-end: clamp(2rem, 4vw, 3rem); }
:root .filter-row { margin-block-end: 0.75rem; }
:root .filter-bar--category,
:root .filter-bar--format { margin-block-end: 0.75rem; }
:root .archive-results { margin-block-start: 1.5rem; }
:root .article-hero__eyebrow { margin-block-end: 1rem; }
:root .article-featured-image { margin-block-end: 2.5rem; }
:root .article-excerpt { margin-block-end: 2rem; }
:root .article-content p { margin-block-end: 1.5em; }
:root .article-content h2 { margin-block-start: 2.4em; }
:root .article-content h3 { margin-block-start: 2em; }
:root .article-back-link { margin-block-end: 2rem; }
:root .form-group { margin-block-end: 1.5rem; }
:root .form-label { margin-block-end: 0.45rem; }
:root .metric__label { margin-block-start: 0.6rem; }
:root .testimonial-quote { margin-block-end: 1rem; }
:root .testimonial-title { margin-block-start: 0.2rem; margin-block-end: 0; }
:root .gold-separator { margin-block-start: clamp(2rem,; margin-block-end: 3rem); }
:root .filter-panel { margin-block-end: clamp(2rem, 4vw, 3rem); }
:root .listen-row { margin-block-end: 2.5rem; }
:root .listen-row__label { margin-block-start: 0; margin-block-end: 0.9rem; }
:root .term-chips { margin-block-start: 0; margin-block-end: 2.5rem; }
:root .guest-bio__heading { margin-block-end: 0.75rem; }
:root .card--writing .card__title { margin-block-end: 0.5rem; }
:root .episode-details { margin-block-start: 2.5rem; }

/* ==========================================================================
   31. HERO COMPOSITION
   ==========================================================================
   A text column cannot be 1280px wide and stay readable, so the hero's copy
   is capped near 800px. Drawing that column inside a 1280px frame and
   leaving the remaining 480px empty is what made every page read as a
   narrow strip with dead space beside it.

   Two fixes, picked by what the hero actually contains:

   - A hero that is only words gets a frame sized to the words. The column
     fills it, and the page reads as a deliberate measure rather than as a
     layout that failed to fill.

   - A hero that also has statistics uses the full width and puts them in
     the second column, so the space is occupied by content instead of by
     nothing.
   ========================================================================== */

.page-hero__inner {
  max-width: 66rem;   /* ~1056px — the copy fills this instead of rattling around in 1280 */
}

@supports selector(:has(*)) {
  @media (min-width: 64em) {
    .page-hero__inner:has(.metrics-bar) {
      max-width: var(--mct-max);
      display: grid;
      grid-template-columns: minmax(0, 1.32fr) minmax(0, 0.68fr);
      column-gap: clamp(3rem, 6vw, 6rem);
      align-items: end;
    }
    /* Eyebrow, headline and copy stack in the first column; the stats sit
       in the second, bottom-aligned to the copy's last line. */
    .page-hero__inner:has(.metrics-bar) > .eyebrow,
    .page-hero__inner:has(.metrics-bar) > h1,
    .page-hero__inner:has(.metrics-bar) > p { grid-column: 1; }

    .page-hero__inner:has(.metrics-bar) > .metrics-bar {
      grid-column: 2;
      grid-row: 2 / span 2;
      margin: 0;
      padding-top: 0;
      border-top: 0;
      border-left: 1px solid var(--mct-rule-light);
      padding-left: clamp(2rem, 3vw, 3rem);
      max-width: none;
      grid-template-columns: 1fr;
      gap: clamp(1.5rem, 2.5vw, 2.25rem);
      align-self: end;
      /* Left-aligned against the rule, not floating in the middle of the
         column — the rule is the axis they belong to. */
      text-align: left;
      justify-items: start;
    }
    /* .metric carries text-align:center from the legacy rules; inside the
       hero column it should sit on the rule's axis instead. */
    .page-hero__inner:has(.metrics-bar) .metric { text-align: left; }
  }
}

/* Headline and copy can breathe a little wider now that the frame fits them. */
.page-hero h1 { max-width: 20ch; }
.page-hero p:not([class]) { max-width: 54ch; }

/* Same reasoning for a section that is only a header and prose: the header
   is already capped at 46rem, so a 1280px frame around it is dead space.
   Sections containing a grid keep the full width, because the grid uses it. */
.section--copy .container { max-width: 66rem; }

/* ==========================================================================
   32. FULL-BLEED SECTIONS
   ==========================================================================
   Every .section supplies its own horizontal gutter and centres its content
   in .container, so the section element itself must reach the viewport edge
   — that is what lets a dark or warm band run edge to edge.

   WordPress's root padding does the opposite: it insets everything inside
   .wp-site-blocks, so a dark hero stops short of both edges and a strip of
   body colour shows down each side. It is off in theme.json, and zeroed
   here as well so that turning "root padding" back on in Appearance →
   Editor → Styles cannot reintroduce the strips.
   ========================================================================== */

:root .wp-site-blocks,
:root .wp-site-blocks > main,
:root .wp-block-post-content {
  padding-left: 0;
  padding-right: 0;
  max-width: none;
}

/* Sections declare align:full, so give the class the behaviour it promises
   regardless of which layout container it lands in. */
:root .alignfull,
:root .section,
:root .page-hero,
:root .home-hero {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

/* ==========================================================================
   33. NO GAPS BETWEEN STRUCTURAL BLOCKS
   ==========================================================================
   .wp-site-blocks is a flow-layout container, so WordPress puts a blockGap
   margin between each of its children — which are the header, <main> and
   the footer. That is a 24px band of page background under the header and
   another above the footer. The same rule applies inside <main>, so every
   section is separated from the next by a strip of body colour rather than
   meeting it cleanly.

   Sections carry their own vertical padding; they are meant to butt
   directly against each other and against the header and footer. Zeroed
   here at a specificity the generated rule cannot reach, in either order.

   This deliberately does not touch gaps deeper in the tree — paragraphs,
   headings and cards keep the rhythm restored in section 30, where
   adjacent margins collapse normally.
   ========================================================================== */

:root .wp-site-blocks > *,
:root .wp-site-blocks > * + *,
:root .wp-site-blocks > main > *,
:root .wp-site-blocks > main > * + * {
  margin-block-start: 0;
  margin-block-end: 0;
}

/* The site wrapper itself must not add vertical padding either — that would
   show as a band above the header and below the footer. */
:root .wp-site-blocks { padding-top: 0; padding-bottom: 0; }

/* Nothing should sit between the header and the first section. */
:root .site-header + *,
:root .mobile-nav + * { margin-block-start: 0; }