/* site/assets/cards.css — the door cards. Green 1px rules on flat plum; no shadows-as-glow. */
.deck {
  max-width: 1080px; width: 100%; margin: 0 auto 8vh;
  display: grid; gap: var(--gap);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  /* Falling cards only become visible inside the deck, so they drop into their slots
     instead of crashing through the title. Small outset keeps hover lift unclipped. */
  clip-path: inset(-8px -8px -8px -8px);
}
.card {
  position: relative; display: flex; flex-direction: column; gap: .5rem;
  min-height: 190px; padding: 22px 22px 18px;
  color: var(--ink); text-decoration: none;
  background: var(--plum-800);
  border: 1px solid var(--leaf-dim);
  border-top: 3px solid var(--leaf);
  transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}
.card h2 { font-size: 1.45rem; font-weight: 800; letter-spacing: -.01em; }
.card p { color: var(--ink-dim); font-size: .95rem; }
.tag {
  align-self: flex-start; font-size: .7rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--leaf);
}
.host {
  margin-top: auto; padding-top: .8rem; border-top: 1px dashed var(--plum-500);
  font: .8rem/1.2 ui-monospace, "Cascadia Mono", Consolas, monospace; color: var(--ink-dim);
}
/* Lock mark: these doors sit behind Cloudflare Access. A file, not a data: URI (CSP img-src 'self'). */
.locked .tag::before {
  content: ""; display: inline-block; width: .8em; height: .95em; margin-right: .5em;
  vertical-align: -.12em; background: url(/assets/lock.svg) no-repeat center / contain;
}
.card:hover, .card:focus-visible {
  background: var(--plum-700); border-color: var(--leaf); transform: translateY(-3px);
}
.card::after {          /* a green rule that draws across on hover */
  content: ""; position: absolute; left: 0; bottom: -1px; height: 2px; width: 0;
  background: var(--leaf); transition: width .35s ease;
}
.card:hover::after, .card:focus-visible::after { width: 100%; }
.card em { color: var(--leaf); font-style: italic; }
