/*
Theme Name: Positive Mind Archive
Description: Child theme of My Custom Theme. Redesigned UX for the archive of The Positive Mind Radio Show with Armand DiMele. Honors Godric's original architecture while rebuilding the homepage, adding mobile responsiveness, and polishing the browse/search/single-post experience.
Template: my-custom-theme
Version: 0.11.0
Author: Giullian Yao Gioiello
Text Domain: positive-mind-archive
*/

/* =================================================================
   Design tokens
   -----------------------------------------------------------------
   Single source of truth for color, type, spacing, and rhythm used
   across the redesigned archive. Component styles live below.
   ================================================================= */

:root {

  /* ---------------------------------------------------------------
     COLOR
     --------------------------------------------------------------- */

  --pm-red-50:   #fde9e6;
  --pm-red-100:  #fbc9c2;
  --pm-red-300:  #fe8c7f;
  --pm-red-500:  #fe5444;
  --pm-red-700:  #c13828;
  --pm-red-900:  #7a1f14;

  --pm-blue-50:  #e6ecfa;
  --pm-blue-100: #c3d0f2;
  --pm-blue-300: #6e8ee3;
  --pm-blue-500: #2d65d9;
  --pm-blue-700: #1f4aa3;
  --pm-blue-900: #10265a;

  --pm-yellow-50:  #fff6de;
  --pm-yellow-100: #fde8ad;
  --pm-yellow-300: #f9d784;
  --pm-yellow-500: #f6cb68;
  --pm-yellow-700: #c59d3e;
  --pm-yellow-900: #7a601e;

  --pm-orange-300: #ec8a5c;
  --pm-orange-500: #dd612c;
  --pm-orange-700: #a9461b;

  /* Slate (BAD) — a heavy, low-saturation blue that reads as
     weighed-down without competing with the SAD blue. */
  --pm-slate-100: #d5d9e0;
  --pm-slate-500: #4a5567;
  --pm-slate-700: #2f394a;

  /* Plum (SCARED) — muted purple that reads anxious / restless. */
  --pm-plum-100: #e7d6e3;
  --pm-plum-500: #7d4a78;
  --pm-plum-700: #553150;

  --pm-paper:       #fbf7ef;
  --pm-paper-tint:  #f4ede0;
  --pm-paper-shade: #e9dfcb;
  --pm-ink:         #1f1b16;
  --pm-ink-soft:    #4a433b;
  --pm-muted:       #8a8277;
  --pm-rule:        #d9d1c1;

  --pm-color-bg:         var(--pm-paper);
  --pm-color-surface:    #ffffff;
  --pm-color-text:       var(--pm-ink);
  --pm-color-text-muted: var(--pm-muted);
  --pm-color-accent:     var(--pm-orange-500);
  --pm-color-link:       var(--pm-blue-700);
  --pm-color-link-hover: var(--pm-red-700);


  /* ---------------------------------------------------------------
     TYPOGRAPHY
     --------------------------------------------------------------- */

  --pm-font-display: 'Source Serif 4', Georgia, serif;
  --pm-font-body:    'Source Serif 4', Georgia, serif;
  --pm-font-ui:      'Open Sans', system-ui, -apple-system, sans-serif;

  --pm-text-xs:   0.75rem;
  --pm-text-sm:   0.875rem;
  --pm-text-base: 1rem;
  --pm-text-md:   1.125rem;
  --pm-text-lg:   1.25rem;
  --pm-text-xl:   1.5rem;
  --pm-text-2xl:  1.875rem;
  --pm-text-3xl:  2.25rem;
  --pm-text-4xl:  3rem;
  --pm-text-5xl:  4rem;

  --pm-leading-tight:   1.15;
  --pm-leading-snug:    1.3;
  --pm-leading-normal:  1.5;
  --pm-leading-relaxed: 1.75;

  --pm-tracking-tight:  -0.01em;
  --pm-tracking-normal: 0;
  --pm-tracking-wide:   0.05em;
  --pm-tracking-caps:   0.12em;


  /* ---------------------------------------------------------------
     SPACING
     --------------------------------------------------------------- */

  --pm-space-0:   0;
  --pm-space-1:   0.25rem;
  --pm-space-2:   0.5rem;
  --pm-space-3:   0.75rem;
  --pm-space-4:   1rem;
  --pm-space-5:   1.5rem;
  --pm-space-6:   2rem;
  --pm-space-7:   2.5rem;
  --pm-space-8:   3rem;
  --pm-space-10:  4rem;
  --pm-space-12:  6rem;
  --pm-space-16:  8rem;


  /* ---------------------------------------------------------------
     RADIUS / BORDERS / SHADOWS
     --------------------------------------------------------------- */

  --pm-radius-sm:   4px;
  --pm-radius-md:   8px;
  --pm-radius-lg:   16px;
  --pm-radius-pill: 999px;

  --pm-border-hairline: 1px solid var(--pm-paper-shade);

  --pm-shadow-sm: 0 1px 2px  rgba(31, 27, 22, 0.06);
  --pm-shadow-md: 0 4px 12px rgba(31, 27, 22, 0.08);
  --pm-shadow-lg: 0 12px 32px rgba(31, 27, 22, 0.12);


  /* ---------------------------------------------------------------
     LAYOUT
     --------------------------------------------------------------- */

  --pm-container-narrow: 720px;
  --pm-container:        1100px;
  --pm-container-wide:   1400px;


  /* ---------------------------------------------------------------
     MOTION
     --------------------------------------------------------------- */

  --pm-ease:            cubic-bezier(0.2, 0.6, 0.2, 1);
  --pm-duration-fast:   150ms;
  --pm-duration-normal: 250ms;
  --pm-duration-slow:   400ms;
}


/* =================================================================
   Responsive breakpoints (mobile-first, for reference)
   -----------------------------------------------------------------
     sm:  480px   — large phone
     md:  768px   — tablet portrait
     lg:  1024px  — tablet landscape / small laptop
     xl:  1440px  — desktop
   ================================================================= */


/* =================================================================
   === GLOBAL BASE ===
   -----------------------------------------------------------------
   Site-wide typography and color baseline. Applies fonts + ink/paper
   from design tokens on top of the parent theme's existing body
   rules. Parent's textured paper background is preserved — we only
   shift font-family, color, and line-height.
   ================================================================= */

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

body {
  font-family: var(--pm-font-body);
  font-size: var(--pm-text-base);
  line-height: var(--pm-leading-relaxed);
  color: var(--pm-ink);
  font-weight: 400;
}

/* Paragraphs and list items should always render at normal weight —
   belts-and-suspenders guard so content text never picks up the h1-h6
   800 weight through any surprise cascade. <strong>/<b> still render
   bold (browser default), which is the intended semantic behavior. */
p,
li,
blockquote {
  font-weight: 400;
}

/* Kill horizontal overflow from any child that forgets min-width: 0 */
body,
html {
  overflow-x: hidden;
  max-width: 100%;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--pm-font-display);
  color: var(--pm-ink);
  line-height: var(--pm-leading-snug);
  font-weight: 800;
  letter-spacing: 0;
}

a {
  color: var(--pm-color-link);
  transition: color var(--pm-duration-fast) var(--pm-ease);
}
a:hover {
  color: var(--pm-color-link-hover);
}

/* UI chrome — form controls, buttons use Open Sans */
button,
input,
select,
textarea {
  font-family: var(--pm-font-ui);
}


/* =================================================================
   === HEADER ===
   -----------------------------------------------------------------
   Mobile-first. Scoped under .pm-header* so parent .site-nav-header
   / .nav-* rules never match and no specificity fight is needed.

   Layout:
     base  (<768): [ brand ] [ search (flex) ] [ menu-toggle ]
                   drawer absolute-positioned below, holds the nav
                   links stacked vertically.
     md+  (>=768): [ brand (+wordmark) ] ... [ nav links ] [ search ]
                   toggle hidden, drawer flattens to inline row.
   ================================================================= */

body {
  padding-top: 64px;
}

.pm-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: var(--pm-paper);
  border-bottom: var(--pm-border-hairline);
  box-shadow: var(--pm-shadow-sm);
  font-family: var(--pm-font-ui);
  color: var(--pm-ink);
}

.pm-header__inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--pm-space-2);
  max-width: var(--pm-container-wide);
  margin: 0 auto;
  padding: var(--pm-space-2) var(--pm-space-3);
  min-width: 0;
}


/* ── Brand ───────────────────────────────────────────────────── */
.pm-header__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--pm-space-2);
  flex: 0 0 auto;
  text-decoration: none;
  color: var(--pm-ink);
  min-width: 0;
  transition: opacity var(--pm-duration-fast) var(--pm-ease);
}
.pm-header__brand:hover,
.pm-header__brand:focus-visible {
  opacity: 0.85;
  text-decoration: none;
}

.pm-header__logo,
.pm-header .custom-logo {
  display: block;
  height: 40px;
  width: auto;
  max-width: none;
  flex-shrink: 0;
}

/* Wordmark hidden under 768; visible at tablet+ with fluid size */
.pm-header__wordmark {
  display: none;
  font-family: var(--pm-font-display);
  font-size: clamp(var(--pm-text-base), 1.2vw + 0.75rem, var(--pm-text-xl));
  font-weight: 700;
  letter-spacing: var(--pm-tracking-tight);
  line-height: var(--pm-leading-snug);
  color: var(--pm-ink);
  white-space: nowrap;
}


