/* The Citizen's Booklet (/booklet): the book's pages as sheets of paper in
   ink frames with a hard shadow and a red corner wedge, the lines in the
   book's colours (headings in deep red, a gold "»" before each link, here in
   ochre, which reads on paper), the game's command beside each link. And the
   commands of the game (/booklet/commands), each written as the chat shows
   it: gold on black. Uses the tokens of site.css. The poster head
   (.page-hero) is site.css's own. */

.booklet-about { max-width: var(--measure); }

.booklet {
  list-style: none; padding: 0; margin: 2rem 0 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: 2rem 1.75rem;
}

/* A page: paper in an ink frame, the corner wedge of the posters */
.booklet-page {
  position: relative; isolation: isolate;
  background: var(--field); border: 2px solid var(--ink); box-shadow: 0.4rem 0.4rem 0 var(--ink);
  padding: 0.9rem 1.2rem 1.2rem; scroll-margin-top: 1.5rem;
}
.booklet-page::before {
  content: ''; position: absolute; top: 0; right: 0; z-index: -1; width: 2.75rem; height: 2.75rem;
  background: var(--red); clip-path: polygon(0 0, 100% 0, 100% 100%);
}
.booklet-page:first-child::before { width: 4.5rem; height: 4.5rem; background: var(--gold); }
/* The page a line turned to */
.booklet-page:target { box-shadow: 0.4rem 0.4rem 0 var(--red); }

.booklet-page__number {
  margin: 0 0 0.75rem; color: var(--ink-soft);
  font-size: 0.75rem; font-weight: 750; font-stretch: 115%; letter-spacing: 0.1em; text-transform: uppercase;
}

/* The lines, as in the book */
.booklet-line { margin: 0; line-height: 1.45; }
.booklet-line--heading {
  margin: 0.2rem 0 0.4rem; color: var(--civic-deep);
  font-size: 1.1rem; line-height: 1.15; font-weight: 850; font-stretch: 120%; letter-spacing: 0.04em;
}
.booklet-page:first-child .booklet-line--heading { font-size: 1.45rem; }
.booklet-line--text { max-width: 30rem; }
.booklet-line--gap { height: 0.75rem; }
.booklet-line--run, .booklet-line--page {
  display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 0.4rem; padding: 0.2rem 0;
  border-bottom: 1px dotted var(--rule);
}
.booklet-line__mark { color: var(--ochre); font-weight: 800; }
.booklet-line--run a, .booklet-line--page a, .booklet-line__label { font-weight: 650; }
.booklet-line__game, .booklet-line__turn { margin-left: auto; color: var(--ink-soft); font-size: 0.8rem; }
.booklet-line__game code { color: var(--ink); background: var(--paper-deep); padding: 0 0.3rem; overflow-wrap: anywhere; }

/* The commands of the game */
.commands-groups ul { list-style: none; padding: 0; margin: 0 0 1rem; display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem; }
.commands-groups a { font-weight: 650; }
.commands-group { margin-top: 2.5rem; }
.commands { margin: 1rem 0 0; }
.commands__item {
  display: grid; grid-template-columns: minmax(10rem, 19rem) 1fr; gap: 0.35rem 1.25rem;
  padding: 0.8rem 0; border-top: 1px solid var(--rule);
}
.commands__item dt code {
  display: inline-block; padding: 0.15rem 0.45rem; background: var(--black); color: var(--gold-light);
  font-weight: 700; overflow-wrap: anywhere;
}
.commands__item dd { margin: 0; }
.commands__what { margin: 0 0 0.25rem; max-width: var(--measure); }
.commands__values { margin: 0 0 0.25rem; color: var(--ink-soft); font-size: 0.9rem; }
.commands__web { margin: 0; font-size: 0.95rem; }
@media (max-width: 36rem) {
  .commands__item { grid-template-columns: 1fr; }
}