/* ==========================================================================
   Souvenirs page: the three full collections behind tabs.
   ========================================================================== */

.page { width: var(--wrap); margin: 0 auto; padding: clamp(32px, 6vw, 72px) 0 150px; }

.page-head { display: grid; justify-items: start; gap: clamp(16px, 2.4vw, 26px); margin-bottom: clamp(28px, 4vw, 44px); }
.page-ball {
  width: clamp(64px, 8vw, 92px);
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  transform-origin: 67% 0;
}
.page-ball .art { width: 100%; }

.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.tabs button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 0 20px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--text-2);
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.tabs button:hover { color: var(--text); border-color: var(--text-2); }
.tabs button[aria-selected='true'] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.tabs .n { font-variant-numeric: tabular-nums; opacity: 0.75; font-weight: 500; }

.panel:focus { outline: none; }

.panel-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 24px;
  padding: 18px 0 22px;
  border-top: 1px solid var(--line);
}
.panel-meta { color: var(--text-2); }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(clamp(150px, 18vw, 240px), 1fr));
  gap: clamp(8px, 1.2vw, 14px);
}
.grid .tile { aspect-ratio: 1; }

/* Skeleton while a manifest loads */
.grid .ghost { aspect-ratio: 1; border-radius: var(--r-media); background: var(--bg-2); }

@media (max-width: 640px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
  .tabs button { padding: 0 16px; }
}

@media (prefers-reduced-motion: no-preference) {
  .page-head > * { animation: rise 0.9s var(--ease) both; }
  /* Same swing as on the home page; listed after the generic entrance so it is not overridden */
  .page-head > .page-ball { animation: rise 0.9s var(--ease) both, sway 15s linear -9s infinite; }
  .page-head > :nth-child(2) { animation-delay: 0.08s; }
  .page-head > :nth-child(3) { animation-delay: 0.16s; }

  @keyframes pulse { 50% { opacity: 0.5; } }
  .grid .ghost { animation: pulse 1.4s ease-in-out infinite; }
}