/* ── Persistent search ───────────────────────────────────────── */
.pm-header__search {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
}
.pm-header__search .search-form {
  display: flex;
  align-items: center;
  gap: var(--pm-space-2);
  background: none;
  margin: 0;
  width: 100%;
}
/* searchform.php wraps the input in <label> — make the label a flex
   passthrough so `flex: 1 1 auto` on the input actually grows. */
.pm-header__search .search-form > label {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
}
.pm-header__search .search-field,
.pm-header__search input[type="search"] {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  height: 40px;
  padding: 0 var(--pm-space-3);
  font-family: var(--pm-font-ui);
  font-size: var(--pm-text-sm);
  color: var(--pm-ink);
  background: var(--pm-paper-tint);
  border: 1px solid var(--pm-paper-shade);
  border-radius: var(--pm-radius-md);
  opacity: 1;
  outline: none;
  box-shadow: none;
  transition: border-color var(--pm-duration-fast) var(--pm-ease),
              background   var(--pm-duration-fast) var(--pm-ease);
}
.pm-header__search .search-field::placeholder,
.pm-header__search input[type="search"]::placeholder {
  color: var(--pm-muted);
  opacity: 1;
}
.pm-header__search .search-field:focus-visible,
.pm-header__search input[type="search"]:focus-visible {
  border-color: var(--pm-orange-500);
  background: var(--pm-color-surface);
}

/* Submit button — icon-only under 768, text at tablet+ */
.pm-header__search .search-submit,
.pm-header__search button[type="submit"] {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  padding: 0;
  font-size: 0;                  /* hide the "Search" text on mobile */
  color: transparent;
  background-color: var(--pm-orange-500);
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='20' y1='20' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px 18px;
  border: 1px solid var(--pm-orange-500);
  border-radius: var(--pm-radius-md);
  cursor: pointer;
  transition: background-color var(--pm-duration-fast) var(--pm-ease);
}
.pm-header__search .search-submit:hover,
.pm-header__search .search-submit:focus-visible,
.pm-header__search button[type="submit"]:hover,
.pm-header__search button[type="submit"]:focus-visible {
  background-color: var(--pm-orange-700);
  border-color: var(--pm-orange-700);
}


/* ── Menu toggle (mobile only) ───────────────────────────────── */
.pm-header__menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 44px;
  height: 40px;
  padding: 0;
  background: transparent;
  color: var(--pm-ink);
  border: 1px solid var(--pm-paper-shade);
  border-radius: var(--pm-radius-md);
  cursor: pointer;
  transition: background   var(--pm-duration-fast) var(--pm-ease),
              border-color var(--pm-duration-fast) var(--pm-ease);
}
.pm-header__menu-toggle:hover,
.pm-header__menu-toggle:focus-visible {
  background: var(--pm-paper-tint);
  border-color: var(--pm-orange-500);
}

.pm-header__menu-bars,
.pm-header__menu-bars::before,
.pm-header__menu-bars::after {
  content: '';
  display: block;
  width: 20px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform  var(--pm-duration-fast) var(--pm-ease),
              opacity    var(--pm-duration-fast) var(--pm-ease),
              background var(--pm-duration-fast) var(--pm-ease);
}
.pm-header__menu-bars { position: relative; }
.pm-header__menu-bars::before { position: absolute; top: -7px; left: 0; }
.pm-header__menu-bars::after  { position: absolute; top:  7px; left: 0; }

.pm-header__menu-toggle[aria-expanded="true"] .pm-header__menu-bars {
  background: transparent;
}
.pm-header__menu-toggle[aria-expanded="true"] .pm-header__menu-bars::before {
  transform: translateY(7px) rotate(45deg);
}
.pm-header__menu-toggle[aria-expanded="true"] .pm-header__menu-bars::after {
  transform: translateY(-7px) rotate(-45deg);
}


/* ── Drawer / nav ────────────────────────────────────────────── */
.pm-header__nav {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: 0;
  overflow: hidden;
  background: var(--pm-paper);
  border-bottom: var(--pm-border-hairline);
  box-shadow: var(--pm-shadow-md);
  transition: max-height var(--pm-duration-normal) var(--pm-ease);
}
.pm-header.is-open .pm-header__nav {
  max-height: 400px;
}

.pm-header__links {
  list-style: none;
  margin: 0;
  padding: var(--pm-space-3) var(--pm-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--pm-space-2);
}

.pm-header__link {
  display: block;
  padding: var(--pm-space-3) var(--pm-space-3);
  font-family: var(--pm-font-ui);
  font-size: var(--pm-text-base);
  font-weight: 600;
  color: var(--pm-ink);
  text-decoration: none;
  border-radius: var(--pm-radius-md);
  white-space: nowrap;
  transition: background var(--pm-duration-fast) var(--pm-ease),
              color      var(--pm-duration-fast) var(--pm-ease);
}
.pm-header__link:hover,
.pm-header__link:focus-visible {
  background: var(--pm-paper-tint);
  color: var(--pm-orange-700);
  text-decoration: none;
}

/* About — the one "pill" in the nav */
.pm-header__link--about {
  background: var(--pm-orange-500);
  color: #fff;
  font-size: var(--pm-text-sm);
  letter-spacing: var(--pm-tracking-wide);
  text-transform: uppercase;
  text-align: center;
}
.pm-header__link--about:hover,
.pm-header__link--about:focus-visible {
  background: var(--pm-orange-700);
  color: #fff;
}


/* ── Focus rings ─────────────────────────────────────────────── */
.pm-header__brand:focus-visible,
.pm-header__menu-toggle:focus-visible,
.pm-header__link:focus-visible,
.pm-header__search .search-field:focus-visible,
.pm-header__search .search-submit:focus-visible {
  outline: 2px solid var(--pm-blue-500);
  outline-offset: 2px;
}


/* ── >= 1024px — drawer retires, inline nav + wordmark + fixed search ─
   Note: we deliberately skipped a 768px breakpoint for the header.
   The persistent search at sub-1024 widths grows with the viewport
   (thanks to flex: 1 1 auto on both .pm-header__search and the
   search-form > label), so the drawer stays until there's actually
   room for logo + wordmark + 3 nav links + search inline. An iPad
   portrait (~768) doesn't comfortably fit that; 1024 does. */
@media (min-width: 1024px) {
  body { padding-top: 80px; }

  .pm-header__inner {
    padding: var(--pm-space-3) var(--pm-space-6);
    gap: var(--pm-space-4);
  }

  .pm-header__menu-toggle { display: none; }

  .pm-header__wordmark { display: inline; }

  .pm-header__brand { gap: var(--pm-space-3); flex-shrink: 0; }
  .pm-header__logo,
  .pm-header .custom-logo { height: 48px; }

  /* Nav flattens into a row, pushed right via margin-left: auto */
  .pm-header__nav {
    position: static;
    max-height: none;
    overflow: visible;
    background: none;
    border-bottom: none;
    box-shadow: none;
    transition: none;
    margin-left: auto;
    min-width: 0;
  }
  .pm-header__links {
    flex-direction: row;
    align-items: center;
    gap: var(--pm-space-3);
    padding: 0;
  }
  .pm-header__link {
    padding: var(--pm-space-2) var(--pm-space-3);
    font-size: var(--pm-text-base);
    white-space: nowrap;
  }
  .pm-header__link--about {
    padding: var(--pm-space-2) var(--pm-space-4);
    border-radius: var(--pm-radius-pill);
    white-space: nowrap;
  }

  /* Search: fixed 260px at desktop, text submit restored */
  .pm-header__search {
    flex: 0 0 260px;
    order: 2;
    margin-left: var(--pm-space-2);
  }
  .pm-header__search .search-field,
  .pm-header__search input[type="search"] {
    width: auto;
    flex: 1 1 auto;
    min-width: 0;
  }
  .pm-header__search .search-submit,
  .pm-header__search button[type="submit"] {
    width: auto;
    padding: 0 var(--pm-space-4);
    font-size: var(--pm-text-sm);
    font-weight: 600;
    color: #fff;
    letter-spacing: var(--pm-tracking-wide);
    text-transform: uppercase;
    background-image: none;
  }
}


/* ── >= 1280px — give search a little more air ───────────────── */
@media (min-width: 1280px) {
  .pm-header__search { flex: 0 0 320px; }
}


/* ── Reduced motion ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .pm-header *,
  .pm-header *::before,
  .pm-header *::after {
    transition: none !important;
  }
}

/* Keep admin-bar from covering our fixed header */
@media screen and (min-width: 783px) {
  body.admin-bar .pm-header { top: 32px; }
}
@media screen and (max-width: 782px) {
  body.admin-bar .pm-header { top: 46px; }
}


/* =================================================================
   === HOMEPAGE (parent-template responsive overrides) ===
   -----------------------------------------------------------------
   Makes the parent's front-page.php layout work on mobile without
   touching parent markup. The single biggest bug was the tag-grid
   declaring `grid-template-columns: repeat(10, minmax(100px, 1fr))`,
   which forced a 1000px minimum width and scrolled the whole page
   sideways on mobile. Everything below neutralizes that and scales
   the hero / search / category grid for small screens.
   ================================================================= */

