/*
 * The printed adventure.
 *
 * A sibling of sheet-print.css and written on the same terms, which are worth
 * restating because they are the whole reason this is a stylesheet and not a
 * PDF library: the browser already prints to PDF, honours `@page`, and sets
 * type better than anything that would have to be installed to compete. So the
 * book is a page, and this is what makes it look like a book.
 *
 * Shares nothing with style.css, deliberately. The app is a dark room lit by
 * gold; an adventure is paper. Loading the app's palette here would mean
 * fighting every token back to black-on-white, and the first person to change
 * one in style.css would change how somebody's printed book looks.
 *
 * WHAT IS AND IS NOT COPIED. The shape of a published adventure is a genre:
 * two columns, numbered area entries, boxed text the GM reads out, stat blocks
 * in a tinted panel, appendices at the back. That shape is used here. The trade
 * dress of any particular publisher is not — no logo, no imitation of their
 * typefaces, no ornamental borders, and the stat block is tinted in this
 * project's own parchment rather than in anybody's signature colour. This game
 * ships SRD content under OGL 1.0a / CC-BY 4.0, and layout is where that line
 * is easiest to cross by accident. sheet-print.css makes the same note about
 * the character sheet.
 *
 * Sized in inches and points, never pixels: a browser prints 1in as an inch and
 * renders it as 96 CSS px, so one set of numbers gives a screen preview the
 * same size and shape as the paper. That is the whole trick to avoiding "looks
 * right on screen, breaks across pages".
 */

/* ------------------------------------------------------------------------ */
/* Paper                                                                     */
/* ------------------------------------------------------------------------ */

@page {
  size: letter portrait;
  margin: 0.6in 0.55in 0.7in;
}

/* The cover has no running head and wants its own margins. */
@page :first {
  margin: 0.6in;
}

:root {
  --ink: #1c1a17;
  --ink-soft: #55504a;
  --rule: #b9b0a2;
  --parchment: #f5efe2;      /* the tint inside a stat block or a read-aloud */
  --parchment-edge: #ded3bd;
  --accent: #6b2417;         /* headings and drop caps: oxblood, not anybody's brand */

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --display: "Trajan Pro", "Optima", "Palatino Linotype", Georgia, serif;
  --sans: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--ink);
  background: #fff;
  font-family: var(--serif);
  font-size: 9.6pt;
  line-height: 1.38;
  /* Hyphenation earns its place in a two-column measure: 3.3in of justified
     serif without it opens rivers on every third line. */
  text-align: justify;
  hyphens: auto;
}

/* On screen the sheet is shown on a desk so the page edges are visible; on
   paper the desk does not exist. */
