/* ============================================================
   The Catalogue — the record of the collection
   ============================================================ */
.cat {
  padding: clamp(6rem, 11vh, 8.5rem) clamp(1.1rem, 4vw, 3rem) clamp(3rem, 6vw, 5rem);
  max-width: 1080px; margin: 0 auto;
}

.cat-head { text-align: center; max-width: 44rem; margin: 0 auto clamp(2rem, 4vw, 3rem) }
.cat-title {
  font-family: var(--display); font-weight: 300; letter-spacing: .01em;
  font-size: clamp(2.4rem, 7.5vw, 4.4rem); line-height: 1.02; margin: .4rem 0 1.1rem;
}
.cat-title em { font-style: italic; color: var(--accent-soft) }
.cat-lede { color: var(--dim); line-height: 1.75; font-size: clamp(.96rem, 1.4vw, 1.06rem) }

/* ---------- the desk ---------- */
.cat-tools {
  /* The nav is fixed and 96px tall at rest, ~62px once it tightens on
     scroll. Sticking the desk at 0 would park it underneath. */
  position: sticky; top: 4.2rem; z-index: 5;
  padding: 1rem 0 .9rem; margin-bottom: 1.6rem;
  /* opaque under the chips, feathered only at the very bottom edge —
     at 62% the entries scrolled visibly through the filter row */
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg) 88%, transparent 100%);
  backdrop-filter: blur(6px);
}
.cat-search { position: relative; display: flex; align-items: center; gap: .9rem; margin-bottom: .85rem }
.cat-search input {
  flex: 1 1 auto; min-width: 0;
  font-family: var(--serif); font-size: .96rem; color: var(--ink);
  background: rgba(236, 230, 218, .04);
  border: 1px solid var(--line); border-radius: 2px;
  padding: .78rem 1rem;
  transition: border-color .35s ease, background .35s ease;
}
.cat-search input::placeholder { color: var(--dimmer); font-style: italic }
.cat-search input:focus { outline: none; border-color: var(--accent); background: rgba(184, 152, 92, .07) }
.cat-search input::-webkit-search-cancel-button { filter: invert(.7) }
.cat-count {
  flex: 0 0 auto; font-size: .6rem; letter-spacing: .24em; text-transform: uppercase;
  color: var(--dimmer); font-variant-numeric: tabular-nums;
}

.cat-rooms { display: flex; flex-wrap: wrap; gap: .4rem }
.cat-room {
  cursor: pointer; font: inherit; font-size: .58rem;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--dimmer); background: transparent;
  border: 1px solid var(--line-soft); border-radius: 2px;
  padding: .42rem .78rem;
  transition: color .3s ease, border-color .3s ease, background .3s ease;
}
.cat-room:hover { color: var(--ink); border-color: rgba(184, 152, 92, .45) }
.cat-room.is-on { color: #140f07; background: var(--accent-soft); border-color: var(--accent-soft) }

/* ---------- the entries ---------- */
.cat-list { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(1.1rem, 2.4vw, 1.9rem) }
.cat-item {
  display: grid; grid-template-columns: clamp(150px, 22vw, 232px) 1fr;
  gap: clamp(1rem, 2.6vw, 2rem); align-items: start;
  padding-bottom: clamp(1.1rem, 2.4vw, 1.9rem);
  border-bottom: 1px solid var(--line-soft);
  scroll-margin-top: 8rem;
}
.cat-item:last-child { border-bottom: 0 }
/* the entry someone was linked to */
.cat-item.is-lit { animation: catLit 2.6s ease forwards }
@keyframes catLit {
  0%, 55% { background: rgba(184, 152, 92, .10) }
  100% { background: transparent }
}

.cat-plate {
  position: relative; display: block; overflow: hidden; border-radius: 2px;
  border: 1px solid var(--line); aspect-ratio: 1;
  background: #0d0b09;
}
/* Contained, not cropped. The plates are not a common shape — they run
   from 1320x1160 to 1050x1400 — and a square crop takes the top off a
   portrait. The square frame keeps the column tidy and reserves the space
   before the image arrives, so nothing jumps as they load in. */
.cat-plate img {
  width: 100%; height: 100%; object-fit: contain; display: block;
  filter: grayscale(.34) contrast(1.04);
  transition: transform .8s var(--ease), filter .6s ease;
}
.cat-plate:hover img, .cat-plate:focus-visible img { transform: scale(1.05); filter: grayscale(0) contrast(1.08) }
.cat-plate-go {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 1.6rem .7rem .55rem; text-align: center;
  font-size: .54rem; letter-spacing: .24em; text-transform: uppercase; color: var(--ink);
  background: linear-gradient(180deg, transparent, rgba(6, 5, 4, .92));
  opacity: 0; transform: translateY(6px);
  transition: opacity .4s ease, transform .4s var(--ease);
}
.cat-plate:hover .cat-plate-go, .cat-plate:focus-visible .cat-plate-go { opacity: 1; transform: none }

.cat-body { min-width: 0 }
.cat-no {
  display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap;
  font-size: .56rem; letter-spacing: .3em; text-transform: uppercase; color: var(--dimmer);
  margin-bottom: .5rem;
}
.cat-no b { color: var(--accent); font-weight: 400 }
.cat-name {
  font-family: var(--display); font-weight: 300; line-height: 1.1;
  font-size: clamp(1.4rem, 3vw, 2.1rem); margin: 0 0 .7rem; color: var(--ink);
}
.cat-story { color: var(--dim); line-height: 1.78; font-size: clamp(.9rem, 1.25vw, 1rem); margin: 0 }
.cat-aside {
  margin: .95rem 0 0; padding-left: 1.1rem;
  border-left: 1px solid rgba(184, 152, 92, .32);
  color: var(--dimmer); font-style: italic; line-height: 1.7;
  font-size: clamp(.84rem, 1.15vw, .92rem);
}
.cat-aside span {
  display: block; font-style: normal; font-size: .54rem;
  letter-spacing: .28em; text-transform: uppercase; color: var(--accent);
  margin-bottom: .3rem;
}

.cat-empty { text-align: center; color: var(--dim); font-style: italic; padding: 3rem 0; line-height: 1.8 }
.cat-clear {
  font: inherit; font-style: italic; cursor: pointer; color: var(--accent-soft);
  background: none; border: 0; border-bottom: 1px solid rgba(184, 152, 92, .5); padding: 0;
}
.cat-clear:hover { color: var(--ink) }

@media (max-width: 620px) {
  .cat-item { grid-template-columns: 1fr; gap: .9rem }
  .cat-plate { max-width: 220px }
  .cat-tools { top: 3.6rem }
  /* Wrapped, the fifteen rooms stacked four deep and the sticky desk took
     a quarter of a phone screen and kept it. One scrolling row instead. */
  .cat-rooms {
    flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain;
    scrollbar-width: none; padding-bottom: .15rem;
    -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent);
    mask-image: linear-gradient(90deg, #000 88%, transparent);
  }
  .cat-rooms::-webkit-scrollbar { display: none }
  .cat-room { flex: 0 0 auto }
}
@media (prefers-reduced-motion: reduce) {
  .cat-plate img, .cat-plate-go { transition: none }
  .cat-item.is-lit { animation: none; background: rgba(184, 152, 92, .10) }
}