/*
Theme Name: Wrexham Coffee Matchup
Theme URI: https://wxmcoffeematchup.com
Author: Built for Dave & Courtney
Description: A theme for the Wrexham Coffee Matchup podcast. Parchment, Welsh red and green, condensed matchday type. The home page leads with whichever is newer — an episode or a column.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 7.1
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: wcm
Tags: podcast, blog, one-column, custom-menu, featured-images
*/

/* ---------------------------------------------------------------
   TOKENS
   --------------------------------------------------------------- */
:root {
  --wcm-bg:        #F5EFE2;
  --wcm-band:      #EDE5D4;
  --wcm-card:      #FFFCF5;
  --wcm-ink:       #2A1810;
  --wcm-muted:     #6E5C48;
  --wcm-faint:     #9C8A70;
  --wcm-red:       #C3272B;
  --wcm-red-dark:  #8E1B1F;
  --wcm-green:     #1F5C33;
  --wcm-gold:      #E4B963;
  --wcm-gold-ink:  #A8761F;
  --wcm-line:      #DFD2BA;
  --wcm-hair:      #EFE2C9;

  --wcm-display: 'Barlow Condensed', 'Oswald', 'Arial Narrow', sans-serif;
  --wcm-body:    'Karla', 'Trebuchet MS', system-ui, sans-serif;

  --wcm-pad:  clamp(18px, 5vw, 72px);
  --wcm-max:  1400px;
  --wcm-read: 760px;
}

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

html { background: var(--wcm-bg); -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--wcm-bg);
  color: var(--wcm-ink);
  font-family: var(--wcm-body);
  font-size: 17px;
  line-height: 1.6;
  overflow-x: hidden;
  /* Hold the footer at the bottom of the window on pages with little on them
     — The Column before Dave writes one, 404, an empty search. Without this
     the footer stops wherever the content stops and leaves a band of bare
     parchment beneath it. dvh follows a phone's address bar; vh is there for
     browsers that do not know dvh. */
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
/* The page body takes the slack; everything else keeps its own height. */
#wcm-main { flex: 1 0 auto; }
.wcm-stripe, .wcm-header, .wcm-footer { flex: none; }

img { max-width: 100%; height: auto; }
::selection { background: var(--wcm-gold); color: var(--wcm-ink); }

a { color: var(--wcm-red); text-decoration: none; }
a:hover, a:focus { color: var(--wcm-red-dark); }

:focus-visible { outline: 3px solid var(--wcm-green); outline-offset: 3px; }

.wcm-skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--wcm-ink); color: var(--wcm-bg);
  padding: 12px 20px; font-weight: 700;
}
.wcm-skip:focus { left: 8px; top: 8px; color: var(--wcm-bg); }

.wcm-wrap { max-width: var(--wcm-max); margin: 0 auto; padding-left: var(--wcm-pad); padding-right: var(--wcm-pad); }
.wcm-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------------------------------------------------------------
   TYPE
   --------------------------------------------------------------- */
.wcm-display {
  font-family: var(--wcm-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  line-height: 1.02;
}
.wcm-eyebrow {
  font-size: 12.5px; font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--wcm-green);
  display: flex; align-items: center; gap: 11px;
  margin: 0;
}
.wcm-eyebrow::before { content: ""; width: 28px; height: 3px; background: currentColor; flex: none; }
.wcm-eyebrow--plain::before { display: none; }