@media screen {
  body { background: #6f6a63; padding: 0.5in 0; }
  .book-page {
    width: 8.5in;
    min-height: 11in;
    margin: 0 auto 0.35in;
    padding: 0.6in 0.55in 0.7in;
    background: #fff;
    box-shadow: 0 0.05in 0.2in rgba(0, 0, 0, 0.4);
  }
}
@media print {
  .book-page { padding: 0; }
  /* Each top-level part starts on a fresh sheet. */
  .book-page + .book-page { break-before: page; }
}

/* ------------------------------------------------------------------------ */
/* The cover                                                                 */
/* ------------------------------------------------------------------------ */

.cover {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 9.4in;
}
.cover-art {
  width: 5.4in;
  max-height: 4.2in;
  object-fit: cover;
  border: 1.5pt solid var(--ink);
}
.cover h1 {
  font-family: var(--display);
  font-size: 30pt;
  line-height: 1.1;
  letter-spacing: 0.02em;
  margin: 0.35in 0 0.08in;
  color: var(--accent);
  text-align: center;
}
.cover-band {
  font-family: var(--sans);
  font-size: 8.5pt;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 0.28in;
}
.cover-blurb {
  max-width: 4.9in;
  font-size: 11pt;
  font-style: italic;
  text-align: center;
  margin: 0 0 0.4in;
}
.cover-foot {
  font-size: 8pt;
  color: var(--ink-soft);
  max-width: 5.2in;
  text-align: center;
}

/* ------------------------------------------------------------------------ */
/* Structure                                                                 */
/* ------------------------------------------------------------------------ */

/* Two columns for the body of a chapter; `column-span: all` on the headings
   takes anything back to the full measure.
 *
 * `column-fill: balance`, and the alternative is worth recording because it is
 * the obvious choice and it is wrong here. `auto` fills the first column to the
 * height of the column BOX before starting the second — which is right on
 * paper, where the box is a page. On screen there is no page box: the box is as
 * tall as the chapter, so `auto` put all seventy-three areas in the left column
 * and left the right one empty for the whole document. `balance` is correct in
 * both, at the cost of a short last column where a chapter ends, which is what
 * a book does anyway. */
.cols {
  columns: 2;
  column-gap: 0.3in;
  column-fill: balance;
  column-rule: 0.5pt solid var(--rule);
}

h1, h2, h3, h4 {
  font-family: var(--display);
  color: var(--accent);
  text-align: left;
  break-after: avoid-page;
  hyphens: none;
}
h1 { font-size: 19pt; margin: 0 0 0.12in; letter-spacing: 0.01em; }
h2 {
  font-size: 13pt;
  margin: 0.18in 0 0.06in;
  padding-bottom: 0.03in;
  border-bottom: 1pt solid var(--accent);
  column-span: all;
}
h3 { font-size: 10.5pt; margin: 0.14in 0 0.04in; }
h4 {
  font-family: var(--sans);
  font-size: 8.5pt;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0.1in 0 0.02in;
}
p { margin: 0 0 0.07in; }
.lede { font-style: italic; color: var(--ink-soft); }

/* The chapter opener: a rule, the region's name, its own description across
   the full measure before the entries begin in two columns. */
.chapter-head { column-span: all; margin-bottom: 0.12in; }
.chapter-map {
  margin: 0.08in 0 0.04in;
}
.map-caption {
  font-family: var(--sans);
  font-size: 7.4pt;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-align: center;
  margin: 0 0 0.12in;
}

/* The plate, and the pins over it.
 *
 * `object-fit: fill` and not `contain`, deliberately: `map_x`/`map_y` are
 * positions in the chart's 0–100 by 0–75 field and the game draws the plate
 * into exactly that field with `preserveAspectRatio="none"`. Anything that
 * preserved the aspect here would letterbox the painting and slide every pin
 * off the thing it points at. See map_frame() in adventure_print.php. */
.map-frame {
  position: relative;
  border: 0.8pt solid var(--rule);
  line-height: 0;
}
.map-frame img {
  display: block;
  width: 100%;
  aspect-ratio: 100 / 75;
  object-fit: fill;
}

/* A number a GM can find on a photocopy: white disc, dark ring, bold figure.
   Sized in points so it is the same on paper whatever the plate's pixels. */
.map-pin {
  position: absolute;
  transform: translate(-50%, -50%);
  min-width: 11pt;
  height: 11pt;
  padding: 0 1.5pt;
  border: 0.9pt solid var(--ink);
  border-radius: 6pt;
  background: #fff;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 7pt;
  font-weight: 700;
  line-height: 9.5pt;
  text-align: center;
  /* A ring of paper round the disc, so a pin sitting on ink is still a disc.
     Cheaper than a halo filter and it prints. */
  box-shadow: 0 0 0 1pt rgba(255, 255, 255, 0.9);
}

/* --- Appendix D: the handouts ------------------------------------------- */

/* One map, one page, nothing else on it. */
.handout {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 9.4in;
}
.handout-frame { width: 100%; }
.handout .map-frame { border-width: 1.2pt; }
.handout-name {
  font-family: var(--display);
  font-size: 12pt;
  color: var(--accent);
  text-align: center;
  margin: 0.14in 0 0;
}

/* An area entry. `break-inside: avoid` on the heading and its first paragraph
   only — a whole entry can be pages long, and forbidding a break inside one
   would leave half-empty columns everywhere. */
.area { margin: 0 0 0.13in; }
.area-head {
  font-family: var(--display);
  font-size: 11pt;
  color: var(--accent);
  margin: 0 0 0.04in;
  break-after: avoid-page;
}
.area-num { font-variant-numeric: lining-nums; }

/* Boxed text: what the GM reads out. The genre convention is a panel set off
   from the page, and the convention exists because it answers "which of this
   do I say aloud" at a glance. */
.read-aloud {
  background: var(--parchment);
  border-left: 2.5pt solid var(--accent);
  padding: 0.06in 0.09in;
  margin: 0 0 0.07in;
  font-style: italic;
  break-inside: avoid;
}
.read-aloud p:last-child { margin-bottom: 0; }

/* The GM's own notes under an entry: exits, people, treasure. A definition
   list rather than prose, because they are looked up rather than read. */
.notes { margin: 0.04in 0 0; font-size: 8.8pt; }
.notes dt {
  font-family: var(--sans);
  font-size: 7.4pt;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 0.04in;
}
.notes dd { margin: 0 0 0.02in; }
.notes .tag {
  font-family: var(--sans);
  font-size: 7pt;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}

.area-art {
  width: 100%;
  max-height: 2.2in;
  object-fit: cover;
  border: 0.6pt solid var(--rule);
  margin: 0 0 0.06in;
}

/* ------------------------------------------------------------------------ */
/* Stat blocks                                                               */
/* ------------------------------------------------------------------------ */

.stat {
  background: var(--parchment);
  border: 0.8pt solid var(--parchment-edge);
  border-top: 2pt solid var(--accent);
  padding: 0.08in 0.1in 0.1in;
  margin: 0 0 0.12in;
  break-inside: avoid;
  font-size: 8.6pt;
}
/* The creature's own picture, floated so the block's first lines run beside it
   and the rest of the stats close up underneath — a portrait across the full
   width would push the numbers off the bottom of a two-column page. `shape-
   outside` is deliberately not used: the busts are rectangular crops with a
   dark ground, and a circle would cut the silhouette. */
.stat-art {
  float: right;
  width: 1.05in;
  height: 1.4in;
  object-fit: cover;
  object-position: center 15%;
  margin: 0 0 0.06in 0.08in;
  border: 0.6pt solid var(--parchment-edge);
}
.stat.has-art { overflow: hidden; }   /* contain the float within the panel */
.stat h3 { margin: 0; font-size: 12pt; }
.stat-kind { font-style: italic; color: var(--ink-soft); margin: 0 0 0.05in; }
.stat-rule { border: 0; border-top: 1pt solid var(--accent); margin: 0.05in 0; }
.stat-line { margin: 0 0 0.02in; }
.stat-line b { color: var(--accent); }
.stat-abilities {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  text-align: center;
  gap: 0.02in;
  margin: 0.04in 0;
}
.stat-abilities div { font-size: 8pt; }
.stat-abilities span {
  display: block;
  font-family: var(--sans);
  font-size: 7pt;
  letter-spacing: 0.1em;
  color: var(--ink-soft);
}
.stat-trait { margin: 0 0 0.04in; }
.stat-trait b { font-style: italic; }
.stat-source {
  font-family: var(--sans);
  font-size: 7pt;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0.06in 0 0;
}
.stat { scroll-margin-top: 0.55in; }
.toc a { color: inherit; text-decoration: none; }
@media screen {
  .toc a:hover { color: var(--accent); }
}

/* ------------------------------------------------------------------------ */
/* Appendices                                                                */
/* ------------------------------------------------------------------------ */

.person, .quest {
  break-inside: avoid;
  margin: 0 0 0.12in;
}
.person-head { display: flex; gap: 0.08in; align-items: flex-start; }
.person-bust {
  width: 0.72in;
  height: 0.72in;
  object-fit: cover;
  object-position: center 20%;
  border: 0.6pt solid var(--rule);
  border-radius: 50%;
  flex: 0 0 auto;
}
.person-name { font-family: var(--display); font-size: 10.5pt; color: var(--accent); }
.person-where { font-family: var(--sans); font-size: 7.2pt; letter-spacing: 0.08em;
                text-transform: uppercase; color: var(--ink-soft); }

.quest-stages { margin: 0.04in 0 0; padding-left: 0.16in; font-size: 8.8pt; }
.quest-stages li { margin: 0 0 0.03in; }
.quest-meta { font-family: var(--sans); font-size: 7.4pt; letter-spacing: 0.08em;
              text-transform: uppercase; color: var(--ink-soft); }

/* The contents page: chapter, then its areas as a run-in list. */
.toc { column-span: all; }
.toc-chapter { margin: 0 0 0.09in; break-inside: avoid; }
.toc-chapter b { font-family: var(--display); color: var(--accent); }
.toc-areas { color: var(--ink-soft); font-size: 8.6pt; }

.colophon { column-span: all; margin-top: 0.25in; font-size: 7.6pt; color: var(--ink-soft); }

/* --- Appendix E: the cards ---------------------------------------------- */

/* Four to a page, in a 2×2 grid — see the note in adventure_print.php for why
   they are chunked rather than flowed. The grid is sized off the page box
   rather than off its contents so every card on every sheet is identical: a
   card that was as tall as its own description would be a page of four
   different rectangles and nothing to cut along. */
.cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 0.14in;
  min-height: 9.5in;
}
.card {
  display: flex;
  flex-direction: column;
  /* Dashed, because it is a cut line and it should look like one. */
  border: 0.8pt dashed var(--rule);
  background: var(--parchment);
  padding: 0.12in;
  overflow: hidden;
  break-inside: avoid;
}
/* The face is most of the card. A GM finds a card by the portrait on it, the
   same way the party rail is found by faces rather than names. */
