/* Collection layout with a flat podcast-cover wall and artwork atmosphere. */
.podcasts-page { opacity: 1; isolation: isolate; }
.pc-atmosphere { position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0; overflow: hidden; background: #141716; transition: opacity .5s ease; }
.pc-atmosphere-layer { position: absolute; inset: 0; background: radial-gradient(ellipse at 15% 15%, var(--pc-room-glow), transparent 70%), radial-gradient(ellipse at 95% 85%, var(--pc-room-edge), transparent 65%), var(--pc-room-base); animation: pc-room-arrive .55s ease both; }
@keyframes pc-room-arrive { from { opacity: 0; } to { opacity: 1; } }
.podcasts-page[data-pc-active] .pc-atmosphere { opacity: 1; }
.podcasts-page[data-pc-active] {
  --theme-text: #f7f5ef; --theme-muted: #e5e3dc; --theme-faint: #dddcd5;
  --theme-line: rgb(255 255 255 / 20%); --theme-rule: rgb(255 255 255 / 35%);
  --theme-soft: rgb(255 255 255 / 7%); --theme-surface: #222624;
}
.podcasts-page[data-pc-active] .pc-main { --pc-accent: #ffdab6; }
.pc-main { transition: color .3s ease; }
.pc-main .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.pc-main {
  --pc-muted: var(--theme-muted, #72726b);
  --pc-line: var(--theme-line, #e3e3dd);
  --pc-paper: var(--theme-soft, #f5f5f1);
  --pc-accent: #b95100;
  max-width: 900px; margin: 0 auto; padding: 0 16px;
}
[data-theme="dark"] .pc-main { --pc-accent: #ffa35a; }
.pc-collection { display: grid; row-gap: 32px; padding-top: 56px; }
.pc-toolbar { margin: 0; border: 0; }
.pc-footer { margin: 40px 0 60px; }
.pc-filters { display: flex; flex-wrap: wrap; gap: 8px 10px; }
.pc-toolbar button { color: var(--pc-muted); background: none; border: 0; font: inherit; cursor: pointer; }
.pc-filters button { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 8px 12px; border-radius: 6px; font-size: 12px; font-weight: 400; }
.pc-filters button span { font: 9px ui-monospace, monospace; opacity: .75; }
.pc-filters button[aria-pressed="true"] { color: var(--pc-accent); background: rgb(255 119 0 / 10%); }
.pc-toolbar button:hover { color: var(--pc-accent); opacity: 1; }
.pc-main :is(button, a):focus-visible { outline: 2px solid #f17b27; outline-offset: 4px; }
.pc-status { color: var(--pc-muted); font-size: 13px; }
.pc-status[hidden], .pc-retry[hidden], .pc-catalog > [hidden] { display: none; }
.pc-retry { border: 1px solid var(--pc-line); padding: 8px 14px; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.pc-catalog { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px 16px; }
.pc-catalog > li { min-width: 0; position: relative; }
.pc-catalog > li:has(.is-active) { z-index: 2; }
.pc-record { display: block; height: 100%; color: var(--theme-text, #202020); text-decoration: none; }
.pc-sleeve { position: relative; display: block; width: 100%; aspect-ratio: 1; background: var(--pc-paper); transition: opacity .22s ease, filter .22s ease, transform .25s ease; }
.pc-sleeve::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0; border: 1px solid rgb(255 255 255 / 45%); transition: opacity .22s ease; }
.pc-catalog .is-active .pc-sleeve { transform: scale(1.02); }
.pc-catalog .is-active .pc-sleeve::after { opacity: 1; }
.pc-catalog:has(.is-active) .pc-record:not(.is-active) .pc-sleeve { opacity: .62; filter: saturate(.6); }
.pc-sleeve img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.pc-cover-fallback { display: flex; align-items: center; justify-content: center; height: 100%; padding: 15px; box-sizing: border-box; text-align: center; font: 400 20px/1.3 system-ui, sans-serif; }
.pc-cover-fallback[hidden] { display: none; }
.pc-label { display: grid; grid-template-columns: 18px minmax(0, 1fr) 12px; align-items: start; gap: 6px; padding: 12px 9px; min-height: 54px; box-sizing: border-box; background: var(--pc-paper); }
.pc-number { color: var(--pc-muted); font: 9px/1.6 ui-monospace, monospace; padding-top: 1px; }
.pc-name { font-size: 11px; font-weight: 400; line-height: 1.45; }
.pc-open { font-size: 13px; line-height: 1.2; color: var(--pc-muted); }
.pc-record:focus-visible .pc-name, .pc-record:focus-visible .pc-open { color: var(--pc-accent); }
@media (hover: hover) and (pointer: fine) {
  .pc-record:hover .pc-name, .pc-record:hover .pc-open { color: var(--pc-accent); }
}

@media (max-width: 1000px) {
  .pc-catalog { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .pc-main { padding: 0; }
  .pc-catalog { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .pc-collection { padding-top: 48px; }
  .pc-filters { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; }
  .pc-filters button { justify-content: flex-start; gap: 5px; font-size: 11px; min-height: 44px; padding: 10px 8px; }
  .pc-catalog { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 12px; }
  .pc-label { padding: 10px 7px; gap: 5px; grid-template-columns: 15px minmax(0, 1fr) 10px; }
  .pc-name { font-size: 10px; }
  .pc-number { font-size: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .podcasts-page, .pc-main, .pc-atmosphere, .pc-sleeve, .pc-sleeve::after { transition: none; }
  .pc-atmosphere-layer { animation: none; }
  .pc-catalog .is-active .pc-sleeve { transform: none; }
}