/* A continuous warm canvas; only the pets and quiet labels occupy it. */
body.catalogue-page { --paper: #eeece4; }
.catalogue-page .site-header-inner { max-width: none; }
.catalogue-heading { padding: 16px var(--gutter) 8px; }
.catalogue-heading h1 { margin: 0 0 6px; font-size: 22px; line-height: 1.2; }
.catalogue-heading p { margin: 0; color: var(--muted); font: 11px/1.6 var(--mono); }
.catalogue-heading a:hover { color: var(--ink); text-decoration: underline; }
.catalogue-world { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 40px; padding: 24px var(--gutter); }
.catalogue-pet { display: block; min-width: 0; text-align: center; color: var(--ink); border-radius: 12px; }
.catalogue-pet .pet-preview, .catalogue-no-preview { aspect-ratio: 4 / 3; width: 100%; }
.catalogue-no-preview { display: grid; place-items: center; color: var(--muted); font: 11px var(--mono); }
.catalogue-pet h2 { margin: 10px 0 5px; font: 600 13px/1.4 var(--sans); }
.catalogue-pet h2 span { margin-left: 4px; font: 11px var(--mono); color: var(--muted); }
.catalogue-pet > p { margin: 0; color: var(--muted); font: 10px/1.5 var(--mono); }
.catalogue-pet:hover h2, .catalogue-pet:focus-visible h2 { text-decoration: underline; text-underline-offset: 4px; }
.catalogue-empty { max-width: 360px; color: var(--muted); font-size: 14px; line-height: 1.7; }
.catalogue-tools { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 24px; padding: 16px var(--gutter) max(16px, env(safe-area-inset-bottom)); }
.catalogue-controls, .catalogue-pages { display: flex; align-items: center; gap: 12px; }
.catalogue-hint, .catalogue-pages { margin: 0; color: var(--muted); font: 11px/1.5 var(--mono); }
.catalogue-controls button { min-width: 44px; min-height: 44px; padding: 8px; border: 0; background: transparent; color: var(--ink); cursor: pointer; font: 13px var(--mono); }
.catalogue-controls button[data-zoom="in"], .catalogue-controls button[data-zoom="out"] { font-size: 22px; }
.catalogue-controls button:hover { background: transparent; text-decoration: underline; text-underline-offset: 5px; }
.catalogue-controls .preview-motion { color: var(--muted); font-size: 11px; }
.catalogue-pages a { display: inline-flex; align-items: center; min-height: 44px; }
.catalogue-pages a:hover { color: var(--ink); text-decoration: underline; }
.catalogue-page .site-footer { display: none; }
/* Enhance the ordinary link grid only after the camera is ready. */
.catalogue-page:has(.is-canvas) { overflow: hidden; }
.is-canvas { position: fixed; inset: 76px 0 0; display: flex; flex-direction: column; }
.is-canvas .catalogue-heading { flex: none; }
.is-canvas .catalogue-viewport { position: relative; flex: 1; min-height: 0; overflow: hidden; touch-action: none; cursor: grab; outline-offset: -4px; }
.is-canvas .catalogue-world { position: absolute; inset: 0 auto auto 0; padding: 0; gap: 32px; grid-template-columns: repeat(var(--catalogue-columns), 280px); transform-origin: 0 0; will-change: transform; }
.is-canvas .catalogue-pet { width: 280px; height: 270px; user-select: none; -webkit-user-drag: none; }
.is-canvas .is-dragging, .is-canvas .is-dragging a { cursor: grabbing; }
.is-canvas .catalogue-tools { flex: none; }
@media (max-width: 780px) {
    .is-canvas { top: 104px; }
    .catalogue-heading { padding-top: 12px; }
    .catalogue-heading h1 { font-size: 20px; }
    .catalogue-hint { display: none; }
    .catalogue-tools { justify-content: center; gap: 0 20px; padding-top: 4px; }
    .catalogue-controls { gap: 4px; }
    .catalogue-pages { font-size: 10px; }
}
@media print {
    .catalogue-page:has(.is-canvas) { overflow: visible; }
    .is-canvas { position: static; display: block; }
    .is-canvas .catalogue-viewport { overflow: visible; }
    .is-canvas .catalogue-world { position: static; transform: none !important; width: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .catalogue-tools { display: none; }
}