/*
 * CITY OF LEGENDS: factions, people and social play (src/people/).
 * Every class here starts pp-. Neon Ink: hard edges, flat colour, halftone
 * dots for shade, no blur and no soft gradients. Mobile first; the min-width
 * block is the wider layout. Nothing animates.
 *
 * A faction page sets --f and --f2 (its canon colours) on the .pp-faction
 * wrapper. This file is the only one that reads them. Existing site classes
 * and every g- class are left alone; the rules below style only pp- parts.
 */

/* ── a faction's colours and its one-word answer ───────────────────── */

.pp-mark {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 14px;
  margin: 28px 0 26px;
}
.pp-plate {
  display: block;
  width: 44px;
  height: 44px;
  border: 3px solid var(--paper);
  background-image: radial-gradient(rgba(0, 0, 0, 0.22) 1.3px, transparent 1.7px);
  background-size: 8px 8px;
}
.pp-plate-f {
  background-color: var(--f, var(--sodium));
}
.pp-plate-f2 {
  margin-left: -6px;
  background-color: var(--f2, var(--paper));
}
.pp-stance {
  margin: 0 0 0 8px;
  padding: 2px 14px;
  border: 4px solid var(--f, var(--sodium));
  color: var(--f, var(--sodium));
  font-family: var(--display);
  font-weight: 900;
  font-size: 26px;
  letter-spacing: 0.14em;
  line-height: 1.2;
  text-transform: uppercase;
  transform: rotate(-1.5deg);
}

/* ── the death-book: a ruled page with its five column heads ───────── */

.pp-ledger {
  max-width: 46rem;
  margin: 28px 0;
  background: var(--paper);
  color: var(--ink);
  border: 3px solid var(--ink);
  outline: 3px solid var(--paper);
  box-shadow: 8px 8px 0 var(--registry);
}
.pp-ledger table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.pp-ledger caption {
  padding: 8px 12px;
  text-align: left;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--display);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.pp-ledger th {
  padding: 8px 4px 6px 8px;
  text-align: left;
  border-bottom: 3px double var(--ink);
  border-left: 1px solid var(--ink);
  font-family: var(--display);
  font-weight: 900;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}
.pp-ledger td {
  height: 38px;
  border-bottom: 1px solid var(--ink);
  border-left: 1px solid var(--ink);
}
.pp-ledger th:first-child,
.pp-ledger td:first-child {
  border-left: 0;
}
.pp-ledger tbody tr:last-child td {
  border-bottom: 0;
}

/* ── the rarity shapes ─────────────────────────────────────────────── */

.pp-rarity {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 28px;
  margin: 0 0 28px;
  padding: 0;
  list-style: none;
}
.pp-rarity li {
  display: grid;
  justify-items: center;
  gap: 8px;
}
.pp-rarity b {
  font-family: var(--display);
  font-weight: 800;
  font-size: 16px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--paper);
}
.pp-shape {
  display: block;
  width: 72px;
  height: 72px;
  background-color: var(--sw, var(--paper));
  background-image: radial-gradient(rgba(0, 0, 0, 0.26) 1.3px, transparent 1.7px);
  background-size: 8px 8px;
}
.pp-shape-circle {
  border-radius: 50%;
}
.pp-shape-diamond {
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
.pp-shape-hex {
  clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%);
}
.pp-shape-octagon {
  clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%);
}
.pp-shape-starburst {
  clip-path: polygon(50% 0, 59% 22%, 79% 9%, 76% 33%, 100% 38%, 82% 55%, 96% 75%, 72% 74%, 68% 99%, 50% 82%, 32% 99%, 28% 74%, 4% 75%, 18% 55%, 0 38%, 24% 33%, 21% 9%, 41% 22%);
}

/* ── pairs, the stance matrix, places, people ──────────────────────── */

.pp-pair {
  display: grid;
  gap: 4px 24px;
  align-items: start;
}
.pp-matrix {
  max-width: 62rem;
}
/* the diagonal, where a faction would look at itself, has no cell on a phone, where every row is a card */
.pp-matrix td:empty {
  display: none;
}
.pp-place {
  margin: 36px 0 12px;
  padding-bottom: 6px;
  border-bottom: 3px solid var(--line);
  font-family: var(--display);
  font-weight: 900;
  font-size: 26px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sodium);
}
.pp-person {
  border-top-width: 5px;
  border-top-color: var(--sodium);
  gap: 18px;
}
.pp-person .g-entry-head {
  margin: 0;
}

@media (min-width: 960px) {
  .pp-person.has-art {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    grid-template-areas:
      "head art"
      "copy art";
    grid-template-rows: auto 1fr;
  }
  .pp-person.has-art .g-entry-head {
    grid-area: head;
  }
  .pp-person.has-art .g-entry-art {
    grid-area: art;
    grid-row: 1 / span 2;
  }
  .pp-person.has-art .g-entry-copy {
    grid-area: copy;
  }
}

@media (min-width: 640px) {
  .pp-matrix td:empty {
    display: table-cell;
  }
  .pp-pair {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .pp-ledger th {
    font-size: 15px;
  }
  .pp-shape {
    width: 88px;
    height: 88px;
  }
}