/* Contractors' directory — the plain card grid on the front page (markup from
   cards.js). A warm off-white panel fills #space in place of the dark frame;
   the finder sits across its top; white cards with a photo, the trade and
   city, the crew's name, their pitch and a button. Nothing moves but a lift
   on hover. The panel scrolls on its own; the page still scrolls to About. */

#space.cards-on { touch-action: auto; }
#space.cards-on #hint-text { display: none; } /* nothing to explain; keep the About link as a chip */
#space.cards-on .hint { right: 22px; color: #6b6253; background: rgba(255, 255, 255, .85); border: 1px solid #ddd3c0; padding: 4px 8px; }

.cards {
  position: absolute;
  inset: 0;
  z-index: 10; /* over the frame, under the corner brackets, warp buttons, finder and Oxie */
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #c9bda4 transparent;
  background: #f7f3e9;
  color: #1d1a16;
  font-family: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
.cards[hidden] { display: none; }
.cards-inner { max-width: 1260px; margin: 0 auto; padding: 86px 28px 150px; } /* clears the finder bar above and Oxie below */

/* ── Heading ─────────────────────────────────────────────────────────── */
.cards-head { text-align: center; margin: 14px 0 26px; }
.cards-kicker { font: 700 10px/1 ui-monospace, 'Cascadia Mono', Consolas, Menlo, monospace; letter-spacing: .3em; text-transform: uppercase; color: #8a7a5c; margin-bottom: 14px; }
.cards-title { font-size: clamp(34px, 5vw, 58px); font-weight: 800; letter-spacing: -.02em; text-transform: uppercase; line-height: 1; margin: 0 0 12px; color: #16130f; }
.cards-sub { max-width: 540px; margin: 0 auto; font-size: 16px; line-height: 1.5; color: #5f564a; }
.cards-count { font: 600 11px/1 ui-monospace, 'Cascadia Mono', Consolas, Menlo, monospace; letter-spacing: .14em; text-transform: uppercase; color: #8a7a5c; margin: 0 0 14px; }

/* ── The grid ────────────────────────────────────────────────────────── */
.cards-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
@media (max-width: 1180px) { .cards-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px) { .cards-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }
@media (max-width: 480px) { .cards-grid { grid-template-columns: 1fr; } }

.card { min-width: 0; }
.card-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(40, 30, 10, .06), 0 6px 18px -8px rgba(40, 30, 10, .18);
  color: inherit;
  text-decoration: none;
  overflow: hidden;
  transition: transform .2s, box-shadow .2s;
  -webkit-tap-highlight-color: transparent;
}
a.card-link:hover, a.card-link:focus-visible, .is-hot .card-link { transform: translateY(-3px); box-shadow: 0 2px 3px rgba(40, 30, 10, .08), 0 16px 30px -10px rgba(40, 30, 10, .3); }
a.card-link:focus-visible { outline: 3px solid #c88916; outline-offset: 3px; }
.is-hot .card-link { outline: 3px solid #e3ba36; outline-offset: 3px; }

.card-photo {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--tint, #8a78a8) linear-gradient(150deg, rgba(255, 255, 255, .35), rgba(255, 255, 255, 0) 60%);
  overflow: hidden;
}
.card-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.card-initials { display: none; }
.is-bare .card-initials { position: absolute; inset: 0; display: grid; place-items: center; font: 800 56px/1 ui-sans-serif, system-ui, sans-serif; letter-spacing: .02em; color: rgba(255, 255, 255, .92); }
.card-badge {
  position: absolute;
  top: 10px; left: 10px;
  padding: 4px 7px 3px;
  font: 700 9px/1 ui-monospace, 'Cascadia Mono', Consolas, Menlo, monospace;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(20, 16, 10, .62);
  border-radius: 4px;
  backdrop-filter: blur(4px);
}

.card-body { display: flex; flex-direction: column; flex: 1 1 auto; gap: 6px; padding: 14px 16px 16px; }
.card-cat { font: 600 10.5px/1.3 ui-monospace, 'Cascadia Mono', Consolas, Menlo, monospace; letter-spacing: .12em; text-transform: uppercase; color: #8a7a5c; margin: 0; }
.card-name { font-size: 17px; font-weight: 800; line-height: 1.25; letter-spacing: -.01em; margin: 0; color: #16130f; overflow-wrap: anywhere; }
.card-pitch { font-size: 13.5px; line-height: 1.45; color: #5f564a; margin: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.card-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 10px; }
.card-meta { font-size: 11px; line-height: 1.3; color: #8a7a5c; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-btn {
  flex: 0 0 auto;
  font: 700 11px/1 ui-monospace, 'Cascadia Mono', Consolas, Menlo, monospace;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #1a1206;
  background: #e3ba36;
  border: 1px solid #c9a227;
  border-radius: 6px;
  padding: 8px 11px;
  white-space: nowrap;
  transition: background .15s;
}
a.card-link:hover .card-btn, a.card-link:focus-visible .card-btn { background: #f3d843; }

/* the last card: list your own crew */
.card-join .card-link { background: #fbf8f0; border: 2px dashed #d9c89a; box-shadow: none; }
.card-photo.is-join { display: grid; place-items: center; background: #f4ecd6; }
.card-plus { font: 200 72px/1 ui-sans-serif, system-ui, sans-serif; color: #c88916; transition: transform .3s; }
.card-join .card-link:hover .card-plus { transform: rotate(90deg) scale(1.1); }

/* the finder found nothing */
.cards-note { margin: 0 0 18px; padding: 14px 16px; font-size: 14px; font-weight: 600; color: #4b3d1f; background: #fff6c9; border-radius: 10px; }
.cards-note[hidden] { display: none; }

/* ── Finder: it shares the top edge with HOME and the two warp buttons ──── */
/* wide windows: a bar across the top, centred between them */
@media (min-width: 1200px) {
  #space.cards-on .finder { left: 50%; top: 16px; width: auto; transform: translateX(-50%); flex-direction: row; align-items: center; gap: 10px; padding: 7px 10px; }
  #space.cards-on .finder-title { display: none; }
  #space.cards-on .finder label { flex-direction: row; font-size: 0; } /* the selects and the placeholder already say what they are */
  #space.cards-on .finder select, #space.cards-on .finder input { width: 138px; }
  #space.cards-on .finder-count { white-space: nowrap; }
}
/* narrower: collapse behind FIND, as phones do — between the buttons where there is room, else under them */
@media (min-width: 641px) and (max-width: 1199px) {
  #space.cards-on .finder-toggle {
    display: inline-block;
    position: absolute;
    left: 22px; top: 58px;
    z-index: 1600;
    font: inherit;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
    color: #ffd27a;
    background: rgba(26, 20, 14, .9);
    border: 1px solid var(--line);
    padding: 8px 12px;
    cursor: pointer;
  }
  #space.cards-on .finder-toggle[hidden] { display: none; }
  #space.cards-on .finder { display: none; top: 96px; }
  #space.cards-on .finder.open { display: flex; }
}
@media (min-width: 800px) and (max-width: 1199px) {
  #space.cards-on .finder-toggle { left: 50%; top: 18px; transform: translateX(-50%); }
  #space.cards-on .finder { left: 50%; top: 56px; transform: translateX(-50%); }
}
@media (max-width: 640px) {
  .cards-inner { padding: 92px 14px 120px; }
  .cards-head { margin: 0 0 16px; }
  .cards-sub { font-size: 14px; }
  #space.cards-on .finder-toggle { top: 50px; } /* under HOME and the warp buttons */
  #space.cards-on .finder { top: 82px; }
}
/* a short window (a laptop): a compact heading, so the cards are in view */
@media (max-height: 720px) and (min-width: 641px) {
  .cards-inner { padding-top: 78px; }
  .cards-head { margin: 0 0 16px; }
  .cards-kicker { margin-bottom: 8px; }
  .cards-title { font-size: clamp(26px, 3.4vw, 36px); margin-bottom: 6px; }
  .cards-sub { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .card-link, .card-plus, .card-btn { transition: none; }
  a.card-link:hover, a.card-link:focus-visible, .is-hot .card-link { transform: none; }
}