/* The Square of the Revolution and its buildings: large pictures of the
   square drawn from the placement plan, cards for the buildings, the NPCs'
   skins shown pixel for pixel, and the live boards as plain lists. Uses the
   tokens of site.css. The poster head (.page-hero) is site.css's own. */

.square-section { margin-top: 2.5rem; }
.square-prose { max-width: var(--measure); }
.square-prose li { margin-bottom: 0.6rem; }

/* Pictures of the buildings: rendered at their own size, scaled down to fit. */
.square-figure { margin: 0 0 1.5rem; }
.square-render { display: block; max-width: 100%; height: auto; margin: 0 auto; }
.square-figure figcaption { font-size: 0.9rem; color: var(--ink-soft); margin-top: 0.5rem; }
.square-figure--wide { border-bottom: 3px solid var(--ink); padding-bottom: 0.75rem; }

/* The NPCs' skins: pixel art, never smoothed. */
.npc-skin { image-rendering: pixelated; width: 4rem; height: auto; }
.npc-skin--back { width: 3rem; align-self: flex-end; }

.square-way { display: grid; gap: 1rem 2rem; }
@media (min-width: 52rem) {
  .square-way { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
}

/* The buildings as cards */
.square-cards {
  list-style: none; padding: 0; margin: 1rem 0 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 1.75rem 1.5rem;
}
.square-card { border-top: 3px solid var(--ink); padding-top: 0.75rem; }
.square-card__link { display: block; color: var(--ink); text-decoration: none; }
/* one height for every picture, so the titles line up */
.square-card__image { display: block; width: 100%; height: 12rem; object-fit: contain; object-position: center bottom; margin-bottom: 0.5rem; }
.square-card__kicker {
  display: block; font-size: 0.75rem; font-weight: 750; font-stretch: 115%; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--civic-deep);
}
.square-card__title { display: block; font-size: 1.15rem; font-weight: 800; font-stretch: 112%; line-height: 1.2; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
.square-card__link:hover .square-card__title, .square-card__link:focus-visible .square-card__title { color: var(--civic); }
.square-card__meta { font-size: 0.9rem; color: var(--ink-soft); margin: 0.35rem 0 0; }

/* A building's page: the picture beside the facts on wide screens */
.square-building { display: grid; gap: 1rem 2rem; }
@media (min-width: 48rem) {
  .square-building { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start; }
}
.square-building__label {
  font-size: 0.85rem; font-weight: 750; font-stretch: 115%; letter-spacing: 0.1em; text-transform: uppercase;
  margin: 1.25rem 0 0.4rem; border-top: 3px solid var(--ink); padding-top: 0.4rem;
}
.square-standing { margin: 0 0 0.5rem; font-weight: 650; }
.square-entrances, .square-links, .square-gm { padding-left: 1.2rem; margin: 0; }
.square-entrances li, .square-links li, .square-gm li { margin-bottom: 0.4rem; }
.square-entrances code, .square-gm code { font-size: 0.85rem; background: var(--paper-deep); padding: 0.05rem 0.3rem; overflow-wrap: anywhere; }

/* The people */
.square-people {
  list-style: none; padding: 0; margin: 1rem 0 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 1.5rem 2rem;
}
.square-person { display: flex; gap: 1rem; align-items: flex-start; border-top: 3px solid var(--civic); padding-top: 0.75rem; }
.square-person__figures { display: flex; gap: 0.35rem; flex: none; }
.square-person__text { min-width: 0; }
.square-person h3 { margin: 0 0 0.25rem; font-size: 1.05rem; }
.square-person p { margin: 0 0 0.4rem; }
.square-person__where { font-size: 0.85rem; font-weight: 650; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.04em; }

/* The boards, as readable lists rather than sign lines */
.square-boards { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 1.5rem 2rem; margin-top: 1rem; }
.square-board { border-top: 3px solid var(--ink); background: var(--paper-deep); padding: 0.6rem 1rem 0.9rem; }
.square-board h3 { margin: 0 0 0.35rem; font-size: 1.05rem; }
.square-board__signs { font-size: 0.9rem; color: var(--ink-soft); }
.square-board__list { list-style: none; padding: 0; margin: 0; }
.square-board__list li { padding: 0.45rem 0; border-top: 1px solid var(--rule); overflow-wrap: anywhere; }
.square-board__list progress { display: block; width: 100%; margin-top: 0.3rem; }
.square-board__detail { color: var(--ink-soft); font-size: 0.9rem; }
.square-board__tally { display: block; color: var(--ink-soft); font-size: 0.85rem; font-variant-numeric: tabular-nums; }

.square-pager {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem 1rem;
  border-top: 3px solid var(--ink); margin-top: 3rem; padding-top: 0.75rem;
}