/* ═══ the catalog ═══════════════════════════════════════════════════
   One look for both the /work/ page and the "just show me the work"
   overlay in the room: same header, chips and table. Everything is scoped
   to .catalog-view so it can't leak into the room's own styles. */
.catalog-view {
  --c-bg: #fafaf7; --c-fg: #111; --c-dim: #777; --c-line: #e5e5e0; --c-soft: #f0efe8;
  --c-mono: 'JetBrains Mono', ui-monospace, monospace;
  background: var(--c-bg); color: var(--c-fg); font: 16px/1.5 'Arimo', Arial, sans-serif;
}
.catalog-view a { color: inherit; }

/* top: the spinning (am), with a control on either side; stays put while you scroll */
.cat-top {
  position: sticky; top: 0; z-index: 3; height: 132px; padding: 0 16px;
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; /* equal sides: the (am) stays centred */
}
/* its background is a layer that fades out below the bar, so there's no hard edge */
.cat-top::before {
  content: ''; position: absolute; inset: 0 0 -28px; z-index: -1; pointer-events: none;
  background: var(--c-bg);
  -webkit-mask-image: linear-gradient(#000 60%, transparent); mask-image: linear-gradient(#000 60%, transparent);
}
.cat-top > :first-child { justify-self: start; }
.cat-top > :last-child { justify-self: end; }
/* fixed places, so the (am) stays in the middle even when a side is empty */
.cat-top > .cat-mark { grid-column: 2; grid-row: 1; }
.cat-top > .cat-mark ~ * { grid-column: 3; grid-row: 1; }
.cat-btn { font: 13px var(--c-mono); padding: 6px 10px; border: 1px solid var(--c-fg); border-radius: 999px; background: var(--c-bg); color: var(--c-fg); text-decoration: none; cursor: pointer; white-space: nowrap; }
.cat-btn:hover { background: var(--c-soft); }
.cat-btn[aria-pressed="true"] { background: var(--c-fg); color: var(--c-bg); }
/* the sound button, with back / skip beside it while a song plays */
.top-player { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 5px; min-width: 0; max-width: 100%; }
.top-btns { display: inline-flex; align-items: center; gap: 6px; }
.top-player[hidden], .top-skip[hidden], .top-np[hidden] { display: none; }
/* the song's name, under the buttons: always in view while the page scrolls (desktop) */
.top-np { font: 11px var(--c-mono); opacity: .75; max-width: min(320px, 100%); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top-np a { text-decoration: none; } .top-np a:hover { text-decoration: underline; }
@media (min-width: 701px) { html .cat-main .now-playing { display: none; } } /* desktop: it's in the header instead */
.top-skip { padding: 6px 9px; font-size: 12px; line-height: 1; }
@media (max-width: 700px) { .top-skip, .top-np { display: none !important; } } /* phones: the "playing" line under the intro instead, so the (am) keeps its room */
.cat-mark { position: relative; width: 320px; height: 128px; display: grid; place-items: center; }
.cat-mark canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; touch-action: none; opacity: 0; transition: opacity .4s; }
.cat-mark .cat-mark-text { font: 700 44px 'Arimo', Arial, sans-serif; letter-spacing: -.03em; text-decoration: none; transition: opacity .3s; }
.cat-mark.ready canvas { opacity: 1; }
.cat-mark.ready .cat-mark-text { opacity: 0; pointer-events: none; }
/* with scripts running, the plain-text (am) never shows (the 3D fades in instead);
   it's only for no JavaScript, or a device that can't draw the 3D (.no-gl) */
html.js .cat-mark:not(.no-gl) .cat-mark-text { opacity: 0; pointer-events: none; }

/* heading */
.cat-main { max-width: 980px; margin: 0 auto; padding: 4px 16px 64px; }
.cat-main .label { font: 12px var(--c-mono); color: var(--c-dim); margin: 0 0 10px; }
.cat-main h1 { font: 700 clamp(40px, 8vw, 72px)/1 'Arimo', Arial, sans-serif; letter-spacing: -.03em; margin: 0 0 12px; }
.cat-main .intro { font-size: 17px; color: #444; max-width: 60ch; margin: 0; }
.cat-main .contact, .cat-main .status { font: 13px var(--c-mono); margin: 6px 0 0; }
.cat-main .status { color: var(--c-dim); }

/* filters */
.cat-main .chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 28px 0 18px; }
.cat-main .chip { font: 12px var(--c-mono); padding: 6px 12px; border-radius: 999px; border: 1px solid #ccc; background: none; color: var(--c-fg); text-decoration: none; cursor: pointer; }
.cat-main .chip.on { background: var(--c-fg); color: #fff; border-color: var(--c-fg); }

/* the list */
.cat-main table { width: 100%; border-collapse: collapse; font-size: 15px; }
.cat-main th { text-align: left; font: 11px var(--c-mono); color: #888; padding: 8px 6px; border-bottom: 1px solid var(--c-fg); }
.cat-main td { padding: 10px 6px; border-bottom: 1px solid var(--c-line); vertical-align: middle; }
.cat-main tbody tr:hover td, .cat-main tbody tr:focus-within td { background: var(--c-soft); }
.cat-main .mono { font: 13px var(--c-mono); white-space: nowrap; }
.cat-main .t { font-weight: 700; }
.cat-main .t a { text-decoration: none; }
.cat-main .t a:hover { text-decoration: underline; }
.cat-main .t small { display: block; font: 400 13px 'Arimo', Arial, sans-serif; color: #555; }
.cat-main .cov { width: 52px; }
.cat-main .cov img, .cat-main .cov span { width: 44px; height: 44px; border-radius: 4px; display: block; object-fit: cover; background: linear-gradient(160deg, #dfe6ff, #f7d6c8); }
.cat-main .ph { font: 10px var(--c-mono); padding: 1px 5px; border-radius: 3px; background: rgba(255, 200, 0, .25); }
.cat-main .empty { color: var(--c-dim); padding: 24px 6px; }

/* the song playing in the background, with back / skip */
.cat-main .now-playing { display: flex; align-items: center; gap: 6px; font: 13px var(--c-mono); margin: 8px 0 0; max-width: 100%; }
.cat-main .now-playing > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* one line: long titles end in … */
.np-skip { flex: none; }
.cat-main .now-playing a { text-decoration: underline; }
.np-skip { width: 24px; height: 24px; border-radius: 999px; border: 1px solid #ccc; background: none; color: var(--c-fg); font: 11px/1 var(--c-mono); cursor: pointer; display: inline-grid; place-items: center; }
.np-skip:hover { background: var(--c-soft); }
/* phones never see the room */
@media (max-width: 700px) and (pointer: coarse) { .cat-top .room-link { display: none; } }
@media (max-width: 640px) {
  .cat-top { height: 104px; padding: 0 10px; }
  .cat-mark { width: 150px; height: 96px; }
  .cat-mark .cat-mark-text { font-size: 34px; }
  .cat-btn { font-size: 12px; padding: 5px 8px; }
  .cat-main .hide-sm { display: none; }
}
@media (prefers-reduced-motion: reduce) { .cat-mark canvas, .cat-mark .cat-mark-text { transition: none; } }