/* .content-wrapper on parent already caps at 1200px with 1rem padding.
   Nothing to override there. */

.logo-container {
  margin: var(--pm-space-6) auto 0;
}
.logo-container .site-logo,
.site-logo {
  max-width: min(500px, 100%);
  height: auto;
  width: auto;
}

/* Hero title — fluid */
.intro-text h1 {
  font-family: var(--pm-font-display);
  font-size: clamp(var(--pm-text-2xl), 5vw + 0.5rem, var(--pm-text-4xl));
  line-height: var(--pm-leading-tight);
  color: var(--pm-ink);
  letter-spacing: var(--pm-tracking-tight);
}
.intro-text .italic-text {
  font-family: var(--pm-font-display);
  font-style: italic;
  color: var(--pm-ink-soft);
}
.intro-text .intro-quote {
  font-family: var(--pm-font-display);
  font-style: italic;
  color: var(--pm-ink-soft);
  font-size: clamp(var(--pm-text-base), 2vw + 0.5rem, var(--pm-text-lg));
  line-height: var(--pm-leading-relaxed);
}
.intro-text p {
  font-family: var(--pm-font-body);
  color: var(--pm-ink-soft);
}

/* Homepage hero search — fluid width, full width on mobile */
.home-nav-search {
  margin: var(--pm-space-6) auto;
  padding: 0 var(--pm-space-4);
}
.home-nav-search .search-form {
  display: flex;
  width: 100%;
  max-width: 620px;
  margin: 0 auto;
  gap: var(--pm-space-2);
}
.home-nav-search .search-field {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  height: 3.25rem;
  font-family: var(--pm-font-ui);
  font-size: var(--pm-text-base);
  border-width: 2px;
}
.home-nav-search .search-submit {
  flex: 0 0 auto;
  height: 3.25rem;
  padding: 0 var(--pm-space-5);
  font-family: var(--pm-font-ui);
  font-size: var(--pm-text-sm);
  letter-spacing: var(--pm-tracking-wide);
}
@media (min-width: 768px) {
  .home-nav-search .search-field {
    height: 4rem;
    font-size: var(--pm-text-md);
  }
  .home-nav-search .search-submit {
    height: 4rem;
    padding: 0 var(--pm-space-6);
  }
}

/* Browse titles */
.browse-title {
  font-family: var(--pm-font-display);
  font-size: clamp(var(--pm-text-xl), 3vw + 0.5rem, var(--pm-text-2xl));
  color: var(--pm-ink);
}

/* Podcast-of-the-day + archive title pills — let them wrap naturally
   but tighten padding at narrow widths. */
.podcast-title a {
  font-family: var(--pm-font-display);
  font-size: clamp(var(--pm-text-md), 2.5vw + 0.5rem, var(--pm-text-xl));
  line-height: var(--pm-leading-snug);
  background-color: var(--pm-orange-500);
  padding: 0.25rem 0.75rem;
}
.podcast-title a:hover {
  background-color: var(--pm-orange-700);
}
.podcast-title {
  flex-wrap: wrap;
  gap: var(--pm-space-2) var(--pm-space-4);
}
.podcast-title .podcast-date-inline {
  font-family: var(--pm-font-ui);
  font-size: var(--pm-text-sm);
  color: var(--pm-muted);
}
@media (max-width: 640px) {
  .podcast-title .podcast-date-inline {
    margin-left: 0;
    flex-basis: 100%;
  }
}


/* The homepage no longer renders the parent's "Browse by Category"
   big-category-grid. Its `big-cat-{slug}` watercolor-swash CSS in
   the parent stylesheet (style.css:545-569) is intentionally left
   intact — keeping the rules ready for any future page that wants
   the cluster grid — but no markup on the redesigned homepage uses
   them, so no child-side overrides are needed here. */


/* ── Tag grid — mobile-first column counts, kill decorative offsets ── */
.tag-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: var(--pm-space-2);
  max-width: 100%;
  padding: 0 var(--pm-space-4);
}
/* Override parent's 10-column nth-child transforms + stair-step
   margin-tops — they're only sensible at the original 10-col layout.
   Using !important because parent's chained :nth-child selectors out-
   specific our simpler ones. */
.tag-grid .tag-item {
  transform: none !important;
  margin-top: 0 !important;
}
.tag-item {
  font-family: var(--pm-font-ui);
  aspect-ratio: auto;
  min-height: 64px;
  padding: var(--pm-space-2) var(--pm-space-3);
  font-size: var(--pm-text-sm);
}
.tag-item .tag-count {
  font-family: var(--pm-font-ui);
  font-size: var(--pm-text-xs);
}
@media (min-width: 480px) {
  .tag-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (min-width: 768px) {
  .tag-grid { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
}
@media (min-width: 1024px) {
  .tag-grid {
    grid-template-columns: repeat(10, minmax(0, 1fr)) !important;
    max-width: 1200px;
    padding: 0;
  }
  .tag-item { aspect-ratio: 1 / 1; }
}


/* ── Footer responsive padding ──────────────────────────────── */
.site-footer .footer-contact {
  padding: 0 var(--pm-space-4);
}
.site-footer .footer-contact h2 {
  font-family: var(--pm-font-display);
  font-size: clamp(var(--pm-text-lg), 2.5vw + 0.5rem, var(--pm-text-2xl));
}
.site-footer .footer-contact p,
.site-footer .footer-contact a {
  font-family: var(--pm-font-body);
  font-size: var(--pm-text-base);
}


/* =================================================================
   === ARCHIVE / SEARCH ===
   -----------------------------------------------------------------
   Applies to archive.php (which also renders search results per the
   parent's search_template filter). Just responsive + font polish.
   ================================================================= */

.archive-title {
  font-family: var(--pm-font-display);
  font-size: clamp(var(--pm-text-xl), 3.5vw + 0.5rem, var(--pm-text-3xl));
  color: var(--pm-ink);
  letter-spacing: var(--pm-tracking-tight);
}

.archive-sort {
  flex-wrap: wrap;
  gap: var(--pm-space-3);
  font-family: var(--pm-font-ui);
}
.archive-sort label { font-family: var(--pm-font-ui); }

.post-grid .post-card {
  padding-bottom: var(--pm-space-5);
  margin-bottom: var(--pm-space-5);
}

.podcast-meta,
.podcast-meta span,
.podcast-category,
.podcast-category .category-link {
  font-family: var(--pm-font-ui);
  font-size: var(--pm-text-sm);
}
.podcast-meta {
  flex-wrap: wrap;
  gap: var(--pm-space-3) var(--pm-space-5);
}

.podcast-summary {
  font-family: var(--pm-font-body);
  font-size: var(--pm-text-base);
  line-height: var(--pm-leading-relaxed);
  color: var(--pm-ink);
}


/* =================================================================
   === SINGLE EPISODE ===
   -----------------------------------------------------------------
   single.php. Keeps parent's content rhythm, swaps fonts and caps
   media elements so audio controls never exceed container width.
   ================================================================= */

body.single .podcast-title-text {
  font-family: var(--pm-font-display);
  font-size: clamp(var(--pm-text-2xl), 4vw + 1rem, var(--pm-text-4xl));
  line-height: var(--pm-leading-tight);
  color: var(--pm-ink);
}

body.single .podcast-content,
body.single .podcast-content p,
body.single .podcast-content li,
body.single .podcast-content blockquote {
  font-family: var(--pm-font-body);
  font-size: var(--pm-text-md);
  line-height: var(--pm-leading-relaxed);
  color: var(--pm-ink);
  font-weight: 400;
}

/* Podcast player — never wider than container, buttons wrap cleanly */
.podcast-player {
  flex-wrap: wrap;
  gap: var(--pm-space-2);
  max-width: 100%;
}
.podcast-player audio {
  flex: 1 1 240px;
  min-width: 0;
  max-width: 100%;
}
.podcast-player button {
  font-family: var(--pm-font-ui);
  font-size: var(--pm-text-sm);
}

/* Single-post related-keywords heading */
body.single .browse-title {
  margin-top: var(--pm-space-7);
}


/* =================================================================
   === HOMEPAGE HERO (child front-page.php) ===
   -----------------------------------------------------------------
   The redesigned hero: portrait of Armand, show title, tagline,
   and the primary search — which should read as the most visible
   element on the page. Mobile-first. Search is intentionally not
   wrapped in a <label> so its flex grow behaves without the label
   passthrough trick.
   ================================================================= */

.pm-home {
  display: block;
}

.pm-hero {
  padding: var(--pm-space-6) var(--pm-space-4) var(--pm-space-7);
  max-width: var(--pm-container-wide);
  margin: 0 auto;
}

.pm-hero__inner {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--pm-space-6);
}


/* ── Banner ──────────────────────────────────────────────────────
   Full-width (within hero padding) photo of Armand with the show
   title, subtitle, and tagline overlaid. Responsive height via
   clamp(); subtle bottom-weighted gradient for text legibility. */
.pm-hero__banner {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  height: clamp(340px, 46vw, 560px);
  border-radius: var(--pm-radius-lg);
  overflow: hidden;
  box-shadow: var(--pm-shadow-lg);
  background-color: var(--pm-ink);
}

.pm-hero__banner-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 50%;
  display: block;
}

