/* Code: one manila punch card per project, punched with its own name. */

.tc-wrap { filter: var(--lift); }
.title-card {
  padding: 18px 32px 16px 44px;
  background-color: var(--manila);
  transform: rotate(-1.5deg);
  clip-path: polygon(26px 0, 100% 0, 100% 100%, 0 100%, 0 26px);
}
.title-card h1 { font: 400 54px/1 var(--font-head); }
.title-card p { font: 600 12px 'IBM Plex Mono', var(--font-type); letter-spacing: 1px; color: #4d4535; }

.pcards { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 38px 32px; }
.pcw { position: relative; filter: var(--lift); transform: rotate(var(--r)); }
.pcw .key { width: 96px; right: 18px; top: -62px; }
.pc {
  position: relative;
  height: 100%;
  padding: 14px 22px 22px 24px;
  background-color: var(--manila);
  clip-path: polygon(30px 0, 100% 0, 100% 100%, 0 100%, 0 30px);
}
.punch-grid { margin-left: 14px; }
.punch-grid .interp {
  height: 12px;
  overflow: hidden;
  white-space: nowrap;
  font: 600 9px/12px 'IBM Plex Mono', monospace;
  letter-spacing: 6.6px;
}
.punch-grid .grid { position: relative; height: 98px; margin: 2px 0 14px; overflow: hidden; }
.punch-grid .row {
  position: absolute;
  left: 0;
  white-space: nowrap;
  font: 500 9px/8px 'IBM Plex Mono', monospace;
  letter-spacing: 6.6px;
  color: rgba(110, 85, 35, .42);
}
.punch-grid .hole { position: absolute; width: 6px; height: 8px; border-radius: 1px; background: var(--mat); }

.pc h3 { font: 600 21px 'IBM Plex Mono', monospace; letter-spacing: -.5px; overflow-wrap: anywhere; }
.pc p { margin: 6px 0 12px; font-size: 14.5px; line-height: 1.5; }
.pc .meta { display: flex; flex-wrap: wrap; gap: 7px; list-style: none; font: 600 12px 'IBM Plex Mono', monospace; }
.pc .meta li { padding: 3px 8px; border-radius: 3px; background: rgba(255, 255, 255, .5); }
.pc .meta .lang::before { content: ''; display: inline-block; width: 9px; height: 9px; margin-right: 6px; border-radius: 50%; background: var(--lc); }
.install {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding: 9px 10px 9px 12px;
  border-radius: 4px;
  font: 500 13px 'IBM Plex Mono', monospace;
  color: #ebe7dc;
  background: #1b1b1d;
}
.install code { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: inherit; }
.install code::before { content: '$ '; color: var(--mustard); }
.copy { min-width: 66px; padding: 5px 10px; border: 0; border-radius: 3px; font: 800 12px var(--font-body); background-color: var(--mustard); cursor: pointer; }
.copy.ok { background-color: var(--mint); }
.pc .go { display: inline-block; margin-top: 12px; font-weight: 800; font-size: 14px; }

.punch-note { margin-top: 30px; text-align: right; }

@media (max-width: 860px) {
  .pcards { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .pcw { transform: rotate(calc(var(--r) * .5)); }
}
@media (max-width: 760px) {
  .title-card h1 { font-size: 44px; }
  .pc { padding: 14px 14px 20px 16px; }
  .punch-grid { margin-left: 8px; }
  .pcw .key { width: 80px; right: 8px; top: -52px; }
  .punch-note { text-align: left; }
}