.lib-hero { background: linear-gradient(135deg, var(--forest-dark) 0%, #14290f 60%, var(--walnut) 100%); padding: 6.5rem 0 4rem; position: relative; overflow: hidden; }
.lib-hero::after { content:''; position:absolute; right:-120px; top:50%; transform:translateY(-50%); width:520px; height:520px; border-radius:50%; border:1px solid rgba(132,181,159,0.18); box-shadow: 0 0 0 60px rgba(132,181,159,0.05), 0 0 0 130px rgba(132,181,159,0.035); pointer-events:none; }
.lib-hero-inner { position: relative; z-index: 1; max-width: 680px; }
.lib-hero h1 { font-family: var(--font-display); color: var(--cream); font-size: clamp(2.3rem,5.5vw,3.5rem); margin: 0 0 1rem; }
.lib-hero h1 em { color: var(--gold); font-style: italic; }
.lib-hero p { color: var(--sage); font-size: 1.15rem; line-height: 1.65; margin: 0 0 1.5rem; }
.lib-meta { display: flex; gap: 1.5rem; flex-wrap: wrap; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(245,245,220,0.65); }
.lib-filters { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 2.5rem; }
.lib-filter { background: var(--white); border: 1.5px solid rgba(132,181,159,0.55); border-radius: 100px; padding: 0.5rem 1.15rem; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.07em; text-transform: uppercase; font-weight: 600; color: var(--walnut); cursor: pointer; transition: all var(--dur-fast) var(--ease); }
.lib-filter:hover { border-color: var(--forest); }
.lib-filter[aria-pressed="true"] { background: var(--forest); border-color: var(--forest); color: var(--cream); }
.lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 1.8rem; }
.ep { background: var(--white); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); overflow: hidden; display: flex; flex-direction: column; transition: box-shadow var(--dur-med) var(--ease), transform var(--dur-med) var(--ease); }
.ep:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.ep[hidden] { display: none; }
.ep-art { position: relative; aspect-ratio: 16/9; background: linear-gradient(150deg, var(--forest-dark), #14290f); display: grid; place-items: center; }
.ep-rings { width: 120px; height: 120px; border-radius: 50%; border: 2px solid rgba(201,168,76,0.75); box-shadow: 0 0 0 18px rgba(132,181,159,0.13), 0 0 0 38px rgba(132,181,159,0.07); position: relative; }
.ep-rings::after { content:''; position:absolute; inset:50% auto auto 50%; transform:translate(-50%,-50%); width:7px; height:7px; border-radius:50%; background: var(--orange); }
.ep-num { position: absolute; top: 0.9rem; left: 1rem; font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.14em; color: var(--gold); text-transform: uppercase; }
.ep-tier { position: absolute; top: 0.75rem; right: 0.9rem; font-family: var(--font-mono); font-size: 0.55rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; padding: 0.25rem 0.6rem; border-radius: 100px; }
.ep-tier.free { background: var(--sage); color: var(--walnut); }
/* Renamed from .premium on 12 September 2026. The badge marks sessions that
   need a free account, not a paid tier: the library is included at every
   level, Community too (v1.0.13 wording: "Free account" / "Included"). */
.ep-tier.member { background: var(--gold); color: var(--walnut); }
.ep-body { padding: 1.5rem; display: flex; flex-direction: column; flex: 1; }
.ep-title { font-family: var(--font-display); font-size: 1.3rem; color: var(--forest); margin: 0 0 0.4rem; }
.ep-sub { font-family: var(--font-body); font-style: italic; color: var(--sage-ink); font-size: 0.95rem; margin: 0 0 0.8rem; }
.ep-desc { color: var(--walnut); font-size: 0.96rem; line-height: 1.6; margin: 0 0 1.2rem; flex: 1; }
.ep-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 1rem; border-top: 1px solid rgba(61,43,31,0.1); }
.ep-run { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.08em; color: var(--mid-gray); text-transform: uppercase; }
.ep-play { display: inline-flex; align-items: center; gap: 0.5rem; background: var(--forest); color: var(--cream); text-decoration: none; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; padding: 0.55rem 1.1rem; border-radius: 100px; transition: background var(--dur-fast) var(--ease); }
.ep-play:hover { background: var(--forest-light); color: var(--cream); }
.ep-play.locked { background: transparent; color: var(--orange-ink); border: 1.5px solid var(--orange-ink); }
.ep-play.locked:hover { background: rgba(167,90,50,0.08); color: var(--orange-ink); }
.lib-empty { text-align: center; padding: 3rem 1rem; color: var(--mid-gray); display: none; }
.lib-empty.show { display: block; }
.player-slot { border: 2px dashed rgba(132,181,159,0.7); border-radius: var(--radius-md); padding: 1.6rem; background: rgba(132,181,159,0.07); margin-top: 2.5rem; }
.player-slot h3 { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sage-ink); margin: 0 0 0.5rem; }
.player-slot p { margin: 0; font-size: 0.95rem; color: var(--walnut); line-height: 1.55; }
.upsell { text-align: center; max-width: 640px; margin: 0 auto; }
.upsell h2 { font-family: var(--font-display); color: var(--cream); font-size: clamp(1.7rem,4vw,2.3rem); margin: 0 0 1rem; }
.upsell h2 em { color: var(--gold); font-style: italic; }
.upsell p { color: var(--sage); font-size: 1.05rem; line-height: 1.7; margin: 0 0 1.6rem; }

/* ── Gated audio player, runbook 2.3, added 20 September 2026 ───────────── */

/* The slot carries the hidden attribute until a session is chosen. Stated
   explicitly because .player-slot sets padding and a border, and a stray
   display rule elsewhere would otherwise beat the user-agent default. */
.player-slot[hidden] { display: none !important; }

/* Focus lands here when a session starts, so the ring has to be visible. */
.player-slot:focus { outline: 3px solid var(--forest); outline-offset: 3px; }
.player-slot:focus:not(:focus-visible) { outline: none; }

.mm-audio { display: block; width: 100%; margin-top: 1rem; }

.mm-player-note { font-size: 0.85rem !important; color: var(--mid-gray) !important; margin-top: 0.4rem !important; }

/* "Recording soon": allowed to listen, but the file does not exist yet. It is
   a span, not a link, so it must not look or behave clickable. */
.ep-play.locked[aria-disabled="true"] {
  cursor: default;
  opacity: 0.7;
  border-style: dashed;
}
.ep-play.locked[aria-disabled="true"]:hover { background: transparent; }