/* Subtle bottom-weighted gradient so overlaid text stays legible
   against whatever tones the photograph has. Keeps the top of the
   image fully visible. */
.pm-hero__banner::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 30%,
    rgba(0, 0, 0, 0.35) 70%,
    rgba(0, 0, 0, 0.7) 100%
  );
  pointer-events: none;
}

.pm-hero__banner-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  padding: var(--pm-space-5) var(--pm-space-5) var(--pm-space-6);
  text-align: center;
  color: #fff;
  z-index: 1;
}
@media (min-width: 768px) {
  .pm-hero__banner-content {
    padding: var(--pm-space-6) var(--pm-space-7) var(--pm-space-7);
  }
}

.pm-hero__title {
  margin: 0;
  font-family: var(--pm-font-display);
  font-weight: 800;
  line-height: var(--pm-leading-tight);
  letter-spacing: 0;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55);
}
.pm-hero__title-main {
  display: block;
  font-size: clamp(var(--pm-text-3xl), 6vw + 0.5rem, var(--pm-text-5xl));
}
.pm-hero__title-sub {
  display: block;
  margin-top: var(--pm-space-1);
  font-size: clamp(var(--pm-text-md), 2vw + 0.5rem, var(--pm-text-xl));
  font-weight: 600;
  color: rgba(255, 255, 255, 0.92);
}
.pm-hero__title-sub em {
  font-style: italic;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.8);
}

.pm-hero__quote {
  margin: var(--pm-space-3) 0 0;
  font-family: var(--pm-font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(var(--pm-text-sm), 1.2vw + 0.7rem, var(--pm-text-md));
  line-height: var(--pm-leading-snug);
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55);
  max-width: 640px;
}


/* ── The hero search — the central CTA ───────────────────────── */
.pm-hero__search {
  display: flex;
  align-items: stretch;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  gap: var(--pm-space-2);
  background: var(--pm-color-surface);
  border: 2px solid var(--pm-orange-500);
  border-radius: var(--pm-radius-md);
  box-shadow: var(--pm-shadow-md);
  transition: box-shadow var(--pm-duration-fast) var(--pm-ease),
              border-color var(--pm-duration-fast) var(--pm-ease);
}
.pm-hero__search:focus-within {
  box-shadow: var(--pm-shadow-lg);
  border-color: var(--pm-orange-700);
}

.pm-hero__search-input {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  height: 3.25rem;
  padding: 0 var(--pm-space-4);
  font-family: var(--pm-font-ui);
  font-size: var(--pm-text-base);
  color: var(--pm-ink);
  background: transparent;
  border: none;
  outline: none;
  box-shadow: none;
  appearance: none;
  -webkit-appearance: none;
  border-radius: 0;
}
.pm-hero__search-input::placeholder {
  color: var(--pm-muted);
  opacity: 1;
}

.pm-hero__search-submit {
  flex: 0 0 auto;
  height: auto;
  min-width: 5.5rem;
  padding: 0 var(--pm-space-4);
  font-family: var(--pm-font-ui);
  font-size: var(--pm-text-sm);
  font-weight: 700;
  letter-spacing: var(--pm-tracking-wide);
  text-transform: uppercase;
  color: #fff;
  background: var(--pm-orange-500);
  border: none;
  border-radius: 0;
  cursor: pointer;
  transition: background var(--pm-duration-fast) var(--pm-ease);
}
.pm-hero__search-submit:hover,
.pm-hero__search-submit:focus-visible {
  background: var(--pm-orange-700);
  outline: none;
}
.pm-hero__search-input:focus-visible {
  outline: 2px solid var(--pm-blue-500);
  outline-offset: 2px;
  border-radius: var(--pm-radius-sm);
}

@media (min-width: 768px) {
  .pm-hero__search-input { height: 3.75rem; font-size: var(--pm-text-md); }
  .pm-hero__search-submit { min-width: 6.5rem; padding: 0 var(--pm-space-5); }
}
@media (min-width: 1024px) {
  .pm-hero__search-input { height: 4rem; padding: 0 var(--pm-space-5); }
}


/* =================================================================
   === HOMEPAGE SECTIONS (Podcast of Day / Browse / About Center) ==
   -----------------------------------------------------------------
   Section wrappers for the content below the hero. Inside each
   section we re-use parent class hooks (.post-card, .tag-grid,
   .big-category-grid, .podcast-player) so the responsive CSS
   already written above continues to apply.
   ================================================================= */

.pm-section {
  padding: var(--pm-space-7) 0;
}
.pm-section__inner {
  max-width: var(--pm-container);
  margin: 0 auto;
  padding: 0 var(--pm-space-4);
}
.pm-section__title {
  margin: 0 0 var(--pm-space-5);
  font-family: var(--pm-font-display);
  font-size: clamp(var(--pm-text-xl), 3vw + 0.5rem, var(--pm-text-3xl));
  font-weight: 800;
  color: var(--pm-ink);
  letter-spacing: 0;
}

/* A soft accent divider that sits between sections without the
   parent's watercolor-swash horizontal rules. */
.pm-section + .pm-section {
  border-top: var(--pm-border-hairline);
}


/* Podcast of the Day — card treatment */
.pm-podcast-of-day__card {
  max-width: 860px;
}
.pm-podcast-of-day__title {
  margin: 0 0 var(--pm-space-2);
  font-size: clamp(var(--pm-text-xl), 2.5vw + 0.75rem, var(--pm-text-3xl));
  font-weight: 800;
}
.pm-podcast-of-day__title a {
  color: var(--pm-ink);
  text-decoration: none;
  border-bottom: 3px solid var(--pm-orange-500);
  padding-bottom: 2px;
  transition: color var(--pm-duration-fast) var(--pm-ease),
              border-color var(--pm-duration-fast) var(--pm-ease);
}
.pm-podcast-of-day__title a:hover,
.pm-podcast-of-day__title a:focus-visible {
  color: var(--pm-orange-700);
  border-color: var(--pm-orange-700);
}
.pm-podcast-of-day__date {
  margin: 0 0 var(--pm-space-4);
  font-family: var(--pm-font-ui);
  font-size: var(--pm-text-sm);
  color: var(--pm-muted);
  letter-spacing: var(--pm-tracking-wide);
  text-transform: uppercase;
}
.pm-podcast-of-day__credits {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pm-space-3) var(--pm-space-6);
  margin-bottom: var(--pm-space-4);
  font-family: var(--pm-font-ui);
  font-size: var(--pm-text-sm);
  color: var(--pm-ink-soft);
}
.pm-podcast-of-day__credits .pm-label {
  display: inline-block;
  margin-right: var(--pm-space-2);
  font-size: var(--pm-text-xs);
  color: var(--pm-muted);
  text-transform: uppercase;
  letter-spacing: var(--pm-tracking-caps);
}
.pm-podcast-of-day__credits a {
  color: var(--pm-ink-soft);
  text-decoration: none;
  border-bottom: 1px solid var(--pm-paper-shade);
}
.pm-podcast-of-day__credits a:hover {
  color: var(--pm-orange-700);
  border-color: var(--pm-orange-500);
}
.pm-podcast-of-day__summary {
  font-family: var(--pm-font-body);
  font-size: var(--pm-text-md);
  line-height: var(--pm-leading-relaxed);
  color: var(--pm-ink);
  margin-bottom: var(--pm-space-5);
}
.pm-podcast-of-day__summary p { margin: 0 0 var(--pm-space-3); }


/* About-the-center footer section */
.pm-center-about {
  text-align: center;
  background: var(--pm-paper-tint);
  margin-top: var(--pm-space-5);
}
.pm-center-about__title {
  font-family: var(--pm-font-display);
  font-size: clamp(var(--pm-text-xl), 2.5vw + 0.5rem, var(--pm-text-2xl));
  font-weight: 800;
  color: var(--pm-ink);
  margin: 0 0 var(--pm-space-3);
}
.pm-center-about p {
  font-family: var(--pm-font-body);
  font-size: var(--pm-text-base);
  line-height: var(--pm-leading-relaxed);
  color: var(--pm-ink-soft);
  margin: 0 auto var(--pm-space-3);
  max-width: 560px;
}
.pm-center-about a {
  color: var(--pm-blue-700);
  font-weight: 600;
}
.pm-center-about__cta {
  display: inline-block;
  margin-top: var(--pm-space-3);
  padding: var(--pm-space-3) var(--pm-space-6);
  font-family: var(--pm-font-ui);
  font-size: var(--pm-text-sm);
  font-weight: 600;
  letter-spacing: var(--pm-tracking-wide);
  text-transform: uppercase;
  color: #fff !important;
  background: var(--pm-orange-500);
  border-radius: var(--pm-radius-pill);
  text-decoration: none;
  transition: background var(--pm-duration-fast) var(--pm-ease);
}
.pm-center-about__cta:hover,
.pm-center-about__cta:focus-visible {
  background: var(--pm-orange-700);
}


/* =================================================================
   === PLACEHOLDER PAGES (under-construction templates) ============
   Used by page-categories.php and page-photos.php. The WP pages are
   auto-created by pm_archive_ensure_placeholder_pages() in
   functions.php so the nav links resolve instead of 404-ing.
   ================================================================= */

