/* ---------------- Buttons (48 default, 40 compact) ---------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 20px; border-radius: 999px; border: 1px solid transparent;
  font: 500 14px/1 var(--font-body); white-space: nowrap; flex-shrink: 0;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.16s var(--ease);
}
.btn:active { transform: scale(0.97); }
.btn .icon { font-size: 18px; }
.btn-rose { background: var(--rose); color: var(--white); }
.btn-plum { background: var(--plum); color: var(--white); }
.btn-ghost-light { background: rgba(255, 255, 255, 0.08); color: var(--white); border-color: rgba(255, 255, 255, 0.6); backdrop-filter: blur(8px); }
.btn-outline { background: transparent; color: var(--plum); border-color: var(--plum); }
.btn-white { background: var(--white); color: var(--plum); }
.btn-sm { height: 36px; padding: 0 16px; font-size: 13px; }
.btn-icon { width: 44px; padding: 0; border-color: var(--sand-200); background: var(--white); }
@media (hover: hover) and (pointer: fine) {
  .btn-rose:hover { background: var(--rose-dark); }
  .btn-plum:hover { background: var(--plum-700); }
  .btn-ghost-light:hover { background: var(--white); color: var(--plum); }
  .btn-outline:hover { background: var(--plum); color: var(--white); }
  .btn-white:hover { background: var(--blush); }
  .btn-icon:hover { border-color: var(--plum); }
  .btn .arrow { transition: transform 0.25s var(--ease); }
  .btn:hover .arrow { transform: translateX(3px); }
}
.btn[disabled] { background: var(--sand-200); color: var(--mauve-400); border-color: transparent; cursor: default; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 6px; font: 500 14px/1 var(--font-body);
  border-bottom: 1px solid currentColor; padding-bottom: 2px;
}
.link-arrow .icon { font-size: 16px; transition: transform 0.25s var(--ease); }
@media (hover: hover) and (pointer: fine) { .link-arrow:hover .icon { transform: translateX(3px); } }

/* ---------------- Photography placeholder (system striped block) ---------------- */
.ph {
  position: relative; overflow: hidden; background: repeating-linear-gradient(135deg, #f2e3d8 0 10px, #f8eee6 10px 20px);
}
.ph > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ph-label { position: absolute; left: 14px; bottom: 14px; font: 400 11px/1.2 var(--font-body); color: var(--mauve-500); }


/* Loading placeholder: a calm opacity pulse (transform/opacity only) until real data arrives. */
.skel { display: block; background: var(--sand-50); border-radius: var(--r-sm, 6px); animation: skel-pulse 1.4s ease-in-out infinite; }
.skel-line { height: 14px; margin-top: 12px; }
.skel-line.w-40 { width: 40%; }
.skel-line.w-70 { width: 70%; }
.skel-fill { position: absolute; inset: 0; border-radius: inherit; }
@keyframes skel-pulse { 50% { opacity: 0.5; } }
@media (prefers-reduced-motion: reduce) { .skel { animation: none; } }