.card-art {
  width: 100%;
  height: 2.15in;
  object-fit: cover;
  object-position: center 18%;
  border: 0.6pt solid var(--parchment-edge);
  background: #fff;
}
.card-art-blank { background: repeating-linear-gradient(45deg,
  #ece4d3 0 6pt, #e3d9c4 6pt 12pt); }
.card-body { padding-top: 0.06in; min-height: 0; }
.card-name {
  font-family: var(--display);
  font-size: 12pt;
  color: var(--accent);
  margin: 0;
  text-align: left;
}
.card-role {
  font-family: var(--sans);
  font-size: 7.6pt;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0.01in 0 0;
}
.card-where {
  font-size: 8pt;
  font-style: italic;
  color: var(--ink-soft);
  margin: 0 0 0.05in;
}
.card-text { font-size: 8.6pt; margin: 0; text-align: left; hyphens: none; }
.card-wants {
  margin: 0.06in 0 0;
  padding-top: 0.05in;
  border-top: 0.5pt solid var(--parchment-edge);
  font-size: 8pt;
  text-align: left;
}
.card-wants b { color: var(--accent); }
.card .tag {
  font-family: var(--sans);
  font-size: 6.6pt;
  letter-spacing: 0.06em;
  color: var(--accent);
}

/* The one thing on the page that is not the book: the bar that offers to print
   it. Never on paper. */
.book-bar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  gap: 0.5rem;
  align-items: center;
  justify-content: center;
  padding: 0.12in;
  background: #262320;
  color: #efe7d6;
  font-family: var(--sans);
  font-size: 9pt;
}
.book-bar a, .book-bar button {
  font: inherit;
  color: #efe7d6;
  background: #3d3833;
  border: 0.5pt solid #6d6459;
  border-radius: 3pt;
  padding: 0.04in 0.12in;
  cursor: pointer;
  text-decoration: none;
}
.book-bar b { color: #e8c547; font-weight: 600; }
@media print { .book-bar { display: none; } }

/* ------------------------------------------------------------------------ */
/* Appendix F: a rolled delve                                                */
/* ------------------------------------------------------------------------ */

/*
 * The floor plans are drawn by `window.WorldMap.svg` — the game's own
 * renderer, not a copy of it — so what follows is a second SKIN for the
 * markup the screen already produces, and not a second drawing. That is the
 * bargain worth keeping: doors in the old-school grammar, stair ticks and
 * graph-paper ruling are two hundred lines of geometry, and a PHP copy of
 * them would agree with the game exactly until the first time one of the two
 * was fixed.
 *
 * A COMPLETE skin, not a patch, and that distinction cost a rendering. This
 * stylesheet deliberately shares nothing with style.css — see the top of the
 * file — so NONE of the plan's base rules are present here: not `fill: none`
 * on a corridor polyline, not `paint-order: stroke` on a label, not a stroke
 * width anywhere. Overriding a few colours on top of nothing gives you SVG's
 * own defaults underneath, which are "fill black, stroke none", and the first
 * attempt printed a level as eight black slabs with the numbers knocked out
 * of them. Everything the floor-plan path emits is therefore given a value
 * below, whether or not the book wants to change it.
 *
 * Paper, not screen. The screen plan is a lit floor inside a dark building;
 * a book is ink on white, and has to survive a photocopier.
 */

/* The frame and the ground belong to the BOX, not to the drawing. A level is
   100 x 75 and the column is not, so the svg letterboxes inside whatever
   space it is given; with the rock painted only inside the viewBox that left
   a white band down each side of a plate that is supposed to be solid stone.
   Giving the wrapper the same colour makes the letterbox invisible instead of
   fighting the aspect ratio. */
.floor-plan {
  background: #ece7dd;
  border: 0.8pt solid var(--rule);
  line-height: 0;
}
.floor-plan .worldmap {
  /* Capped by height rather than left to fill the page: the plan shares the
     chapter-head column with the first entries beneath it. */
  display: block;
  width: 100%;
  height: auto;
  max-height: 3.4in;
  margin: 0 auto;
  cursor: default;
}

/* Ink is the whole point of this page. Without this a browser drops every
   background fill out of the print and the plan comes out as outlines with
   nothing inside them. */
.floor-plan .worldmap,
.floor-plan .worldmap * {
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

/* --- the ground ---------------------------------------------------------

   The rock the level is cut from is near-black on screen. On paper that is a
   solid block of toner over a third of the page, so it becomes a pale warm
   grey: the same reading — stone around a cut floor — at a twentieth of the
   ink, and it photocopies. The floors then go to true white, which is the
   contrast the dark rock was providing. */

.floor-plan .wm-rock { fill: #ece7dd; }

.floor-plan .wm-room {
  fill: #fff;
  stroke: var(--ink);
  stroke-width: 0.55;
}
/* Where you came in and where you go down, said at a glance from across the
   page. The stair ticks say it again in glyph. */
.floor-plan .wm-room.is-stair,
.floor-plan .wm-room.is-entrance { stroke-dasharray: 1.6 0.8; }

/* A corridor is a wall polyline with a floor polyline drawn over it, both
   stroked and neither filled — `fill: none` is not decoration here, it is
   what stops a dogleg being painted in as a solid triangle. */
.floor-plan .wm-hall-wall,
.floor-plan .wm-hall {
  fill: none;
  stroke-linejoin: miter;
  stroke-linecap: butt;
}
.floor-plan .wm-hall-wall { stroke: var(--ink); }
.floor-plan .wm-hall { stroke: #fff; }

/* The graph paper. Visible at three and a half inches and still there after a
   photocopy, which the screen's soft brown is not. */
.floor-plan .wm-grid-line {
  fill: none;
  stroke: rgba(28, 26, 23, 0.28);
  stroke-width: 0.12;
}

.floor-plan .wm-stair-ticks line {
  stroke: var(--ink);
  stroke-width: 0.3;
}

/* --- the legend ---------------------------------------------------------

   hollow square = a door · barred = locked · crossed = trapped ·
   dotted = portcullis · dashed seam with an s = a secret way.
   The same vocabulary as the screen, because a reader who has played should
   not have to learn it twice. */

.floor-plan .wm-doorbox {
  fill: #fff;
  stroke: var(--ink);
  stroke-width: 0.3;
}
.floor-plan .wm-door-bar {
  fill: none;
  stroke: var(--ink);
  stroke-width: 0.28;
}
.floor-plan .wm-portcullis {
  fill: none;
  stroke: var(--ink);
  stroke-width: 0.5;
  stroke-dasharray: 0.35 0.45;
}
.floor-plan .wm-door {
  fill: none;
  stroke: var(--ink);
  stroke-width: 0.5;
}
.floor-plan .wm-door.is-stuck { stroke-dasharray: 0.5 0.4; }
.floor-plan .wm-secret-s {
  font-family: var(--display);
  font-size: 2.4px;
  font-style: italic;
  fill: var(--ink);
  stroke: none;
}

/* The one thing on the plan allowed a colour, because it is the one thing the
   referee must not read past. */
.floor-plan .wm-trap { stroke-width: 0.35; }
.floor-plan .wm-trap.is-found { fill: none; stroke: var(--accent); }
.floor-plan .wm-trap.is-sprung { fill: var(--accent); stroke: none; }

/* The furnishing. This skin shares nothing with style.css, so without these
   three lines the glyph falls back to SVG's own defaults — a solid black box,
   which is the heaviest mark on a page whose walls are hairlines. */
.floor-plan .wm-prop-body { fill: var(--ink); fill-opacity: 0.14;
                            stroke: var(--ink); stroke-width: 0.26; }
.floor-plan .wm-prop-lid  { fill: none; stroke: var(--ink); stroke-width: 0.26; }

/* --- the numbers --------------------------------------------------------

   Area numbers, not place names: these are read at a glance while somebody is
   talking, and the name is in the entry directly beneath the plan. Set in the
   book's own sans, and knocked out of a white halo so a number crossing a
   wall stays legible — `paint-order` is what puts the halo behind the figure
   instead of over it, and without it the numbers print white on black. */
.floor-plan .wm-label {
  text-anchor: middle;
  font-family: var(--sans);
  font-size: 3.4px;
  font-weight: 700;
  fill: var(--ink);
  paint-order: stroke;
  stroke: #fff;
  stroke-width: 0.7;
}
.floor-plan .wm-hit { fill: transparent; stroke: none; }
/* Nothing here is somewhere you can walk to: there is no party. */
.floor-plan .wm-node { cursor: default; }

/* --- the seed ----------------------------------------------------------- */

.seed-band {
  font-family: var(--sans);
  font-size: 8.5pt;
  color: var(--ink-soft);
  border-top: 0.6pt solid var(--rule);
  border-bottom: 0.6pt solid var(--rule);
  padding: 0.06in 0;
  margin: 0.1in 0 0;
}
.seed-band b { color: var(--ink); font-size: 10pt; letter-spacing: 0.04em; }
.seed-note { display: block; margin-top: 0.03in; }
.seed-band code {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 7.6pt;
}

/* On screen the toolbar says which delve is on the page, so that rolling
   another is a visible act rather than a page that quietly changed. */
.book-seed { font-family: var(--sans); font-size: 8.5pt; opacity: 0.85; }

/* --- the wandering table ------------------------------------------------

   A rollable table, not a list: the numbers are down the left because the
   thing a referee does with this page is roll a die and run a finger. Ruled
   only under the rows — the vertical rules a spreadsheet wants would make it
   a spreadsheet. */

.wander {
  width: 100%;
  border-collapse: collapse;
  font-size: 8.6pt;
  margin: 0.1in 0 0.14in;
  break-inside: avoid;
}
.wander caption {
  caption-side: top;
  font-family: var(--sans);
  font-size: 7.4pt;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-align: left;
  padding: 0 0 0.03in;
  border-bottom: 0.8pt solid var(--ink);
}
/* The second line of the caption is the odds and who they are for, which is
   read once and then not again — so it is set out of the way rather than
   competing with the rows. */
.wander caption span {
  display: block;
  text-transform: none;
  letter-spacing: 0;
  font-size: 7.6pt;
  margin-top: 0.02in;
}
.wander td {
  padding: 0.028in 0.04in;
  border-bottom: 0.4pt solid var(--rule);
  vertical-align: baseline;
}
.wander tr:last-child td { border-bottom: 0; }
.wander-roll {
  font-family: var(--sans);
  font-weight: 700;
  text-align: right;
  width: 0.22in;
  color: var(--accent);
}

/* ------------------------------------------------------------------------ */
/* Phones                                                                    */
/* ------------------------------------------------------------------------ */

/* The inch-for-inch preview above is right wherever a whole sheet fits. On a
   screen narrower than the paper the browser can only fit it by zooming the
   page out to about half size, which leaves body text near 6px. There, and
   only there, the book reflows to the screen: one column, the page box
   dropped, type at reading size. Print is untouched — this is screen-only,
   and a phone that prints still gets @page and the rules above. */
@media screen and (max-width: 8.6in) {
  body { padding: 0; font-size: 11pt; text-align: left; hyphens: manual; }
  .book-page {
    width: auto;
    min-height: 0;
    margin: 0 0 6px;
    padding: 18px 16px 24px;
    box-shadow: none;
  }
  .cols { columns: 1; column-rule: 0; }
  .cover, .handout { min-height: 0; padding: 12px 0; }
  .cover-art { width: 100%; max-width: 5.4in; height: auto; }
  .cover h1 { font-size: 24pt; }
  .cards { grid-template-columns: 1fr; grid-template-rows: none; min-height: 0; }
  .stat-abilities { grid-template-columns: repeat(3, 1fr); }
  table { display: block; max-width: 100%; overflow-x: auto; }
}