.pm-placeholder {
  padding: var(--pm-space-10) var(--pm-space-4) var(--pm-space-12);
}
.pm-placeholder__inner {
  max-width: 680px;
  margin: 0 auto;
  text-align: center;
}
.pm-placeholder__eyebrow {
  display: inline-block;
  padding: var(--pm-space-1) var(--pm-space-3);
  margin-bottom: var(--pm-space-4);
  font-family: var(--pm-font-ui);
  font-size: var(--pm-text-xs);
  font-weight: 700;
  letter-spacing: var(--pm-tracking-caps);
  text-transform: uppercase;
  color: var(--pm-orange-700);
  background: var(--pm-yellow-100);
  border-radius: var(--pm-radius-pill);
}
.pm-placeholder__title {
  margin: 0 0 var(--pm-space-4);
  font-family: var(--pm-font-display);
  font-size: clamp(var(--pm-text-3xl), 5vw + 1rem, var(--pm-text-5xl));
  font-weight: 800;
  line-height: var(--pm-leading-tight);
  letter-spacing: 0;
  color: var(--pm-ink);
}
.pm-placeholder__lede {
  margin: 0 0 var(--pm-space-6);
  font-family: var(--pm-font-body);
  font-size: var(--pm-text-md);
  line-height: var(--pm-leading-relaxed);
  color: var(--pm-ink-soft);
  font-weight: 400;
}
.pm-placeholder__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--pm-space-4);
}
.pm-placeholder__cta {
  display: inline-block;
  padding: var(--pm-space-3) var(--pm-space-5);
  font-family: var(--pm-font-ui);
  font-size: var(--pm-text-sm);
  font-weight: 600;
  letter-spacing: var(--pm-tracking-wide);
  text-transform: uppercase;
  color: #fff !important;
  background: var(--pm-orange-500);
  border-radius: var(--pm-radius-pill);
  text-decoration: none;
  transition: background var(--pm-duration-fast) var(--pm-ease);
}
.pm-placeholder__cta:hover,
.pm-placeholder__cta:focus-visible {
  background: var(--pm-orange-700);
}
.pm-placeholder__link {
  font-family: var(--pm-font-ui);
  font-size: var(--pm-text-sm);
  color: var(--pm-ink-soft);
  text-decoration: none;
  border-bottom: 1px solid var(--pm-paper-shade);
  padding-bottom: 2px;
}
.pm-placeholder__link:hover,
.pm-placeholder__link:focus-visible {
  color: var(--pm-orange-700);
  border-color: var(--pm-orange-500);
}


/* =================================================================
   === "HOW ARE YOU FEELING TODAY?" — emotion entry point ==========
   -----------------------------------------------------------------
   Mood-first browsing. Five color-coded buttons (MAD / BAD / SAD /
   GLAD / SCARED). Tapping a button opens a drawer of 3–4 hand-curated
   tag links. Mobile wraps 3+2; tablet and above all fit in one row.
   Drawer animation is purely CSS (max-height + opacity transition);
   the toggle JS lives in functions.php pm_archive_print_feeling_drawer_js().
   ================================================================= */

.pm-feelings__lede {
  margin: calc(-1 * var(--pm-space-3)) 0 var(--pm-space-5);
  font-family: var(--pm-font-ui);
  font-size: var(--pm-text-sm);
  color: var(--pm-muted);
}

.pm-feelings__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pm-space-3);
  margin: 0 0 var(--pm-space-4);
}

.pm-feeling {
  /* 3+2 layout under 480px — three to a row, gap subtracted. */
  flex: 1 1 calc((100% - 2 * var(--pm-space-3)) / 3);
  min-width: 0;
  min-height: 3.25rem;
  padding: var(--pm-space-3) var(--pm-space-3);
  font-family: var(--pm-font-ui);
  font-size: var(--pm-text-base);
  font-weight: 700;
  letter-spacing: var(--pm-tracking-caps);
  text-transform: uppercase;
  color: #fff;
  background: var(--pm-feeling-bg, var(--pm-ink));
  border: 2px solid transparent;
  border-radius: var(--pm-radius-md);
  box-shadow: var(--pm-shadow-sm);
  cursor: pointer;
  transition: transform var(--pm-duration-fast) var(--pm-ease),
              box-shadow var(--pm-duration-fast) var(--pm-ease),
              filter var(--pm-duration-fast) var(--pm-ease),
              border-color var(--pm-duration-fast) var(--pm-ease);
  position: relative;
  overflow: hidden;
}
.pm-feeling::before {
  /* Faint watercolor-paper texture overlay so the button reads as a
     painted swatch, not a flat fill. */
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('../my-custom-theme/assets/images/textured_background.jpg');
  background-size: cover;
  background-position: center;
  opacity: 0.18;
  mix-blend-mode: overlay;
  pointer-events: none;
}
.pm-feeling__label {
  position: relative;
  z-index: 1;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
.pm-feeling:hover,
.pm-feeling:focus-visible {
  filter: brightness(1.08);
  box-shadow: var(--pm-shadow-md);
  outline: none;
  transform: translateY(-1px);
}
.pm-feeling:focus-visible {
  border-color: rgba(255, 255, 255, 0.7);
}
.pm-feeling.is-open {
  transform: translateY(0);
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.35),
              var(--pm-shadow-md);
  filter: brightness(1.05);
}

/* Per-emotion color tokens */
.pm-feeling--mad    { --pm-feeling-bg: var(--pm-red-500); }
.pm-feeling--bad    { --pm-feeling-bg: var(--pm-slate-500); }
.pm-feeling--sad    { --pm-feeling-bg: var(--pm-blue-500); }
.pm-feeling--glad   { --pm-feeling-bg: var(--pm-yellow-500); color: var(--pm-ink); }
.pm-feeling--scared { --pm-feeling-bg: var(--pm-plum-500); }

.pm-feeling--glad .pm-feeling__label {
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
}

@media (min-width: 480px) {
  .pm-feeling {
    /* All 5 still wrap nicely at 480-767 — let them grow to ~equal width. */
    flex: 1 1 calc((100% - 4 * var(--pm-space-3)) / 5);
    min-width: 6rem;
  }
}
@media (min-width: 768px) {
  .pm-feelings__row {
    gap: var(--pm-space-4);
  }
  .pm-feeling {
    flex: 1 1 calc((100% - 4 * var(--pm-space-4)) / 5);
    min-height: 3.75rem;
    font-size: var(--pm-text-md);
  }
}


/* ── Drawer panel ──────────────────────────────────────────────── */
.pm-feeling__drawer {
  margin: 0 0 var(--pm-space-3);
  padding: 0 var(--pm-space-5);
  background: var(--pm-paper-tint);
  border: var(--pm-border-hairline);
  border-radius: var(--pm-radius-md);
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height var(--pm-duration-normal) var(--pm-ease),
              opacity var(--pm-duration-fast) var(--pm-ease),
              padding var(--pm-duration-normal) var(--pm-ease),
              margin var(--pm-duration-normal) var(--pm-ease);
}
.pm-feeling__drawer.is-open {
  /* Generous max — actual height is constrained by the item count. */
  max-height: 32rem;
  opacity: 1;
  padding: var(--pm-space-4) var(--pm-space-5);
}
.pm-feeling__drawer[hidden] {
  display: none;
}

/* Color-key the drawer's left edge with the matching emotion. */
.pm-feeling__drawer--mad    { border-left: 4px solid var(--pm-red-500); }
.pm-feeling__drawer--bad    { border-left: 4px solid var(--pm-slate-500); }
.pm-feeling__drawer--sad    { border-left: 4px solid var(--pm-blue-500); }
.pm-feeling__drawer--glad   { border-left: 4px solid var(--pm-yellow-500); }
.pm-feeling__drawer--scared { border-left: 4px solid var(--pm-plum-500); }

.pm-feeling__items {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pm-space-2) var(--pm-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.pm-feeling__item a {
  display: inline-block;
  padding: var(--pm-space-2) var(--pm-space-4);
  font-family: var(--pm-font-ui);
  font-size: var(--pm-text-sm);
  font-weight: 600;
  color: var(--pm-ink);
  background: var(--pm-color-surface);
  border: 1px solid var(--pm-paper-shade);
  border-radius: var(--pm-radius-pill);
  text-decoration: none;
  transition: background var(--pm-duration-fast) var(--pm-ease),
              border-color var(--pm-duration-fast) var(--pm-ease),
              color var(--pm-duration-fast) var(--pm-ease);
}
.pm-feeling__item a:hover,
.pm-feeling__item a:focus-visible {
  background: var(--pm-orange-500);
  border-color: var(--pm-orange-500);
  color: #fff;
  outline: none;
}
.pm-feeling__empty {
  font-family: var(--pm-font-ui);
  font-size: var(--pm-text-sm);
  color: var(--pm-muted);
  list-style: none;
}


/* =================================================================
   === TOP ROW (Podcast of the Day | Wisdom of the Week) ===========
   Two-up at >=768px, stacks below. Both cards share the same
   visual weight; titles sit at the top of each column so the row
   reads as a balanced pair.
   ================================================================= */

.pm-top-row-section {
  /* Already a .pm-section; just gives us a hook if we ever need it. */
}
.pm-top-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--pm-space-7);
}
@media (min-width: 768px) {
  .pm-top-row {
    grid-template-columns: 1fr 1fr;
    gap: var(--pm-space-7);
  }
}
.pm-top-row__col {
  display: flex;
  flex-direction: column;
}
.pm-top-row__title {
  margin: 0 0 var(--pm-space-4);
  font-size: clamp(var(--pm-text-lg), 2vw + 0.5rem, var(--pm-text-2xl));
}


