/* ============================
   Collections (polished)
   ============================ */

/* --- Theme tokens (fallbacks, safe if not in style.css) --- */
:root{
  --sand-200: #FFEAA3;
  --sand-300: #FFE38A;
  --sand-400: #FFD972;
  --amber-500:#C88924;
  --brown-900:#17100A;
  --brown-850:#1E150E;
  --brown-800:#24170E;
  --brown-750:#2B1C12;
  --brown-700:#3b2b1f;
  --ink-100: #FFF3C7;
}

/* --- Global media safety (only keep once in your project; if already in style.css, remove here) --- */
img, picture, video, canvas, svg { display:block; max-width:100%; }

/* --- Reusable media frame with controlled aspect ratio --- */
.media-frame {
  --frame-ratio: 4 / 3;         /* change to 16/9 if you prefer widescreen */
  aspect-ratio: var(--frame-ratio);
  width: 100%;
  overflow: hidden;
  border-radius: 18px;
  background: #3b2b1f;
  position: relative;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
.media-frame > img {
  width: 100%;
  height: 100%;
  object-fit: cover;             /* keep subject centered; crop overflow */
}

/* --- Cards (gentle glass look) --- */
.card {
  background: linear-gradient(180deg, rgba(255,238,170,.08), rgba(0,0,0,.25));
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 22px;
  padding: 14px;
  backdrop-filter: blur(2px);
  box-shadow:
    0 12px 40px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.05);
}

/* --- Grid for collections --- */
.collection-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.25rem;
  margin-block: .5rem 2.5rem;
}

/* --- Individual collection card --- */
.collection-card .media-frame{ border-radius:16px; }
.collection-card .media-frame::after{
  /* gold hover ring (like Staff) */
  content:"";
  position:absolute; inset:0;
  border-radius:16px;
  box-shadow: inset 0 0 0 0 rgba(255,216,120,.55);
  transition: box-shadow .25s ease;
  pointer-events:none;
}
.collection-card:hover .media-frame::after{
  box-shadow: inset 0 0 0 3px rgba(255,216,120,.55);
}
.collection-card .title{
  ma