/* ============================================================================
   catalog.css — the style gallery.

   The thumbnails are the content, so the chrome around them stays quiet: no
   card shadows competing with the screenshots, no coloured borders, no badges
   over the artwork. Every card is a photograph of a real page and the layout's
   only job is to get out of its way.
   ========================================================================== */

.cat-head{padding-block:clamp(48px,7vw,110px) clamp(28px,4vw,52px)}
.cat-head h1{margin-bottom:16px;max-width:18ch}
.cat-lead{color:var(--fg-muted);font-size:var(--text-lg);max-width:62ch;margin-bottom:14px}
.cat-note{color:var(--fg-muted);font-size:.9rem;max-width:62ch;opacity:.85}

.cat-body{padding-block:clamp(34px,5vw,64px)}

/* ---------- Filters ---------- */
.cat-filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:16px}
.cat-chip{
  display:inline-flex;align-items:center;gap:7px;
  padding:8px 14px;border-radius:100px;cursor:pointer;
  background:var(--bg-elev);border:1px solid var(--border-soft);color:var(--fg-muted);
  font-family:inherit;font-size:.86rem;
  transition:all var(--transition-interactive);
}
.cat-chip:hover{border-color:var(--border-accent);color:var(--fg)}
.cat-chip.is-on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:600}
.cat-chip:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.cat-n{opacity:.6;font-variant-numeric:tabular-nums;font-size:.78em}
.cat-chip.is-on .cat-n{opacity:.75}
.cat-sep{width:1px;height:22px;background:var(--border-soft);margin-inline:6px}

.cat-count{color:var(--fg-muted);font-size:.86rem;margin-bottom:clamp(20px,3vw,34px)}

/* ---------- Grid ---------- */
/* ---------- Rail ----------
   A sliding rail rather than a wall of 36 cards, and deliberately NOT an
   auto-rotating carousel: rotation hides most of the set, moves things while
   you are reading them, and takes the pace away from the visitor. This is a
   native scroll container, so trackpad, touch, shift-wheel, arrow keys and the
   scrollbar all work with no JavaScript at all. The buttons are an addition,
   not the mechanism.

   Cards are a fixed width so the snap points are even, and the rail is padded
   at the end so the last card can still snap to the left edge. */
.cat-grid{
  display:flex;gap:clamp(18px,2vw,28px);
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  scroll-padding-left:2px;
  padding:4px 0 18px;
  /* room for the last card to reach the left edge */
  scroll-padding-inline-end:100%;
}
.cat-grid > *{scroll-snap-align:start;flex:0 0 clamp(280px,29vw,380px)}
.cat-grid::after{content:"";flex:0 0 max(0px,calc(50% - 190px))}

/* Keep the native scrollbar — it is the honest affordance for how far along
   you are, and hiding it is why so many rails feel like they have no end. */
.cat-grid{scrollbar-width:thin;scrollbar-color:var(--border-accent) transparent}
.cat-grid::-webkit-scrollbar{height:8px}
.cat-grid::-webkit-scrollbar-thumb{background:var(--border-accent);border-radius:100px}
.cat-grid::-webkit-scrollbar-track{background:transparent}
.cat-grid:focus-visible{outline:2px solid var(--accent);outline-offset:6px}

/* Smooth only when the visitor has not asked for less motion. */
@media (prefers-reduced-motion: no-preference){
  .cat-grid{scroll-behavior:smooth}
}

/* ---------- Rail controls ---------- */
.cat-railhead{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px}
.cat-nav{display:flex;gap:8px}
.cat-arrow{
  width:40px;height:40px;border-radius:100px;cursor:pointer;
  display:grid;place-items:center;
  background:var(--bg-elev);border:1px solid var(--border-soft);color:var(--fg);
  transition:border-color .18s ease,opacity .18s ease;
}
.cat-arrow:hover:not(:disabled){border-color:var(--border-accent)}
.cat-arrow:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.cat-arrow:disabled{opacity:.3;cursor:default}
.cat-pos{color:var(--fg-muted);font-size:.86rem;font-variant-numeric:tabular-nums}

/* On a phone the rail is the whole interaction — the arrows are a pointer
   affordance and only get in the way. */
@media (max-width:720px){ .cat-nav{display:none} }

.cat-card{display:block;text-decoration:none;color:inherit}

.cat-shot{
  position:relative;overflow:hidden;
  border-radius:var(--radius-lg);border:1px solid var(--border-soft);
  background:var(--bg-elev);
  aspect-ratio:4/3;
}
.cat-shot img{
  display:block;width:100%;height:100%;object-fit:cover;object-position:top center;
  transition:transform .5s var(--ease-out),opacity .4s var(--ease-out);
}
/* Still carrying data-shot means catalog.js has not given it a source yet.
   The attribute comes off at load, which is what fades the picture in. */
.cat-shot img[data-shot]{opacity:0}
.cat-card:hover .cat-shot img{transform:scale(1.03)}
.cat-card:hover .cat-shot{border-color:var(--border-accent)}
.cat-card:focus-visible .cat-shot{outline:2px solid var(--accent);outline-offset:3px}

/* The thumbnail is a crop of the top of the page, so it says "there is more
   below" only if we tell it to. */
.cat-open{
  position:absolute;left:0;right:0;bottom:0;
  padding:26px 16px 14px;
  background:linear-gradient(to top, color-mix(in srgb, #000 78%, transparent), transparent);
  color:#fff;font-size:.84rem;font-weight:600;
  opacity:0;translate:0 6px;
  transition:opacity var(--transition-interactive), translate var(--transition-interactive);
}
.cat-card:hover .cat-open,
.cat-card:focus-visible .cat-open{opacity:1;translate:0 0}

.cat-meta{padding-top:14px}
.cat-meta h3{font-size:1.12rem;margin-bottom:6px}
.cat-meta p{color:var(--fg-muted);font-size:.92rem;line-height:1.55;margin:0 0 10px}

.cat-tags{display:flex;flex-wrap:wrap;gap:6px}
.cat-tags span{
  padding:3px 9px;border-radius:100px;
  border:1px solid var(--border-soft);color:var(--fg-muted);
  font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;
}

.cat-empty{margin-top:24px;color:var(--fg-muted)}
.cat-fail{
  padding:22px;border-radius:var(--radius-lg);
  border:1px dashed var(--border-soft);color:var(--fg-muted);line-height:1.7;
}
.cat-fail code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.88em;
  padding:2px 6px;border-radius:4px;
  background:color-mix(in srgb, var(--accent) 12%, transparent);color:var(--fg);
}

/* ---------- Closing ---------- */
.cat-cta{padding-block:clamp(48px,7vw,100px)}
.cat-cta h2{margin-bottom:14px;max-width:20ch}
.cat-cta p{color:var(--fg-muted);font-size:var(--text-lg);max-width:60ch;margin-bottom:26px}

@media (max-width:560px){
  .cat-grid{grid-template-columns:1fr}
  .cat-sep{display:none}
}

@media (prefers-reduced-motion: reduce){
  .cat-shot img,.cat-open{transition:none}
  .cat-card:hover .cat-shot img{transform:none}
}