/* ── Wisdom of the Week card ───────────────────────────────────── */
.pm-wisdom-of-week__card {
  background: var(--pm-color-surface);
  border: var(--pm-border-hairline);
  border-radius: var(--pm-radius-lg);
  padding: var(--pm-space-5);
  box-shadow: var(--pm-shadow-sm);
  height: 100%;
}
.pm-wisdom-of-week__card.is-fallback {
  /* When no wisdom_clip posts exist yet, the card pulls from a
     random episode. Subtle paper tint signals "placeholder". */
  background: var(--pm-paper-tint);
}
.pm-wisdom-of-week__title {
  margin: 0 0 var(--pm-space-3);
  font-family: var(--pm-font-display);
  font-size: clamp(var(--pm-text-lg), 1.8vw + 0.5rem, var(--pm-text-xl));
  font-weight: 700;
  line-height: var(--pm-leading-snug);
  color: var(--pm-ink);
}
.pm-wisdom-of-week__title a {
  color: inherit;
  text-decoration: none;
  border-bottom: 2px solid var(--pm-orange-500);
  padding-bottom: 2px;
  transition: color var(--pm-duration-fast) var(--pm-ease),
              border-color var(--pm-duration-fast) var(--pm-ease);
}
.pm-wisdom-of-week__title a:hover,
.pm-wisdom-of-week__title a:focus-visible {
  color: var(--pm-orange-700);
  border-color: var(--pm-orange-700);
}
.pm-wisdom-of-week__hint {
  margin: 0 0 var(--pm-space-3);
  font-family: var(--pm-font-ui);
  font-size: var(--pm-text-xs);
  letter-spacing: var(--pm-tracking-caps);
  text-transform: uppercase;
  color: var(--pm-muted);
}
.pm-wisdom-of-week__summary {
  font-family: var(--pm-font-body);
  font-size: var(--pm-text-base);
  line-height: var(--pm-leading-relaxed);
  color: var(--pm-ink-soft);
  margin: 0 0 var(--pm-space-4);
}
.pm-wisdom-of-week__summary p {
  margin: 0 0 var(--pm-space-3);
}
.pm-wisdom-of-week__player {
  margin-top: auto;
}


/* =================================================================
   Browse by Category  (homepage #browse-by-category)
   16-theme grid of cards, paper-surface with an accent left rule.
   ================================================================= */
.pm-browse-category .pm-section__inner { max-width: 1100px; }

.pm-category-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--pm-space-3);
  margin-top: var(--pm-space-5);
}
@media (min-width: 560px) {
  .pm-category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .pm-category-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.pm-category-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pm-space-3);
  padding: var(--pm-space-4) var(--pm-space-5);
  background: var(--pm-color-surface);
  border: 1px solid var(--pm-paper-shade);
  border-left: 4px solid var(--pm-color-accent);
  border-radius: var(--pm-radius-md);
  box-shadow: var(--pm-shadow-sm);
  text-decoration: none;
  transition: transform var(--pm-duration-fast) var(--pm-ease),
              box-shadow var(--pm-duration-fast) var(--pm-ease),
              border-color var(--pm-duration-fast) var(--pm-ease);
}
.pm-category-card:hover,
.pm-category-card:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--pm-shadow-md);
  border-left-color: var(--pm-red-500);
  outline: none;
}
.pm-category-card__name {
  font-family: var(--pm-font-display);
  font-size: var(--pm-text-md);
  font-weight: 600;
  color: var(--pm-ink);
  line-height: var(--pm-leading-snug);
}
.pm-category-card__count {
  flex: 0 0 auto;
  font-family: var(--pm-font-ui);
  font-size: var(--pm-text-sm);
  font-weight: 600;
  color: var(--pm-muted);
  background: var(--pm-paper-tint);
  padding: var(--pm-space-1) var(--pm-space-3);
  border-radius: var(--pm-radius-pill);
}

/* "See all N episodes" — prominent filled pill at the top of each
   feeling drawer, linking to the real /mood/<slug>/ archive. */
.pm-feeling__item--all a {
  background: var(--pm-color-accent);
  border-color: var(--pm-color-accent);
  color: #fff;
}
.pm-feeling__item--all a:hover,
.pm-feeling__item--all a:focus-visible {
  background: var(--pm-red-700);
  border-color: var(--pm-red-700);
  color: #fff;
}


/* =================================================================
   v0.6 VISUAL REFRESH
   Mood buttons + drawers, clean keyword list, category icon cards.
   Appended last so these win over earlier same-specificity rules.
   ================================================================= */

/* ---- Shared icon sizing ---- */
.pm-icon { width: 100%; height: 100%; display: block; }

/* ---- Mood buttons: icon over label, soft gradient swatch ---- */
.pm-feeling {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--pm-space-2);
  min-height: 6rem;
  padding: var(--pm-space-4) var(--pm-space-2);
  text-transform: uppercase;
  letter-spacing: var(--pm-tracking-caps);
  font-weight: 700;
  color: #fff;
  border: 2px solid transparent;
  border-radius: var(--pm-radius-lg);
  background: var(--pm-feeling-grad, var(--pm-ink));
  box-shadow: var(--pm-shadow-sm);
}
/* Tone down the paper texture so the new gradients read cleanly. */
.pm-feeling::before { opacity: 0.10; }

.pm-feeling__icon {
  position: relative;
  z-index: 1;
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  padding: 0.45rem;
  border-radius: var(--pm-radius-pill);
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}
.pm-feeling__icon .pm-icon { stroke-width: 1.7; }
.pm-feeling__label { font-size: var(--pm-text-sm); }

/* Soft two-stop gradients per mood (replaces the flat fills). */
.pm-feeling--mad    { --pm-feeling-grad: linear-gradient(155deg, var(--pm-red-300),   var(--pm-red-500)); }
.pm-feeling--bad    { --pm-feeling-grad: linear-gradient(155deg, #6c7689,            var(--pm-slate-500)); }
.pm-feeling--sad    { --pm-feeling-grad: linear-gradient(155deg, var(--pm-blue-300),  var(--pm-blue-500)); }
.pm-feeling--glad   { --pm-feeling-grad: linear-gradient(155deg, var(--pm-yellow-300),var(--pm-yellow-500)); color: var(--pm-ink); }
.pm-feeling--scared { --pm-feeling-grad: linear-gradient(155deg, #9a6a95,            var(--pm-plum-500)); }

.pm-feeling--glad .pm-feeling__icon { background: rgba(31, 27, 22, 0.12); color: var(--pm-ink); }

@media (min-width: 768px) {
  .pm-feeling { min-height: 6.5rem; }
  .pm-feeling__icon { width: 2.25rem; height: 2.25rem; }
  .pm-feeling__label { font-size: var(--pm-text-base); }
}

/* ---- Drawer: lede + 5 episode picks + "see all" link ---- */
.pm-feeling__drawer-lede {
  margin: 0 0 var(--pm-space-3);
  font-family: var(--pm-font-ui);
  font-size: var(--pm-text-sm);
  color: var(--pm-ink-soft);
}
.pm-feeling__picks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--pm-space-1);
}
.pm-feeling__pick a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--pm-space-3);
  padding: var(--pm-space-2) var(--pm-space-3);
  border-radius: var(--pm-radius-sm);
  text-decoration: none;
  color: var(--pm-color-link);
  transition: background var(--pm-duration-fast) var(--pm-ease),
              color var(--pm-duration-fast) var(--pm-ease);
}
.pm-feeling__pick a:hover,
.pm-feeling__pick a:focus-visible {
  background: rgba(255, 255, 255, 0.7);
  color: var(--pm-color-link-hover);
  outline: none;
}
.pm-feeling__pick-title {
  font-family: var(--pm-font-display);
  font-size: var(--pm-text-md);
  font-weight: 600;
  line-height: var(--pm-leading-snug);
}
.pm-feeling__pick-year {
  flex: 0 0 auto;
  font-family: var(--pm-font-ui);
  font-size: var(--pm-text-xs);
  color: var(--pm-muted);
}
.pm-feeling__all-link {
  display: inline-block;
  margin-top: var(--pm-space-3);
  font-family: var(--pm-font-ui);
  font-size: var(--pm-text-sm);
  font-weight: 600;
  color: var(--pm-color-accent);
  text-decoration: none;
}
.pm-feeling__all-link:hover,
.pm-feeling__all-link:focus-visible { text-decoration: underline; }

/* ---- Browse by Keyword: clean alphabetical word list ---- */
.pm-keyword-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pm-space-2) var(--pm-space-4);
  margin-top: var(--pm-space-5);
  max-width: 1000px;
}
.pm-keyword {
  font-family: var(--pm-font-ui);
  font-size: var(--pm-text-sm);
  color: var(--pm-ink-soft);
  text-decoration: none;
  padding: 2px 0;
  border-bottom: 1px solid transparent;
  transition: color var(--pm-duration-fast) var(--pm-ease),
              border-color var(--pm-duration-fast) var(--pm-ease);
}
.pm-keyword:hover,
.pm-keyword:focus-visible {
  color: var(--pm-color-link-hover);
  border-bottom-color: var(--pm-color-link-hover);
  outline: none;
}

