/* Aurbis Boards: the hold index at /boards (public_board_v0.md §3c).
   Web only. `board.css` is loaded first and owns everything that makes
   this an Aurbis board: the planks, the lantern light, the rail beam,
   the five papers and the iron pin. This file only lays the nine cards
   out on the wall and sets the type inside them, so the index reads as
   the same object seen from further back. */

/* The wall of boards: one card per hold, each keeping its paper's own
   shape (align-items: start, so nothing is stretched). Cards flow left
   to right in catalog order. */
.holds-grid {
  width: min(1408px, 100%);
  margin: 0 auto;
  padding: 42px 44px 8px;
  display: grid;
  /* The wall's own card column dial (board.css `columns: 260px`), so a
     hold card hangs at the size a notice does. */
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  align-items: start;
  gap: 34px 26px;
  max-width: 100vw;
}
@media (max-width: 560px) {
  .holds-grid { padding: 26px 20px 6px; gap: 26px 18px; }
  .holds-foot { padding: 0 20px 34px; }
}

/* Fixed angles rather than the post-id jitter: a board is a place, and
   a place hangs in the same spot every time. The deterministic jitter
   in board.js belongs to notices. */
.hold-card {
  margin: 0;
  text-decoration: none;
  color: var(--paper-ink);
  justify-content: flex-start;
}
.holds-grid > .hold-card:nth-child(3n + 1) { --tilt: -1.1deg; --dy: 2px; }
.holds-grid > .hold-card:nth-child(3n + 2) { --tilt: 0.7deg; --dy: -2px; }
.holds-grid > .hold-card:nth-child(3n + 3) { --tilt: -0.4deg; --dy: 3px; }

.hold-hold {
  font-family: var(--font-fell);
  font-style: italic;
  font-size: 12px;
  color: var(--rust);
}

.hold-name {
  margin: 1px 0 5px;
  font-family: var(--font-book);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.1;
  color: var(--paper-ink-hi);
}
/* Each paper keeps its own voice, the way the notices do. */
.paper-note .hold-name, .paper-torn .hold-name {
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: 24px;
}
.paper-decree .hold-name {
  font-variant: small-caps;
  letter-spacing: 0.04em;
}

.hold-latest-kind {
  margin: 0;
  font-family: var(--font-fell);
  font-style: italic;
  font-size: 12px;
  color: var(--paper-ink-soft);
}
.hold-latest-title,
.hold-bare {
  margin: 1px 0 0;
  flex: 1 1 auto;
  font-family: var(--font-book);
  font-size: 15px;
  line-height: 1.25;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 98%);
          mask-image: linear-gradient(180deg, #000 70%, transparent 98%);
}
.paper-note .hold-latest-title, .paper-torn .hold-latest-title,
.paper-note .hold-bare, .paper-torn .hold-bare {
  font-family: var(--font-hand);
  font-weight: 500;
  font-size: 18px;
}
.hold-bare {
  font-style: italic;
  color: var(--paper-ink-soft);
}

/* The count sits where a notice's "Fades in N days" sits, and inherits
   the decree seal clearance from board.css with it. */
.hold-count { margin-top: 8px; }

.holds-foot {
  width: min(1408px, 100%);
  margin: 0 auto;
  padding: 0 44px 46px;
  max-width: 100vw;
  text-align: center;
  font-family: var(--font-book);
  font-size: 15px;
  font-style: italic;
  color: var(--gold-muted);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
}