.projects nav { margin-bottom: calc(var(--lh) * 2); flex-wrap: wrap; }
.projects .logotype { text-align: center; margin-bottom: calc(var(--lh) * 2); }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(34ch, 1fr));
  gap: var(--lh) 2ch;
}

.card {
  border: 1px solid var(--rule);
  background: var(--bg-raise);
  display: flex;
  flex-direction: column;
  scroll-margin-top: var(--lh);
}
.card summary { list-style: none; display: flex; flex-direction: column; }
.card summary::-webkit-details-marker { display: none; }
details.card:hover, details.card[open] { border-color: var(--acc); }
.card[open] { grid-column: 1 / -1; }
.card .frame {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-bottom: 1px solid var(--rule);
  background: var(--bg);
}
.card .poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.card .blank {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--rule);
  user-select: none;
}
.card .blank::before { content: "██████ ████ ████████"; }
.card iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.card.playing .frame { aspect-ratio: 16 / 9; }
.card .meta { padding: calc(var(--lh) / 2) 2ch calc(var(--lh) / 2 - 1px); display: block; }
.card .name { font-weight: 700; display: block; }
.card .name::before { content: "> "; color: var(--acc); }
details.card:hover .name, .card[open] .name { color: var(--acc); }
.card .summary { color: var(--dim); display: block; }
.card .tags { color: var(--faint); display: block; }
.card .tags b { color: var(--dim); font-weight: 400; }
.card .more { padding: 0 2ch calc(var(--lh) / 2); }
.card .more p { max-width: 68ch; }
.card .more p + p { margin-top: calc(var(--lh) / 2); }

.playbtn {
  position: absolute;
  left: 2ch;
  bottom: var(--lh);
  color: var(--acc);
  background: var(--bg);
  border: 2px solid var(--acc);
  padding: 1px 1ch;
}
details.card:hover .playbtn { color: var(--acc-ink); background: var(--acc); }
.card[open] .playbtn { display: none; }

.edcard .imgmeta { padding: 0 2ch calc(var(--lh) / 2); color: var(--faint); }

@media (max-width: 720px) {
  .grid { grid-template-columns: 1fr; }
  #bar .barright { display: none; }
}

@media print {
  .playbtn { display: none; }
}