/* ---- Single-post "Related Keywords": same clean treatment ---- */
.single .tag-grid {
  display: flex !important;
  flex-wrap: wrap;
  gap: var(--pm-space-2) var(--pm-space-4) !important;
  grid-template-columns: none !important;
  max-width: 100%;
  padding: 0 !important;
}
.single .tag-grid .tag-item {
  background: none !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
  aspect-ratio: auto !important;
  min-height: 0 !important;
  padding: 2px 0 !important;
  margin: 0 !important;
  transform: none !important;
  color: var(--pm-ink-soft) !important;
  font-family: var(--pm-font-ui);
  font-size: var(--pm-text-sm);
  border-bottom: 1px solid transparent !important;
}
.single .tag-grid .tag-item:hover {
  color: var(--pm-color-link-hover) !important;
  border-bottom-color: var(--pm-color-link-hover) !important;
}
.single .tag-grid .tag-item .tag-count { color: var(--pm-muted); }

/* ---- Browse by Category: squarish icon cards (2 mobile / 3 desktop) ---- */
.pm-category-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--pm-space-3);
  margin-top: var(--pm-space-5);
}
@media (min-width: 720px) {
  .pm-category-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--pm-space-4); }
}

.pm-category-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--pm-space-2);
  min-height: 9.5rem;
  padding: var(--pm-space-5) var(--pm-space-3);
  background: var(--pm-color-surface);
  border: 1px solid var(--pm-paper-shade);
  border-radius: var(--pm-radius-lg);
  box-shadow: var(--pm-shadow-sm);
  text-decoration: none;
  transition: transform var(--pm-duration-fast) var(--pm-ease),
              box-shadow var(--pm-duration-fast) var(--pm-ease),
              border-color var(--pm-duration-fast) var(--pm-ease);
}
.pm-category-card:hover,
.pm-category-card:focus-visible {
  transform: translateY(-3px);
  box-shadow: var(--pm-shadow-md);
  border-color: var(--pm-color-accent);
  outline: none;
}
.pm-category-card__icon {
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  padding: 0.6rem;
  border-radius: var(--pm-radius-pill);
  background: var(--pm-paper-tint);
  color: var(--pm-color-accent);
}
.pm-category-card:hover .pm-category-card__icon {
  background: var(--pm-red-50);
  color: var(--pm-red-700);
}
.pm-category-card__name {
  font-family: var(--pm-font-display);
  font-size: var(--pm-text-base);
  font-weight: 700;
  line-height: var(--pm-leading-snug);
  color: var(--pm-ink);
}
.pm-category-card__count {
  font-family: var(--pm-font-ui);
  font-size: var(--pm-text-xs);
  color: var(--pm-muted);
}
@media (min-width: 720px) {
  .pm-category-card { min-height: 11rem; }
  .pm-category-card__name { font-size: var(--pm-text-md); }
}

/* ---- Hero: focus the crop on Armand's face in the studio photo ---- */
.pm-hero__banner-img { object-position: center 38%; }


/* =================================================================
   v0.7 — player, POTD module, spacing, compact cards, keyword colors
   ================================================================= */

/* ---- Spacing: tighten hero -> feelings -> top row rhythm ---- */
.pm-hero { padding-bottom: var(--pm-space-4); }
.pm-feelings { padding-top: var(--pm-space-5); padding-bottom: var(--pm-space-6); }
.pm-feelings__lede { margin: calc(-1 * var(--pm-space-2)) 0 var(--pm-space-4); }
.pm-top-row-section { padding-top: var(--pm-space-6); padding-bottom: var(--pm-space-6); }

/* ---- Podcast of the Day: same module treatment as Wisdom ---- */
.pm-podcast-of-day__card {
  max-width: none;
  background: var(--pm-color-surface);
  border: var(--pm-border-hairline);
  border-radius: var(--pm-radius-lg);
  padding: var(--pm-space-5);
  box-shadow: var(--pm-shadow-sm);
  height: 100%;
  display: flex;
  flex-direction: column;
}
.pm-podcast-of-day__title {
  font-size: clamp(var(--pm-text-lg), 1.8vw + 0.5rem, var(--pm-text-xl));
}
.pm-podcast-of-day__player { margin-top: auto; }

/* ---- Compact category cards (keep the SVG visuals) ---- */
.pm-category-card {
  min-height: 7rem;
  padding: var(--pm-space-4) var(--pm-space-2);
  gap: var(--pm-space-1);
}
.pm-category-card__icon {
  width: 2.25rem;
  height: 2.25rem;
  padding: 0.45rem;
}
.pm-category-card__name { font-size: var(--pm-text-sm); }
@media (min-width: 720px) {
  .pm-category-card { min-height: 8rem; padding: var(--pm-space-5) var(--pm-space-3); }
  .pm-category-card__name { font-size: var(--pm-text-base); }
}

/* ---- Keyword color language: tinted by dominant mood ---- */
.pm-keyword--mad    { color: var(--pm-red-700); }
.pm-keyword--bad    { color: var(--pm-slate-700); }
.pm-keyword--sad    { color: var(--pm-blue-700); }
.pm-keyword--glad   { color: var(--pm-yellow-900); }
.pm-keyword--scared { color: var(--pm-plum-700); }
.pm-keyword:hover,
.pm-keyword:focus-visible {
  color: inherit;          /* keep the mood hue on hover */
  border-bottom-color: currentColor;
}

/* ---- Custom audio player ---- */
.podcast-player.pm-player {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pm-space-2) var(--pm-space-3);
  padding: var(--pm-space-2) var(--pm-space-3);
  background: var(--pm-color-surface);
  border: var(--pm-border-hairline);
  border-radius: var(--pm-radius-pill);
  box-shadow: var(--pm-shadow-sm);
  font-family: var(--pm-font-ui);
}
.pm-player audio { display: none; }

.pm-player .pm-player__play {
  flex: 0 0 auto;
  width: 2.6rem;
  height: 2.6rem;
  display: grid;
  place-items: center;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--pm-color-accent);
  color: #fff;
  cursor: pointer;
  transition: background var(--pm-duration-fast) var(--pm-ease),
              transform var(--pm-duration-fast) var(--pm-ease);
}
.pm-player .pm-player__play:hover { background: var(--pm-red-700); transform: scale(1.05); }
.pm-player .pm-player__play svg { width: 1.3rem; height: 1.3rem; }

.pm-player .pm-player__skip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 1px;
  padding: var(--pm-space-1) var(--pm-space-2);
  background: none;
  border: none;
  border-radius: var(--pm-radius-sm);
  color: var(--pm-ink-soft);
  font-family: var(--pm-font-ui);
  font-size: var(--pm-text-xs);
  font-weight: 700;
  cursor: pointer;
  transition: color var(--pm-duration-fast) var(--pm-ease), background var(--pm-duration-fast) var(--pm-ease);
}
.pm-player .pm-player__skip span { font-size: var(--pm-text-sm); }
.pm-player .pm-player__skip:hover { color: var(--pm-color-accent); background: var(--pm-paper-tint); }

.pm-player .pm-player__time {
  flex: 0 0 auto;
  font-size: var(--pm-text-xs);
  color: var(--pm-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.pm-player .pm-player__cur { color: var(--pm-ink-soft); }

.pm-player .pm-player__seek {
  flex: 1 1 120px;
  min-width: 90px;
  height: 6px;
  margin: 0;
  -webkit-appearance: none;
  appearance: none;
  background: linear-gradient(to right,
      var(--pm-color-accent) var(--pm-progress, 0%),
      var(--pm-paper-shade) var(--pm-progress, 0%));
  border-radius: var(--pm-radius-pill);
  cursor: pointer;
}
.pm-player .pm-player__seek::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--pm-color-accent);
  border: 2px solid #fff;
  box-shadow: var(--pm-shadow-sm);
  cursor: pointer;
}
.pm-player .pm-player__seek::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--pm-color-accent);
  border: 2px solid #fff;
  cursor: pointer;
}
.pm-player .pm-player__seek:focus-visible { outline: 2px solid var(--pm-color-link); outline-offset: 3px; }


/* =================================================================
   v0.8 — hero text placement, mood spectrum palette, photos page
   ================================================================= */

/* A deliberate 5-stop spectrum (warm -> cool) shared by the mood
   buttons, drawer accents, and keyword tints so the colors relate. */
:root {
  --pm-mood-mad:    #d1493b;  --pm-mood-mad-ink:    #a82f23;
  --pm-mood-bad:    #cf7a36;  --pm-mood-bad-ink:    #8c5316;
  --pm-mood-glad:   #4c9d6e;  --pm-mood-glad-ink:   #2f6b47;
  --pm-mood-sad:    #3f77be;  --pm-mood-sad-ink:    #25559e;
  --pm-mood-scared: #7e57a6;  --pm-mood-scared-ink: #563579;
}

