/* Creators (D1): a compact visual directory. Search in the header, chips, a grid of faces. */

.pk-creators { padding: 22px clamp(16px, 3vw, 40px) 72px; }
.pk-creators-head { display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; margin-bottom: 14px; }
.pk-creators-head h1 { margin: 0; font-size: clamp(26px, 3vw, 34px); font-weight: 750; letter-spacing: -.035em; line-height: 1.1; }
.pk-creators-search { position: relative; flex: 1 1 320px; max-width: 460px; }
.pk-creators-search .pk-ico { position: absolute; left: 13px; top: 50%; width: 16px; height: 16px; margin-top: -8px; color: #8f9596; pointer-events: none; }
.pk-creators-q { padding-left: 38px !important; border-radius: 999px !important; }

.pk-creators-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 20px; }
.pk-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0; }
.pk-chip { display: inline-flex; align-items: center; min-height: 32px; padding: 5px 12px; border: 1px solid #303536; border-radius: 999px; background: #141718; color: #c5c8c8; font-size: 12.5px; font-weight: 600; text-decoration: none; transition: border-color var(--pk-dur-fast, 120ms) ease, color var(--pk-dur-fast, 120ms) ease, background-color var(--pk-dur-fast, 120ms) ease; }
.pk-chip:hover { color: #fff; border-color: #9a4b3b; }
.pk-chip.is-on { color: #fff; border-color: #e83c29; background: #d62e1c; }
.pk-creators-location { margin-left: auto; }
.pk-creators-location-input { min-height: 32px !important; width: 160px; padding: 5px 12px !important; border-radius: 999px !important; font-size: 12.5px !important; }

.pk-creators-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.pk-creator-card { position: relative; display: grid; min-width: 0; overflow: hidden; border: 1px solid var(--pk-border); border-radius: 14px; background: var(--pk-surface); transition: transform var(--pk-dur-base, 220ms) var(--pk-ease-move, cubic-bezier(.2, .8, .2, 1)), border-color var(--pk-dur-fast, 120ms) ease; }
.pk-creator-card:hover { border-color: #5a3a34; transform: translateY(-2px); }
.pk-creator-card[hidden] { display: none; }
.pk-creator-card-link { display: grid; justify-items: center; gap: 3px; padding: 0 14px 14px; color: var(--pk-ink); text-align: center; text-decoration: none; }
.pk-creator-card-strip { display: block; width: calc(100% + 28px); height: 46px; margin: 0 -14px 0; background: linear-gradient(120deg, #1d2223, #151819 60%, #1a1416); }
.pk-creator-card:nth-child(3n) .pk-creator-card-strip { background: linear-gradient(120deg, #1b1c22, #151819 60%, #1a1a14); }
.pk-creator-card:nth-child(3n + 1) .pk-creator-card-strip { background: linear-gradient(120deg, #22201b, #151819 60%, #141a1a); }
.pk-creator-card-face { display: grid; place-items: center; width: 64px; height: 64px; margin-top: -32px; overflow: hidden; border: 3px solid var(--pk-surface); border-radius: 50%; background: #2a1e1b; }
.pk-creator-card-face .pk-avatar { width: 100%; height: 100%; font-size: 22px; }
.pk-creator-card-name { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px; margin-top: 8px; font-size: 15px; font-weight: 700; letter-spacing: -.01em; line-height: 1.2; }
.pk-creator-card-name .pk-official-mark { margin-left: 2px; font-size: 10px; padding: 1px 7px; }
.pk-creator-card-handle { color: var(--pk-muted); font-size: 12px; }
.pk-creator-card-craft { margin-top: 4px; color: #d4d7d7; font-size: 13px; }
.pk-creator-card-place { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 10px; color: var(--pk-muted); font-size: 12px; }
.pk-creator-card-open { display: inline-flex; align-items: center; gap: 5px; color: #c9e9d6; }
.pk-creator-card-open i { width: 7px; height: 7px; border-radius: 50%; background: #34c759; box-shadow: 0 0 0 2px rgba(52, 199, 89, .18); }
.pk-creator-card-actions { display: grid; justify-items: center; gap: 4px; padding: 0 14px 14px; }
.pk-creator-card-follow { min-height: 34px; padding: 6px 16px; border-radius: 999px; font-size: 12.5px; }
.pk-creator-card-follow[aria-pressed="true"] { color: var(--pk-muted); }
.pk-creator-card-status { margin: 0; color: var(--pk-muted); font-size: 11px; text-align: center; }
.pk-creator-card-status:empty { display: none; }

@media (max-width: 759px) {
  .pk-creators { padding: 14px 16px 96px; }
  .pk-creators-head { gap: 10px; }
  .pk-creators-search { flex-basis: 100%; max-width: none; }
  .pk-creators-location { margin-left: 0; flex-basis: 100%; }
  .pk-creators-location-input { width: 100%; }
  .pk-creators-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .pk-creator-card-link { padding: 0 10px 10px; }
  .pk-creator-card-strip { width: calc(100% + 20px); margin: 0 -10px; height: 38px; }
  .pk-creator-card-face { width: 56px; height: 56px; margin-top: -28px; }
  .pk-creator-card-name { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) { .pk-creator-card:hover { transform: none; } }