/* Grid pages (merch that slaps, winners in our hearts): editorial cards with a blue edge, product shot, candidate, item, one-line why. */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px}
.card{position:relative;display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-left:5px solid var(--dem);text-decoration:none;color:var(--fg);overflow:hidden;min-width:0;transition:transform .15s,box-shadow .15s}
@media (hover:hover){.card:hover{transform:translateY(-4px);box-shadow:0 12px 26px rgba(10,20,50,.18)}}
.card:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accent)}
.card:active{transform:scale(.99)}
.card img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;background:#fff}
.card.is-out img{opacity:.5;filter:grayscale(.6)}
.body{display:flex;flex-direction:column;gap:6px;padding:10px 12px 14px;min-width:0}
.who{display:flex;flex-direction:column;gap:1px}
.nm{font-weight:800;font-size:1.2rem;line-height:1.05;letter-spacing:.02em}
.off{font-size:.7rem;color:var(--muted);letter-spacing:.06em;text-transform:uppercase;font-weight:500}
.res{font-size:.74rem;color:var(--accent-text);font-weight:500;letter-spacing:.02em;margin-top:2px}
.pt{font-weight:500;font-size:.95rem;line-height:1.3;display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.pr{font-weight:800;color:var(--accent-text);white-space:nowrap;font-variant-numeric:tabular-nums}
.why{margin:0;font-family:var(--serif);font-size:.88rem;line-height:1.4;color:var(--muted)}
.card[hidden]{display:none}
@media (prefers-reduced-motion:reduce){.card{transition:none}.card:hover,.card:active{transform:none}}
/* Phones: one compact row per item (photo left, text right) so long lists are quick to scan. */
@media (max-width:560px){
  .grid{grid-template-columns:1fr;gap:12px}
  .card{flex-direction:row;align-items:flex-start;border-left-width:4px}
  .card img{width:116px;height:116px;aspect-ratio:auto;flex:none}
  .body{padding:10px 12px;gap:4px;flex:1}
  .nm{font-size:1.05rem}
  .off{font-size:.72rem}
  .pt{font-size:.9rem}
  .why{font-size:.84rem;display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .badge{top:6px;left:6px}
}