/* ---- Hero: lift the title above Armand's face (top-anchored) ---- */
.pm-hero__banner-content { justify-content: flex-start; }
.pm-hero__banner::after {
  background: linear-gradient(180deg,
    rgba(0, 0, 0, 0.72) 0%,
    rgba(0, 0, 0, 0.42) 30%,
    rgba(0, 0, 0, 0) 62%);
}
.pm-hero__banner-img { object-position: center 28%; }

/* ---- Mood spectrum: buttons ---- */
.pm-feeling--mad    { --pm-feeling-grad: linear-gradient(155deg, var(--pm-mood-mad),    var(--pm-mood-mad-ink)); }
.pm-feeling--bad    { --pm-feeling-grad: linear-gradient(155deg, var(--pm-mood-bad),    var(--pm-mood-bad-ink)); }
.pm-feeling--sad    { --pm-feeling-grad: linear-gradient(155deg, var(--pm-mood-sad),    var(--pm-mood-sad-ink)); }
.pm-feeling--scared { --pm-feeling-grad: linear-gradient(155deg, var(--pm-mood-scared), var(--pm-mood-scared-ink)); }
.pm-feeling--glad   {
  --pm-feeling-grad: linear-gradient(155deg, var(--pm-mood-glad), var(--pm-mood-glad-ink));
  color: #fff;
}
.pm-feeling--glad .pm-feeling__icon { background: rgba(255, 255, 255, 0.18); color: #fff; }
.pm-feeling--glad .pm-feeling__label { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); }

/* ---- Mood spectrum: drawer accent + keyword tints ---- */
.pm-feeling__drawer--mad    { border-left-color: var(--pm-mood-mad); }
.pm-feeling__drawer--bad    { border-left-color: var(--pm-mood-bad); }
.pm-feeling__drawer--sad    { border-left-color: var(--pm-mood-sad); }
.pm-feeling__drawer--glad   { border-left-color: var(--pm-mood-glad); }
.pm-feeling__drawer--scared { border-left-color: var(--pm-mood-scared); }

.pm-keyword--mad    { color: var(--pm-mood-mad-ink); }
.pm-keyword--bad    { color: var(--pm-mood-bad-ink); }
.pm-keyword--sad    { color: var(--pm-mood-sad-ink); }
.pm-keyword--glad   { color: var(--pm-mood-glad-ink); }
.pm-keyword--scared { color: var(--pm-mood-scared-ink); }

/* ---- Photos page: polaroid grid ---- */
.pm-photos__lede {
  margin: calc(-1 * var(--pm-space-3)) 0 0;
  font-family: var(--pm-font-ui);
  font-size: var(--pm-text-sm);
  color: var(--pm-muted);
}
.pm-photo-grid {
  list-style: none;
  margin: var(--pm-space-6) 0 0;
  padding: 0;
  display: grid;
  gap: var(--pm-space-4);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 560px)  { .pm-photo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 860px)  { .pm-photo-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .pm-photo-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

.pm-photo {
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  border-radius: var(--pm-radius-sm);
}
.pm-photo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--pm-radius-sm);
  box-shadow: var(--pm-shadow-sm);
  background: var(--pm-color-surface);
  transition: transform var(--pm-duration-fast) var(--pm-ease),
              box-shadow var(--pm-duration-fast) var(--pm-ease);
}
.pm-photo:hover img,
.pm-photo:focus-visible img { transform: translateY(-3px) scale(1.02); box-shadow: var(--pm-shadow-md); }
.pm-photo:focus-visible { outline: 2px solid var(--pm-color-link); outline-offset: 3px; }

/* ---- Lightbox ---- */
.pm-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(20, 16, 12, 0.92);
  padding: var(--pm-space-6) var(--pm-space-4);
}
.pm-lightbox.is-open { display: flex; }
.pm-lightbox__img {
  max-width: min(92vw, 880px);
  max-height: 84vh;
  width: auto;
  height: auto;
  border-radius: var(--pm-radius-sm);
  box-shadow: var(--pm-shadow-lg);
}
.pm-lightbox__btn {
  position: absolute;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  transition: background var(--pm-duration-fast) var(--pm-ease);
}
.pm-lightbox__btn:hover { background: rgba(255, 255, 255, 0.28); }
.pm-lightbox__close { top: var(--pm-space-4); right: var(--pm-space-4); }
.pm-lightbox__prev  { left: var(--pm-space-3); top: 50%; transform: translateY(-50%); }
.pm-lightbox__next  { right: var(--pm-space-3); top: 50%; transform: translateY(-50%); }
.pm-lightbox__count {
  position: absolute;
  bottom: var(--pm-space-4);
  left: 0; right: 0;
  text-align: center;
  color: rgba(255, 255, 255, 0.8);
  font-family: var(--pm-font-ui);
  font-size: var(--pm-text-sm);
}
@media (max-width: 559px) {
  .pm-lightbox__btn { width: 2.5rem; height: 2.5rem; font-size: 1.3rem; }
}


/* =================================================================
   v0.9 — soften the mood buttons to pastels (paper-friendly)
   Light tint fills + tonal (dark-tint) text/icon, no white-on-bold.
   ================================================================= */
:root {
  --pm-mood-mad-soft:    #f8ded9;  --pm-mood-mad-edge:    #eca99f;
  --pm-mood-bad-soft:    #f7e6d3;  --pm-mood-bad-edge:    #e6b884;
  --pm-mood-glad-soft:   #dcefe1;  --pm-mood-glad-edge:   #a6d2b6;
  --pm-mood-sad-soft:    #dde7f5;  --pm-mood-sad-edge:    #abc2e7;
  --pm-mood-scared-soft: #eae0f1;  --pm-mood-scared-edge: #c6b1d9;
}

.pm-feeling {
  color: var(--pm-ink);
  border-width: 1.5px;
  box-shadow: var(--pm-shadow-sm);
}
.pm-feeling::before { opacity: 0.04; }            /* barely-there texture */
.pm-feeling__label { text-shadow: none; }
.pm-feeling__icon { background: rgba(255, 255, 255, 0.6); }

/* Calmer interactions — no brighten wash on light fills. */
.pm-feeling:hover,
.pm-feeling:focus-visible { filter: none; box-shadow: var(--pm-shadow-md); transform: translateY(-2px); }
.pm-feeling:focus-visible { border-color: var(--pm-ink-soft); }
.pm-feeling.is-open {
  filter: none;
  box-shadow: inset 0 0 0 2px rgba(31, 27, 22, 0.10), var(--pm-shadow-md);
}

/* Per-mood pastel fill + matching tonal ink for label & icon. */
.pm-feeling--mad {
  --pm-feeling-grad: var(--pm-mood-mad-soft);
  border-color: var(--pm-mood-mad-edge);
  color: var(--pm-mood-mad-ink);
}
.pm-feeling--bad {
  --pm-feeling-grad: var(--pm-mood-bad-soft);
  border-color: var(--pm-mood-bad-edge);
  color: var(--pm-mood-bad-ink);
}
.pm-feeling--sad {
  --pm-feeling-grad: var(--pm-mood-sad-soft);
  border-color: var(--pm-mood-sad-edge);
  color: var(--pm-mood-sad-ink);
}
.pm-feeling--glad {
  --pm-feeling-grad: var(--pm-mood-glad-soft);
  border-color: var(--pm-mood-glad-edge);
  color: var(--pm-mood-glad-ink);
}
.pm-feeling--scared {
  --pm-feeling-grad: var(--pm-mood-scared-soft);
  border-color: var(--pm-mood-scared-edge);
  color: var(--pm-mood-scared-ink);
}

/* Icon inherits the tonal ink; soften the badge on the light fill. */
.pm-feeling__icon { color: currentColor; }
.pm-feeling--glad .pm-feeling__icon { background: rgba(255, 255, 255, 0.6); color: currentColor; }
.pm-feeling--glad .pm-feeling__label { text-shadow: none; }


/* =================================================================
   v0.10 — keep the audio player on a single row on mobile
   Never wrap; the scrubber absorbs the squeeze and controls shrink.
   ================================================================= */
.podcast-player.pm-player { flex-wrap: nowrap; }
.pm-player .pm-player__seek { flex: 1 1 auto; min-width: 0; }
.pm-player .pm-player__play,
.pm-player .pm-player__skip,
.pm-player .pm-player__time { flex: 0 0 auto; }

@media (max-width: 520px) {
  .podcast-player.pm-player {
    gap: var(--pm-space-1) var(--pm-space-2);
    padding: var(--pm-space-1) var(--pm-space-2);
  }
  .pm-player .pm-player__play { width: 2.2rem; height: 2.2rem; }
  .pm-player .pm-player__play svg { width: 1.05rem; height: 1.05rem; }
  .pm-player .pm-player__skip { padding: 2px 3px; }
  .pm-player .pm-player__skip span { font-size: var(--pm-text-xs); }
  .pm-player .pm-player__time { font-size: 0.7rem; }
}


/* =================================================================
   v0.11 — unify homepage section widths on desktop
   Banner, search, feelings, top row, browse, keywords all share the
   same content width + side padding so their edges line up.
   ================================================================= */
.pm-hero { max-width: var(--pm-container); }   /* was --pm-container-wide */
.pm-hero__banner { max-width: 100%; }          /* was 1200px */
.pm-hero__search { max-width: 100%; }           /* was 720px  */
.pm-browse-keyword .pm-keyword-list { max-width: none; } /* fill to section edge */