h1, h2, h3, h4 { font-family: var(--wcm-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; line-height: 1.05; margin: 0; }

/* ---------------------------------------------------------------
   HEADER
   --------------------------------------------------------------- */
.wcm-stripe { display: flex; height: 6px; }
.wcm-stripe span { flex: 1 1 0; }
.wcm-stripe span:first-child { background: var(--wcm-green); }
.wcm-stripe span:last-child  { background: var(--wcm-red); }

.wcm-header {
  position: sticky; top: 0; z-index: 40;
  background: var(--wcm-band);
  border-bottom: 4px solid var(--wcm-ink);
}
.wcm-header__inner {
  max-width: var(--wcm-max); margin: 0 auto;
  padding: clamp(8px,1.6vw,12px) var(--wcm-pad);
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(8px,1.6vw,20px); flex-wrap: wrap;
}

.wcm-brand { display: flex; align-items: center; gap: clamp(9px,2vw,13px); min-width: 0; }
.wcm-brand__mark {
  width: clamp(34px,8vw,46px); height: clamp(34px,8vw,46px);
  border-radius: 50%; background: var(--wcm-red);
  border: 3px solid var(--wcm-ink);
  display: flex; align-items: center; justify-content: center; flex: none;
}
.wcm-brand__mark svg { width: clamp(17px,4.2vw,22px); height: clamp(17px,4.2vw,22px); }
.wcm-brand__type { display: flex; align-items: baseline; gap: clamp(5px,1.4vw,7px); white-space: nowrap; min-width: 0; }

/* outlined wordmark: stroked copy behind, fill on top */
.wcm-word { position: relative; line-height: 1; display: inline-block; }
.wcm-word span {
  font-family: var(--wcm-display); text-transform: uppercase;
  font-size: clamp(21px,5.4vw,34px); letter-spacing: clamp(1.2px,0.4vw,2px);
}
.wcm-word .wcm-word__out {
  position: absolute; inset: 0;
  /* Stroke grows more slowly than the type, so the outline stays a rim
     instead of closing up the letters at the larger size. */
  -webkit-text-stroke: clamp(2.5px,0.6vw,4px) var(--wcm-ink);
  color: var(--wcm-ink);
}
.wcm-word .wcm-word__in { position: relative; }
.wcm-word--light .wcm-word__in { color: var(--wcm-bg); font-weight: 600; }
.wcm-word--light .wcm-word__out { font-weight: 600; }
.wcm-word--red   .wcm-word__in { color: var(--wcm-red); font-weight: 700; }
.wcm-word--red   .wcm-word__out { font-weight: 700; }

.wcm-nav { display: flex; align-items: center; gap: clamp(14px,2.4vw,32px); flex-wrap: wrap; }
.wcm-nav ul { display: flex; align-items: center; gap: clamp(14px,2.4vw,30px); list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.wcm-nav a {
  color: var(--wcm-ink); font-size: clamp(13.5px,3.5vw,15px); font-weight: 700;
  padding: 6px 0 0; display: inline-block;
  transition: transform .15s ease, color .15s ease;
}
/* Every item carries the bar, transparent until the page is the current one,
   so nothing shifts sideways or reflows when it lights up. */
.wcm-nav a::after {
  content: ""; display: block; height: 3px; margin-top: 4px;
  border-radius: 2px; background: transparent;
  transition: background .15s ease;
}
.wcm-nav a:hover { color: var(--wcm-red); }
.wcm-nav a:hover::after { background: rgba(195,39,43,.35); }

.wcm-nav .current-menu-item > a,
.wcm-nav .current_page_item > a,
.wcm-nav .current-menu-parent > a,
.wcm-nav .current-menu-ancestor > a,
.wcm-nav .current-category-ancestor > a,
.wcm-nav .wcm-nav__on {
  color: var(--wcm-ink);
  transform: translateY(-2px);
}
.wcm-nav .current-menu-item > a::after,
.wcm-nav .current_page_item > a::after,
.wcm-nav .current-menu-parent > a::after,
.wcm-nav .current-menu-ancestor > a::after,
.wcm-nav .current-category-ancestor > a::after,
.wcm-nav .wcm-nav__on::after {
  background: var(--wcm-red);
}
@media (prefers-reduced-motion: reduce) {
  .wcm-nav a { transition: none; }
  .wcm-nav .current-menu-item > a,
  .wcm-nav .current_page_item > a,
  .wcm-nav .wcm-nav__on { transform: none; }
}


/* ---------------------------------------------------------------
   THE PHONE MENU

   The header is one row at desktop width. Below 860px the four links and the
   Listen now pill no longer fit beside the wordmark, so the row wrapped into
   three and the header ate a fifth of a phone screen — while staying stuck to
   the top the whole way down the page. Below that width the menu folds into a
   button instead, and the header stays a single ~60px bar.

   .is-nav-ready is added by assets/nav.js. Nothing here hides the menu without
   it, so a browser that never runs the script keeps the old wrapping header —
   which is ugly, but works — rather than a button that does nothing.
   --------------------------------------------------------------- */
.wcm-navbtn { display: none; }

@media (max-width: 860px) {
  .wcm-header__inner { flex-wrap: nowrap; gap: 10px; }

  .wcm-navbtn {
    display: inline-flex; align-items: center; gap: 9px; flex: none;
    min-height: 44px; padding: 7px 15px;
    border: 3px solid var(--wcm-ink); border-radius: 999px;
    background: var(--wcm-card); color: var(--wcm-ink);
    font-family: var(--wcm-display); font-weight: 700;
    font-size: 17px; letter-spacing: 1.1px; text-transform: uppercase;
    line-height: 1; cursor: pointer;
  }
  .wcm-navbtn:hover { background: var(--wcm-red); color: #F5EFE2; }
  .wcm-navbtn__bars { display: grid; gap: 3px; width: 17px; }
  .wcm-navbtn__bars span {
    display: block; height: 2.5px; border-radius: 2px; background: currentColor;
    transition: transform .15s ease, opacity .15s ease;
  }
  .wcm-header.is-nav-open .wcm-navbtn__bars span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
  .wcm-header.is-nav-open .wcm-navbtn__bars span:nth-child(2) { opacity: 0; }
  .wcm-header.is-nav-open .wcm-navbtn__bars span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

  /* The panel hangs off the bottom of the bar. The header is sticky, which
     already makes it the containing block; the 4px is its own bottom border. */
  .wcm-header.is-nav-ready .wcm-nav {
    display: none;
    position: absolute; left: 0; right: 0; top: calc(100% + 4px);
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 4px var(--wcm-pad) 18px;
    background: var(--wcm-band);
    border-bottom: 4px solid var(--wcm-ink);
    box-shadow: 0 14px 22px rgba(42,24,16,.16);
    max-height: calc(100dvh - 100% - 10px); overflow-y: auto;
  }
  .wcm-header.is-nav-open .wcm-nav { display: flex; }

  .wcm-header.is-nav-ready .wcm-nav ul { flex-direction: column; align-items: stretch; gap: 0; width: 100%; }
  .wcm-header.is-nav-ready .wcm-nav li + li { border-top: 2px solid rgba(42,24,16,.13); }
  .wcm-header.is-nav-ready .wcm-nav a {
    display: block; width: 100%;
    padding: 14px 0 11px; font-size: 17px;
  }
  /* Stacked, a full-width bar under the current item reads as a divider.
     Keep it as the short marker it is in the design instead. */
  .wcm-header.is-nav-ready .wcm-nav a::after { width: 26px; }

  .wcm-header.is-nav-ready .wcm-nav a.wcm-btn {
    width: 100%; margin-top: 14px;
    font-size: 19px; padding: 13px 18px;
  }
}

/* Narrow phones: the wordmark and a labelled button will not both fit, and the
   wordmark is the one worth keeping. The button keeps its 44px tap target and
   its name in aria-label. */
@media (max-width: 540px) {
  .wcm-navbtn { padding: 7px 12px; gap: 0; }
  .wcm-navbtn__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .wcm-navbtn__bars { width: 20px; }
}

/* ---------------------------------------------------------------
   BUTTONS
   --------------------------------------------------------------- */
.wcm-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--wcm-display); font-weight: 700;
  font-size: 19px; letter-spacing: 1.2px;
  text-transform: uppercase; line-height: 1;
  padding: 11px 20px;
  border-radius: 999px; border: 3px solid var(--wcm-ink);
  background: var(--wcm-card); color: var(--wcm-ink);
  cursor: pointer; text-align: center;
  transition: transform .08s ease;
}
/* Narrow phones: keep the four hero platform pills able to shrink. */
@media (max-width: 420px) {
  .wcm-btn { font-size: 17px; letter-spacing: 1px; padding: 10px 16px; }
}
/* .wcm-nav a is (0,1,1) and .wcm-btn is (0,1,0), so without this the nav link
   rule wins and strips the header pill of its colour, padding and type. */
.wcm-nav a.wcm-btn {
  gap: clamp(6px,1.6vw,9px);
  font-family: var(--wcm-display); font-weight: 700;
  font-size: clamp(16px,4.2vw,19px);
  letter-spacing: clamp(1px,0.35vw,1.5px);
  text-transform: uppercase; line-height: 1;
  padding: clamp(6px,1.5vw,9px) clamp(13px,3.2vw,20px);
  flex-shrink: 0; white-space: nowrap;
}
.wcm-nav a.wcm-btn::after { display: none; }
.wcm-nav a.wcm-btn--red { color: #F5EFE2; }
.wcm-nav a.wcm-btn--red:hover { color: #F5EFE2; }
.wcm-nav a.wcm-btn--ink { color: #F5EFE2; }
.wcm-nav a.wcm-btn:hover { color: #F5EFE2; transform: translateY(-1px); }
.wcm-nav a.wcm-btn svg { width: clamp(12px,3vw,14px); height: clamp(12px,3vw,14px); }
/* The archive row's Play pill is the small variant in the design. */
.wcm-row__go .wcm-btn {
  gap: 8px; padding: 8px 18px;
  font-size: 18px; letter-spacing: 1.2px; line-height: 1.2;
  min-height: 44px;
}
.wcm-btn:hover { color: var(--wcm-ink); transform: translateY(-1px); }
.wcm-btn svg { flex: none; }
.wcm-btn--red   { background: var(--wcm-red);   color: #F5EFE2; border-color: var(--wcm-ink); }
.wcm-btn--red:hover { color: #F5EFE2; }
.wcm-btn--ink   { background: var(--wcm-ink);   color: #F5EFE2; }
.wcm-btn--ink:hover { color: #F5EFE2; }
.wcm-btn--green { background: var(--wcm-green); color: #F5EFE2; }
.wcm-btn--green:hover { color: #F5EFE2; }
.wcm-btn--sq { border-radius: 12px; }
.wcm-btn--block { display: flex; width: 100%; }
.wcm-btn--listen {
  justify-content: flex-start; text-align: left;
  gap: 11px; padding: 11px 18px;
  font-size: 19px; letter-spacing: 1.2px; line-height: 1.15;
}
.wcm-btn--listen svg { flex: none; }

/* ---------------------------------------------------------------
   HERO
   --------------------------------------------------------------- */
.wcm-hero {
  display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(28px,4vw,56px);
  align-items: start; padding: clamp(34px,5vw,72px) 0 clamp(28px,4vw,56px);
}
.wcm-hero__text { display: flex; flex-direction: column; gap: clamp(16px,2vw,24px); align-items: flex-start; }
.wcm-hero h1 { font-size: clamp(38px,6.4vw,68px); letter-spacing: 1px; }
.wcm-hero h1 .wcm-hero__accent { color: var(--wcm-red); display: block; }
.wcm-hero__lede { font-size: clamp(16px,1.4vw,18.5px); line-height: 1.6; color: var(--wcm-muted); max-width: 30em; }
/* The four platform pills.

   As a wrapping flex row they measured 616px against 615px of text column at a
   1440px window, so RSS dropped onto a line by itself for the sake of one
   pixel — and stayed there all the way down. Trimming the padding, the
   letter-spacing and the gap takes the row to 573px, which fits a 1440px
   window comfortably and holds down to about 1300px.

   Below that there is genuinely not enough column for four, so they pair off
   two and two rather than leaving RSS on its own. Two windows have the room
   for a single row: 1301px and up, where the text column is wide enough, and
   681-860px, where the artwork has dropped below and the text has the page to
   itself. Everywhere else is the pair. */
.wcm-hero__links {
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr));
  grid-auto-rows: 1fr; gap: 8px;
}
/* Paired up the columns are narrow, and "Apple Podcasts" is the longest label
   by some way, so the type comes down to keep every button on one line. */
.wcm-hero__links .wcm-btn {
  width: 100%; white-space: nowrap;
  gap: 7px; padding: 11px 10px;
  font-size: 17px; letter-spacing: .8px;
}

@media (min-width: 1301px), (min-width: 681px) and (max-width: 860px) {
  .wcm-hero__links { display: flex; flex-wrap: nowrap; }
  .wcm-hero__links .wcm-btn {
    width: auto;
    gap: 9px; padding: 11px 16px;
    font-size: 19px; letter-spacing: 1.05px;
  }
}
.wcm-hero__art { position: relative; display: flex; justify-content: center; align-self: center; }
.wcm-hero__art img { display: block; width: 100%; max-width: 620px; }
.wcm-hero__art::before {
  content: ""; position: absolute; inset: 8% 6% 14% 6%;
  background: radial-gradient(ellipse at center, rgba(195,39,43,0.16), rgba(195,39,43,0) 68%);
  z-index: -1;
}
.wcm-hero--glow-green .wcm-hero__art::before {
  background: radial-gradient(ellipse at center, rgba(31,92,51,0.16), rgba(31,92,51,0) 68%);
}

/* ---------------------------------------------------------------
   FEATURE PANEL (the newest-wins block)
   --------------------------------------------------------------- */
.wcm-feature {
  border: 5px solid var(--wcm-ink); border-radius: 22px; overflow: hidden;
  background: var(--wcm-card); margin-bottom: clamp(40px,5vw,72px);
}
.wcm-feature--episode { box-shadow: 0 0 0 5px rgba(195,39,43,0.20), 0 0 0 12px rgba(195,39,43,0.08); }
.wcm-feature--column  { box-shadow: 0 0 0 5px rgba(31,92,51,0.20),  0 0 0 12px rgba(31,92,51,0.08); }

.wcm-feature__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px clamp(18px,2.4vw,32px); color: #FFF6E4; flex-wrap: wrap;
  font-size: 12.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
}
.wcm-feature--episode .wcm-feature__bar { background: var(--wcm-red); }
.wcm-feature--column  .wcm-feature__bar { background: var(--wcm-green); }
.wcm-feature__bar b { display: flex; align-items: center; gap: 10px; font-weight: 700; }
.wcm-feature__bar em { font-style: normal; font-size: 13px; letter-spacing: 0; text-transform: none; opacity: .93; }
.wcm-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--wcm-gold); flex: none; }

.wcm-feature__body {
  display: grid; grid-template-columns: 1.35fr 1fr;
  column-gap: clamp(24px,3vw,40px); row-gap: 16px;
  padding: clamp(22px,3vw,34px) clamp(18px,2.4vw,32px);
}
/* Full-width row above both columns, so main and artwork share a top edge. */
.wcm-feature__meta--row { grid-column: 1 / -1; margin: 0; }
.wcm-feature__main { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.wcm-feature__main h2 { font-size: clamp(26px,3.2vw,40px); }
.wcm-feature__meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 13px; font-weight: 700; color: var(--wcm-muted); }
.wcm-feature__dek { font-size: 16.5px; line-height: 1.62; color: var(--wcm-muted); }
.wcm-feature__side { display: flex; flex-direction: column; gap: 14px; justify-content: flex-start; }

.wcm-pill {
  display: inline-flex; align-items: center; border-radius: 999px;
  border: 3px solid var(--wcm-ink); padding: 4px 14px;
  font-family: var(--wcm-display); font-weight: 700; font-size: 18px;
  letter-spacing: 1.4px; text-transform: uppercase; line-height: 1.25;
  background: var(--wcm-red); color: #F5EFE2;
}
.wcm-pill--green { background: var(--wcm-green); }
.wcm-pill--quiet { background: var(--wcm-band); color: var(--wcm-ink); }

/* "also new" card inside the feature */
.wcm-alsonew {
  border: 3px solid var(--wcm-ink); border-radius: 16px; padding: 20px;
  display: flex; flex-direction: column; gap: 10px; background: var(--wcm-band);
}
.wcm-alsonew__label { font-size: 11.5px; font-weight: 700; letter-spacing: 0.16em; color: var(--wcm-muted); text-transform: uppercase; }
/* Across the bottom of the feature panel rather than stacked under the artwork.
   With the full width to play with it reads as one line — label, what it is,
   the title, and the button — instead of a stretched version of the tall card. */
.wcm-alsonew--wide { grid-column: 1 / -1; }
@media (min-width: 861px) {
  .wcm-alsonew--wide { flex-direction: row; align-items: center; gap: clamp(14px,1.8vw,22px); }
  .wcm-alsonew--wide .wcm-alsonew__label { flex: none; }
  .wcm-alsonew--wide .wcm-card__meta { flex: none; margin: 0; }
  .wcm-alsonew--wide h3 { flex: 1 1 auto; min-width: 0; }
  .wcm-alsonew--wide .wcm-btn { flex: none; margin-left: auto; }
}
.wcm-alsonew h3 { font-size: 20px; }
.wcm-alsonew h3 a { color: var(--wcm-ink); }
.wcm-alsonew h3 a:hover { color: var(--wcm-red); }

/* ---------------------------------------------------------------
   PLAYER
   --------------------------------------------------------------- */
.wcm-player {
  display: flex; align-items: center; gap: 16px; width: 100%;
  background: var(--wcm-band); border: 3px solid var(--wcm-ink);
  border-radius: 14px; padding: 14px 16px;
}
.wcm-player audio { width: 100%; }
.wcm-player__note { font-size: 13px; color: var(--wcm-muted); }

/* ---------------------------------------------------------------
   SECTION HEADS
   --------------------------------------------------------------- */
.wcm-sechead {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 20px;
  padding-bottom: 18px; border-bottom: 3px solid var(--wcm-gold);
  margin-bottom: clamp(20px,2.4vw,30px); flex-wrap: wrap;
}
.wcm-sechead h2 { font-size: clamp(24px,2.8vw,34px); }
.wcm-sechead a { font-size: 15px; font-weight: 700; display: inline-flex; align-items: center; gap: 7px; }

/* ---------------------------------------------------------------
   CARDS
   --------------------------------------------------------------- */
.wcm-grid { display: grid; gap: clamp(16px,2vw,24px); }
.wcm-grid--3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.wcm-grid--2 { grid-template-columns: repeat(2, minmax(0,1fr)); }

.wcm-card {
  display: flex; flex-direction: column; gap: 12px;
  background: var(--wcm-card); border: 3px solid var(--wcm-ink);
  border-radius: 16px; padding: 22px;
}
.wcm-card__meta { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; font-size: 12.5px; font-weight: 700; color: var(--wcm-muted); }
.wcm-card__meta .wcm-n { color: var(--wcm-red); }
.wcm-card h3 { font-size: clamp(18px,1.7vw,22px); }
.wcm-card h3 a { color: var(--wcm-ink); }
.wcm-card h3 a:hover { color: var(--wcm-red); }
.wcm-card__dek { font-size: 15px; line-height: 1.58; color: var(--wcm-muted); flex-grow: 1; }
.wcm-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 10px; border-top: 2px solid var(--wcm-hair); font-size: 13.5px; font-weight: 700; color: var(--wcm-muted); }
.wcm-card--column { border-left-width: 8px; border-left-color: var(--wcm-green); }
.wcm-card--episode { border-left-width: 8px; border-left-color: var(--wcm-red); }

/* ---------------------------------------------------------------
   BANDS
   --------------------------------------------------------------- */
.wcm-band {
  background: var(--wcm-band);
  border-top: 4px solid var(--wcm-ink); border-bottom: 4px solid var(--wcm-ink);
  padding: clamp(38px,5vw,62px) 0;
  margin: clamp(40px,5vw,72px) 0;
}
.wcm-band__grid { display: grid; grid-template-columns: 1fr 2fr; gap: clamp(24px,3vw,40px); align-items: start; }
.wcm-band__intro { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.wcm-band__intro h2 { font-size: clamp(26px,3vw,36px); }
.wcm-band__intro p:not(.wcm-eyebrow) { margin: 0; font-size: 16px; line-height: 1.6; color: var(--wcm-muted); }

/* ---------------------------------------------------------------
   EPISODE LIST (archive)
   --------------------------------------------------------------- */
.wcm-pagehead { padding: clamp(34px,5vw,72px) 0 clamp(16px,2vw,28px); display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.wcm-pagehead h1 { font-size: clamp(36px,4.6vw,64px); line-height: .98; }
.wcm-pagehead p:not(.wcm-eyebrow) { margin: 0; font-size: 17px; line-height: 1.6; color: var(--wcm-muted); max-width: 46em; }

.wcm-tools { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-bottom: 22px; }
.wcm-filters { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.wcm-chip {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 10px 18px; border-radius: 999px; border: 2px solid var(--wcm-ink);
  background: var(--wcm-card); color: var(--wcm-ink); font-size: 14px; font-weight: 700;
}
.wcm-chip:hover { color: var(--wcm-ink); }
.wcm-chip--on { background: var(--wcm-ink); color: var(--wcm-bg); }
.wcm-chip--on:hover { color: var(--wcm-bg); }

.wcm-search { display: flex; align-items: center; gap: 10px; background: var(--wcm-card); border: 2px solid var(--wcm-ink); border-radius: 999px; padding: 6px 8px 6px 18px; min-width: min(320px, 100%); }
.wcm-search input[type=search] { border: 0; background: transparent; font: inherit; font-size: 15px; color: var(--wcm-ink); padding: 8px 0; flex-grow: 1; min-width: 0; }
.wcm-search input[type=search]:focus { outline: none; }
.wcm-search button { border: 0; background: var(--wcm-ink); color: var(--wcm-bg); border-radius: 999px; min-height: 40px; padding: 0 18px; font: inherit; font-weight: 700; font-size: 14px; cursor: pointer; }

.wcm-list { border: 4px solid var(--wcm-ink); border-radius: 18px; overflow: hidden; background: var(--wcm-card); }
.wcm-list__head {
  display: grid; grid-template-columns: 92px 1fr 150px 132px; gap: 20px; align-items: center;
  padding: 18px clamp(16px,2vw,28px); background: var(--wcm-band);
  border-bottom: 3px solid var(--wcm-ink);
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--wcm-muted);
}
.wcm-row {
  display: grid; grid-template-columns: 92px 1fr 150px 132px; gap: 20px; align-items: center;
  padding: 20px clamp(16px,2vw,28px); border-bottom: 2px solid var(--wcm-hair);
}
.wcm-row:last-child { border-bottom: 0; }
.wcm-row__n { font-family: var(--wcm-display); font-weight: 700; font-size: 22px; color: var(--wcm-red); }
.wcm-row__t { display: flex; flex-direction: column; gap: 5px; }
.wcm-row__t a { font-size: 18px; font-weight: 700; color: var(--wcm-ink); line-height: 1.25; }
.wcm-row__t a:hover { color: var(--wcm-red); }
.wcm-row__sub { font-size: 14px; color: var(--wcm-muted); }
.wcm-row__d { font-size: 14.5px; color: var(--wcm-muted); }
.wcm-row__go { display: flex; justify-content: flex-end; }

.wcm-empty { padding: 48px 24px; text-align: center; color: var(--wcm-muted); font-size: 17px; }

.wcm-pager { display: flex; justify-content: center; gap: 10px; padding: 30px 0 0; flex-wrap: wrap; }
.wcm-pager .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 46px; min-height: 46px; padding: 0 14px;
  border: 2px solid var(--wcm-ink); border-radius: 999px;
  background: var(--wcm-card); color: var(--wcm-ink); font-weight: 700;
}
.wcm-pager .page-numbers.current { background: var(--wcm-ink); color: var(--wcm-bg); }

/* ---------------------------------------------------------------
   SINGLE — EPISODE
   --------------------------------------------------------------- */
.wcm-single {
  display: grid; grid-template-columns: 2fr 1fr;
  column-gap: clamp(28px,3.4vw,48px);
  row-gap: clamp(18px,2.2vw,26px);
  align-items: start;
  padding: clamp(26px,3vw,44px) 0 clamp(40px,5vw,72px);
}
/* Own row, both columns, so main and sidebar share a top edge below it. */
.wcm-back { grid-column: 1 / -1; justify-self: start; }
.wcm-single__meta { grid-column: 1 / -1; margin: 0; }
.wcm-single__main { display: flex; flex-direction: column; gap: clamp(18px,2.2vw,26px); min-width: 0; }
.wcm-single__head { display: flex; flex-direction: column; gap: 14px; }
.wcm-single__head h1 { font-size: clamp(30px,4.2vw,50px); }
.wcm-back { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 700; }


.wcm-notes {
  border: 3px dashed var(--wcm-gold-ink); border-radius: 16px;
  padding: clamp(20px,2.4vw,28px); background: #FCF6E8;
  display: flex; flex-direction: column; gap: 14px;
}
.wcm-notes__label { display: flex; align-items: center; gap: 9px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--wcm-gold-ink); }
.wcm-notes p { margin: 0; font-size: 17px; line-height: 1.68; color: #3A2C1E; }
.wcm-notes ul, .wcm-notes ol { margin: 0; padding-left: 1.2em; }
.wcm-notes li { font-size: 16.5px; line-height: 1.6; margin-bottom: 6px; }
.wcm-notes a { text-decoration: underline; }

.wcm-prevnext { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
.wcm-prevnext__item { display: flex; flex-direction: column; gap: 7px; background: var(--wcm-card); border: 3px solid var(--wcm-ink); border-radius: 14px; padding: 18px 20px; }
.wcm-prevnext__item span { font-size: 11.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--wcm-muted); }
.wcm-prevnext__item b { font-size: 17px; line-height: 1.25; color: var(--wcm-ink); font-weight: 700; }
.wcm-prevnext__item:hover b { color: var(--wcm-red); }
.wcm-prevnext__item--empty { background: var(--wcm-band); border-style: dashed; border-color: var(--wcm-line); }
.wcm-prevnext__item--empty b, .wcm-prevnext__item--empty span { color: var(--wcm-faint); }
.wcm-prevnext__item--next { align-items: flex-end; text-align: right; }

.wcm-aside { display: flex; flex-direction: column; gap: 18px; }
.wcm-aside__box { background: var(--wcm-card); border: 4px solid var(--wcm-ink); border-radius: 20px; padding: 22px; display: flex; flex-direction: column; gap: 12px; }
.wcm-aside__box h2 { font-size: 20px; }
.wcm-aside__label { font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--wcm-muted); }
.wcm-aside__box p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--wcm-muted); }
.wcm-aside__art { display: block; width: 100%; }

/* "Got something to say?" — green panel, cream type, gold pill. */
.wcm-aside__box--say { background: var(--wcm-green); }
.wcm-aside__box--say h2 {
  font-size: 28px; line-height: 1.02; letter-spacing: .6px;
  color: var(--wcm-bg);
}
.wcm-aside__box--say p { color: var(--wcm-bg); font-size: 15px; line-height: 1.6; }
.wcm-aside__box--say .wcm-btn {
  background: var(--wcm-gold); color: var(--wcm-ink);
  border: 3px solid var(--wcm-ink); border-radius: 999px;
  padding: 11px; font-size: 20px; letter-spacing: 1.3px; line-height: 1.2;
}
.wcm-aside__box--say .wcm-btn:hover { color: var(--wcm-ink); }

/* ---------------------------------------------------------------
   SINGLE — COLUMN / PAGES
   --------------------------------------------------------------- */
.wcm-article { max-width: var(--wcm-read); margin: 0 auto; padding: clamp(30px,4vw,56px) 0 clamp(30px,4vw,48px); display: flex; flex-direction: column; gap: 22px; align-items: flex-start; }
.wcm-article h1 { font-size: clamp(32px,5.2vw,56px); }
.wcm-byline { display: flex; align-items: center; gap: 14px; }
.wcm-byline__av { width: 46px; height: 46px; border-radius: 50%; background: var(--wcm-red); border: 3px solid var(--wcm-ink); color: #FFF6E4; display: flex; align-items: center; justify-content: center; font-family: var(--wcm-display); font-weight: 700; font-size: 19px; flex: none; }
.wcm-byline__who { display: flex; flex-direction: column; gap: 2px; }
.wcm-byline__who b { font-size: 15.5px; }
.wcm-byline__who span { font-size: 14px; color: var(--wcm-muted); }
.wcm-rule { width: 100%; height: 3px; background: var(--wcm-gold); }

/* A column's picture and its caption. The figure sizes to the picture rather
   than to the column, because .wcm-article lays its children out from the left
   and a small original would only go soft if it were stretched to fill. */
.wcm-figure { margin: 0; max-width: 100%; }
.wcm-figure img { display: block; width: 100%; height: auto; border-radius: 14px; border: 3px solid var(--wcm-ink); }
.wcm-figure figcaption { font-family: var(--wcm-body); font-style: italic; font-size: 14px; line-height: 1.5; color: var(--wcm-muted); margin-top: 10px; }

/* Karla, the same face as the episode show notes and the rest of the site.
   This was Source Serif 4 — the original design set columns in a serif — but
   it read as a different website. Kept at a larger size than the notes because
   a column is long-form; the typeface is what had to match. */
.wcm-prose { width: 100%; font-family: var(--wcm-body); font-size: 19px; line-height: 1.75; color: #3A2C1E; }
.wcm-prose > *:first-child { margin-top: 0; }
.wcm-prose p { margin: 0 0 1.15em; }
.wcm-prose h2, .wcm-prose h3 { font-family: var(--wcm-display); color: var(--wcm-ink); margin: 1.6em 0 .5em; font-size: 28px; }
.wcm-prose h3 { font-size: 23px; }
.wcm-prose a { text-decoration: underline; }
.wcm-prose ul, .wcm-prose ol { margin: 0 0 1.15em; padding-left: 1.3em; }
.wcm-prose li { margin-bottom: .4em; }
.wcm-prose img { border-radius: 12px; border: 3px solid var(--wcm-ink); }
.wcm-prose blockquote {
  margin: 1.3em 0; padding: 4px 0 4px 26px; border-left: 5px solid var(--wcm-red);
  font-family: var(--wcm-display); font-weight: 700; text-transform: uppercase;
  font-size: 26px; line-height: 1.25; letter-spacing: .6px; color: var(--wcm-ink);
}
.wcm-prose blockquote p { margin: 0; }
.wcm-prose figcaption { font-family: var(--wcm-body); font-style: italic; font-size: 14px; color: var(--wcm-muted); margin-top: 8px; }
.wcm-prose code, .wcm-prose pre { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9em; }
.wcm-prose pre { background: var(--wcm-band); border: 2px solid var(--wcm-line); border-radius: 10px; padding: 16px; overflow-x: auto; }
.wcm-prose table { width: 100%; border-collapse: collapse; font-family: var(--wcm-body); font-size: 16px; }
.wcm-prose th, .wcm-prose td { border: 2px solid var(--wcm-line); padding: 10px 12px; text-align: left; }

.wcm-mention { display: flex; align-items: center; gap: 14px; width: 100%; background: var(--wcm-card); border: 3px solid var(--wcm-ink); border-radius: 14px; padding: 16px 20px; flex-wrap: wrap; }
.wcm-mention__t { flex-grow: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.wcm-mention__t span { font-size: 11.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--wcm-muted); }
.wcm-mention__t b { font-size: 17px; }

/* ---------------------------------------------------------------
   FOOTER
   --------------------------------------------------------------- */
.wcm-footer { background: var(--wcm-ink); color: #E8DCC6; border-top: 6px solid var(--wcm-red); padding: clamp(34px,4vw,52px) 0 28px; margin-top: clamp(40px,5vw,72px); }
.wcm-footer a { color: #E8DCC6; }
.wcm-footer a:hover { color: var(--wcm-gold); }
.wcm-footer__top { display: flex; align-items: flex-start; justify-content: space-between; gap: clamp(24px,4vw,48px); padding-bottom: 28px; border-bottom: 2px solid #4A3A2A; flex-wrap: wrap; }
.wcm-footer__about { display: flex; flex-direction: column; gap: 12px; max-width: 420px; }
.wcm-footer__about p { margin: 0; font-size: 15px; line-height: 1.6; color: #B7A489; }
.wcm-footer__cols { display: flex; gap: clamp(28px,5vw,64px); flex-wrap: wrap; }
.wcm-footer__col { display: flex; flex-direction: column; gap: 10px; font-size: 15px; }
.wcm-footer__col strong { font-size: 11.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #8C7A61; }
/* The Read column mixes two hand-written links with a WordPress menu. This is
   what makes the menu's list look like the links either side of it. */
.wcm-footer__menu { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.wcm-footer__bottom { padding-top: 20px; font-size: 13.5px; color: #8C7A61; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.wcm-social { display: flex; gap: 10px; flex-wrap: wrap; }
.wcm-social a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; border: 2px solid #4A3A2A; }
.wcm-social a:hover { border-color: var(--wcm-gold); }

/* ---------------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------------- */
@media (max-width: 1080px) {
  .wcm-single { grid-template-columns: 1fr; }
  .wcm-band__grid { grid-template-columns: 1fr; }
  .wcm-grid--3 { grid-template-columns: repeat(2, minmax(0,1fr)); }

  /* Artwork above the player.

     Stacked, the sidebar lands at the bottom of the page, which buries the
     episode's own picture below the show notes. It belongs with the episode,
     directly under the title.

     Both wrappers become display:contents so their children are grid items of
     .wcm-single in their own right, which is what makes one item out of the
     sidebar orderable between two items out of the article. The gaps the
     wrappers used to supply are the same size as this grid's row-gap, so
     nothing moves apart from the artwork. */
  .wcm-single__main,
  .wcm-aside { display: contents; }

  .wcm-back          { order: 1; }
  .wcm-single__meta  { order: 2; }
  .wcm-single__head  { order: 3; }
  .wcm-aside__art    { order: 4; }
  .wcm-player        { order: 5; }
  .wcm-notes         { order: 6; }
  .wcm-prevnext      { order: 7; }
  .wcm-aside__box    { order: 8; }
}

@media (max-width: 860px) {
  .wcm-hero { grid-template-columns: 1fr; }
  /* Text first on a phone; the source order already has it that way. */
  .wcm-hero__art { max-width: 460px; }
  .wcm-feature__body { grid-template-columns: 1fr; }
  .wcm-list__head { display: none; }
  .wcm-row { grid-template-columns: 64px 1fr; grid-template-areas: "n t" ". d" ". go"; row-gap: 10px; }
  .wcm-row__n  { grid-area: n; }
  .wcm-row__t  { grid-area: t; }
  .wcm-row__d  { grid-area: d; }
  .wcm-row__go { grid-area: go; justify-content: flex-start; }
}

@media (max-width: 620px) {
  body { font-size: 16px; }
  .wcm-grid--3, .wcm-grid--2 { grid-template-columns: 1fr; }
  .wcm-prevnext { grid-template-columns: 1fr; }
  .wcm-prevnext__item--next { align-items: flex-start; text-align: left; }
  .wcm-header__inner { gap: 10px; }
  .wcm-nav { width: 100%; }
  .wcm-nav ul { gap: 16px; }
}

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

/* WordPress core alignment classes */
.alignleft  { float: left; margin: .3em 1.4em 1em 0; }
.alignright { float: right; margin: .3em 0 1em 1.4em; }
.aligncenter { display: block; margin: 1em auto; }
.alignwide, .alignfull { max-width: 100%; }
.wp-caption { max-width: 100%; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------------------------------------------------------------
   EPISODE ARTWORK
   The feed art is square (1:1). The frame is 16:9 and the picture
   fills it, so the top and bottom of the square get cropped.
   --------------------------------------------------------------- */
.wcm-ep__art,
.wcm-feature__art {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center;
  border-radius: 14px;
  border: 3px solid var(--wcm-green);
}

/* ---------------------------------------------------------------
   THE COLUMN, BEFORE THERE IS A COLUMN
   Same shape as the home hero, without the artwork column.
   --------------------------------------------------------------- */
.wcm-soon {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: clamp(16px,2vw,24px);
  max-width: 30em;
  padding: clamp(34px,5vw,72px) 0 clamp(40px,5vw,72px);
}
.wcm-soon h1 { font-size: clamp(38px,6.4vw,68px); letter-spacing: 1px; }
.wcm-soon__lede {
  font-size: clamp(16px,1.4vw,18.5px); line-height: 1.6;
  color: var(--wcm-muted); margin: 0;
}
.wcm-soon__links { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------------------------------------------------------------
   ABOUT PAGE
   --------------------------------------------------------------- */
.wcm-about__body { padding-bottom: clamp(40px,5vw,72px); }
.wcm-about__body > p {
  font-size: 18px; line-height: 1.65; color: var(--wcm-muted);
  max-width: 34em; margin: 0 0 18px;
}
.wcm-about__body h2 {
  font-size: clamp(28px,3vw,40px);
  padding-bottom: 18px; margin: 0 0 26px;
  border-bottom: 4px solid var(--wcm-gold);
}

/* The About text column is shorter than the home page's — no row of platform
   buttons — so a full-size dragon panel would leave a hole beneath it. */
.wcm-hero--about { padding-bottom: clamp(10px,1.4vw,18px); }
.wcm-hero--about .wcm-hero__art img { max-width: 460px; }
.wcm-about__body .wcm-card .wcm-chip {
  background: var(--wcm-gold); border-width: 3px;
  font-family: var(--wcm-display); font-size: 22px; font-weight: 700;
  letter-spacing: 1.6px; text-transform: uppercase; line-height: 1.25;
  padding: 4px 18px; min-height: 0;
}
.wcm-about__body .wcm-card p { margin: 0; }
.wcm-about__body .wcm-card { border-width: 4px; }
.wcm-about__cta { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; }
@media (max-width: 860px) {
  .wcm-about__cta { justify-content: flex-start; }
}

/* The About lede is a wrapper around real <p> elements, so the hero lede
   type has to reach through it. */
.wcm-hero__lede > p { font-size: inherit; line-height: inherit; color: inherit; margin: 0 0 18px; }
.wcm-hero__lede > p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------
   EPISODE PLAYER
   Our own controls over a plain <audio>, so it can look like the
   rest of the site instead of like the browser's default bar.
   --------------------------------------------------------------- */
.wcm-player {
  width: 100%;
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  background: var(--wcm-card);
  border: 4px solid var(--wcm-ink);
  border-radius: 18px;
  padding: 18px 22px;
}
/* Until the script takes over, show the native player so audio still works. */
.wcm-player audio { width: 100%; }
.wcm-player.is-ready audio { display: none; }
.wcm-player:not(.is-ready) .wcm-player__btn,
.wcm-player:not(.is-ready) .wcm-player__body,
.wcm-player:not(.is-ready) .wcm-player__tools { display: none; }

.wcm-player__btn {
  width: 58px; height: 58px; flex: none;
  border-radius: 50%;
  background: var(--wcm-red); color: #F5EFE2;
  border: 4px solid var(--wcm-ink);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0;
  transition: transform .08s ease;
}
.wcm-player__btn:hover { transform: translateY(-1px); }
.wcm-player__btn svg { display: block; }

.wcm-player__body { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; }

.wcm-player__rail,
.wcm-player__volrail {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 12px; margin: 0;
  background: transparent; cursor: pointer;
}
.wcm-player__rail::-webkit-slider-runnable-track,
.wcm-player__volrail::-webkit-slider-runnable-track {
  height: 12px; border-radius: 6px;
  border: 2px solid var(--wcm-ink);
  background:
    linear-gradient(var(--wcm-green), var(--wcm-green)) 0 / var(--wcm-progress,0%) 100% no-repeat,
    var(--wcm-line);
}
.wcm-player__rail::-moz-range-track,
.wcm-player__volrail::-moz-range-track {
  height: 12px; border-radius: 6px;
  border: 2px solid var(--wcm-ink);
  background:
    linear-gradient(var(--wcm-green), var(--wcm-green)) 0 / var(--wcm-progress,0%) 100% no-repeat,
    var(--wcm-line);
}
.wcm-player__rail::-webkit-slider-thumb,
.wcm-player__volrail::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px; margin-top: -5px;
  border-radius: 50%;
  background: var(--wcm-red); border: 3px solid var(--wcm-ink);
}
.wcm-player__rail::-moz-range-thumb,
.wcm-player__volrail::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--wcm-red); border: 3px solid var(--wcm-ink);
}
.wcm-player__rail:focus-visible,
.wcm-player__volrail:focus-visible { outline: 3px solid var(--wcm-green); outline-offset: 4px; }

.wcm-player__times {
  display: flex; justify-content: space-between;
  font-size: 12.5px; font-weight: 700; color: var(--wcm-muted);
}
@media (max-width: 520px) {
  .wcm-player { gap: 14px; padding: 16px; }
  .wcm-player__btn { width: 50px; height: 50px; }
}

.wcm-feature__actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* speed + volume cluster */
.wcm-player__tools { display: flex; align-items: center; gap: 12px; flex: none; }

.wcm-player__speed {
  min-width: 52px; padding: 8px 12px;
  border-radius: 999px; border: 3px solid var(--wcm-ink);
  background: var(--wcm-card); color: var(--wcm-ink);
  font-family: var(--wcm-display); font-weight: 700; font-size: 17px;
  letter-spacing: 1px; line-height: 1; text-transform: uppercase;
  cursor: pointer; transition: transform .08s ease;
}
.wcm-player__speed:hover { transform: translateY(-1px); background: var(--wcm-gold); }

.wcm-player__vol { display: flex; align-items: center; gap: 8px; }
.wcm-player__mute {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; flex: none; padding: 0;
  border: 0; background: none; cursor: pointer; color: var(--wcm-ink);
}
.wcm-player__mute:hover { color: var(--wcm-red); }
.wcm-player__volrail { width: 84px; }

@media (max-width: 700px) {
  .wcm-player__tools { width: 100%; justify-content: space-between; }
  .wcm-player__volrail { width: 100px; }
}

@media (max-width: 430px) {
  /* Too narrow for two columns without the longest label wrapping. */
  .wcm-hero__links { grid-template-columns: 1fr; }
  .wcm-hero__links .wcm-btn { font-size: 18px; letter-spacing: 1px; padding: 11px 16px; }
}