/* ---- THE SITE DRESSED AS THE BOOK, NOT AS A CLIENT ----
 *
 * `site.css` opens by saying what it is: "the reference window's aesthetic,
 * page-sized". It was right to, once. The 2D window was the only way in and a
 * site that looked like it was a site that looked like interval.
 *
 * The Unreal window is the main one now, so the site is dressed as a client
 * that is not. That is what reads as dated -- not the Verdana, not the bevels.
 *
 * AND THE ANSWER IS NOT THE OTHER CLIENT. Wearing the Unreal window's palette
 * is the obvious move and the weaker one: ink boards and a gold rule are tuned
 * for a dark viewport with a world behind them, and a page of prose in a
 * browser in daylight is not that. A website that looks like the game's HUD is
 * also a very well-worn move.
 *
 * It is dressed as the HANDBOOK. That is the most confident thing this project
 * has made, it is print-native so it reads as a page rather than as a port, and
 * nobody else ships a saddle-stitched A5 manual with the world's hash on the
 * last page. Paper also does not date the way a web style does, which is the
 * real answer to "it will feel old again in two years".
 *
 * EVERY VALUE HERE IS THE BOOK'S OWN. The paper, the ink, the brown of a
 * heading, the hairline inside the frame, the ornament with a lozenge set in
 * it: all lifted from `handbook.mjs` rather than picked again. If the book is
 * retuned, these are the numbers to copy.
 *
 * Loaded by index.html ALONE, after site.css, so the nav keeps working and no
 * other page moves while this one is being judged.
 */
:root {
  /* PREFIXED, BECAUSE site.css OWNS THE PLAIN NAMES. Its `--ink` is the
   * near-black the old page stood on and several of its rules still read it;
   * redefining that here changed things on this page nobody had asked to
   * change. These are the book's values under names of their own. */
  --bk-paper: #f4ecda;
  --bk-ink: #2f2418;
  --bk-brown: #6b4f16;
  --bk-rule: #8a6a22;
  --bk-quiet: #6d6049;
  --bk-foxing: rgba(176, 150, 102, .14);
}

/* THE GROUND. The book's paper, and the same soft foxing in the corners: three
 * radials, which is enough to stop a flat fill reading as a flat fill and few
 * enough to cost nothing. */
body {
  background: var(--bk-paper);
  background-image:
    radial-gradient(60vmin 46vmin at 14% 8%, var(--bk-foxing), transparent 70%),
    radial-gradient(52vmin 40vmin at 88% 72%, rgba(176, 150, 102, .12), transparent 70%),
    radial-gradient(40vmin 34vmin at 58% 40%, rgba(150, 122, 78, .07), transparent 70%);
  background-attachment: fixed;
  color: var(--bk-ink);
  font: 17px/1.62 "Iowan Old Style", Palatino, "Palatino Linotype", Georgia, serif;
  padding: 14px 12px 56px;
}

/* THE NAV IS A RUNNING HEAD, which is what a book has at the top of a page
 * instead of a toolbar. Small caps, letter-spaced, a rule under it, and no box
 * at all: a bar with a border round it is a web page's furniture. */
nav.stone {
  background: none;
  border: 0;
  /* THE SHADOW WAS STILL THERE, and it was the whole problem.
   *
   * site.css paints `.card, .stone { box-shadow: 0 2px 14px rgba(0,0,0,.35) }`,
   * and this sheet cleared the fill and the border and never touched the
   * shadow. A transparent box still casts one, so the running head rendered
   * as a floating slab hovering above the sheet: furniture, belonging to
   * neither the paper nor the window, which is exactly how it read.
   *
   * A running head has no box. It has a rule under it, and the rule belongs
   * to the page rather than to the words. */
  box-shadow: none;
  /* The double rule echoes the sheet's own double frame below it, so the head
   * and the page are made of the same two lines. */
  border-bottom: 3px double rgba(138, 106, 34, .55);
  display: flex;
  gap: 0;
  justify-content: center;
  padding: 0 0 7px;
  margin: 2px auto 24px;
  max-width: 860px;
}
nav.stone a {
  color: var(--bk-brown);
  text-transform: uppercase;
  letter-spacing: 2.2px;
  font-size: 11px;
  text-decoration: none;
  padding: 0 15px;
}
/* a thin separator BETWEEN the words, the way a printed contents line is set,
 * rather than six tabs with gaps between them */
nav.stone a + a { border-left: 1px solid rgba(138, 106, 34, .3); }
/* THE FILL HAD TO GO WITH THE COLOUR, AND DID NOT.
 *
 * site.css paints the current page and the hovered link as `background:
 * stone-dk; color: #fff` -- a dark tab with white letters, which is right on a
 * near-black page. This sheet overrode the COLOUR to dark ink and left the
 * background alone, so the tab you are actually on rendered as dark ink on a
 * dark fill: a solid black block where the word should be. The page you are
 * reading was the one word in the nav you could not read.
 *
 * On paper the current page is not a tab. It is the one that is not a link. */
nav.stone a:hover {
  background: none;
  color: var(--bk-ink);
  text-decoration: underline;
}
/* ON PAPER THE CURRENT PAGE IS NOT A TAB: it is the one that is not a link.
 * Marked by weight and by a short rule under the word itself, which is the
 * printed way of saying "you are here" and costs no box. */
nav.stone a.here {
  background: none;
  color: var(--bk-ink);
  font-weight: 600;
  text-decoration: none;
  position: relative;
}
nav.stone a.here::after {
  content: '';
  position: absolute;
  left: 15px; right: 15px; bottom: -4px;
  border-bottom: 2px solid var(--bk-rule);
}

/* THE PAGE ITSELF, inside the book's double frame: an outer rule and a
 * hairline a shade in from it. That pair is what says "book" before a word of
 * it is read, and it is the one piece of chrome on the whole page. */
main.stone {
  background: none;
  border: 0;
  position: relative;
  padding: 44px 46px 40px;
  max-width: 820px;
  margin: 0 auto;
}
main.stone::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1.4px solid var(--bk-rule);
  pointer-events: none;
}
main.stone::after {
  content: "";
  position: absolute;
  inset: 5px;
  border: .6px solid rgba(138, 106, 34, .55);
  pointer-events: none;
}

/* THE TORCHES GO. They were the window's brackets either side of a stone
 * title, and there is nothing to bracket on paper. */
.torch { display: none; }

/* THE TITLE, set as the book's cover sets it: wide letter-spacing, light
 * weight, centred, and no rule above or below it. A line over a title and a
 * line under it is the motif this project already decided reads as generic,
 * and the frame is doing that work anyway. */
/* THE TITLE WAS INVISIBLE AND NOT MISSING. site.css paints it with a gold
 * gradient clipped to the glyphs and `-webkit-text-fill-color: transparent`,
 * which wins over `color` whatever the specificity -- so killing the gradient
 * here left a transparent fill and a page with no name on it. The fill has to
 * be put back explicitly, and the drop-shadow filter with it. */
/* A BOOK HAS ONE COVER AND THEN CHAPTERS, and so does this. The cover sets the
 * world's name at full size with the island under it; a page inside the book
 * sets its own name smaller and does not repeat the picture. Reprinting the
 * coast at the head of every page would spend the one image the book allows
 * itself a dozen times over, and the first page would stop being the cover. */
h1 {
  font: 400 30px/1.15 "Iowan Old Style", Palatino, Georgia, serif;
  letter-spacing: 5px;
  text-align: center;
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: #2a2015;
  color: #2a2015;
  filter: none;
  text-shadow: none;
  margin: 2px 0 4px;
  padding: 0;
  border: 0;
}

/* THE COAST, which is the one picture the book allows itself: the island's
 * shape and nothing on it. It is drawn from the generator, so it cannot be out
 * of date, and it is the only image on this page. */
.cover h1 { font-size: 44px; letter-spacing: 11px; margin-bottom: 4px; }
.cover h1 + .thesis::before {
  content: "";
  display: block;
  /* 889 by 464 in the file, so the box is cut to the same ratio: a box of any
   * other shape letterboxes inside `contain` and the coast floats in a gap. */
  width: min(320px, 64%);
  height: 167px;
  margin: 14px auto 20px;
  background: url("/site/coastline.svg") center/contain no-repeat;
  opacity: .72;
}

.thesis {
  text-align: center;
  font-size: 19px;
  color: var(--bk-ink);
  margin-bottom: 18px;
  text-shadow: none;
}
.thesis b { color: var(--bk-brown); }

/* A CHAPTER OPENS WITH A DROP CAP, exactly as the book's do. */
.lede {
  font-size: 17px;
  color: var(--bk-ink);
  margin-bottom: 26px;
}
/* ONE DROP CAP PER PAGE, NOT ONE PER PARAGRAPH.
 *
 * The homepage has a single `.lede`, so a bare `.lede::first-letter` looked
 * like a rule about the opening paragraph. It is not: it is a rule about every
 * paragraph of body text, and the first page with four of them printed four
 * drop caps down one column. A drop cap says "the text starts here", and a
 * page that says that four times is not saying it at all.
 *
 * Matched on the first `.lede` of the page instead. `:first-of-type` is no use
 * because these are all `p` among other `p`s, so it is the one that follows the
 * title directly, which is what an opening paragraph is. */
.thesis + .lede::first-letter,
h1 + .lede::first-letter {
  float: left;
  font-size: 50px;
  line-height: 40px;
  padding: 4px 8px 0 0;
  color: var(--bk-rule);
  font-weight: 600;
}

/* A NUMBERED STEP IS A NUMBER, NOT A TILE. site.css gives each one a filled
 * dark square with a lighter border, which on a near-black page is a button
 * and on paper is a row of ink blocks down the margin, heavier than any of the
 * text beside them. A printed sequence numbers itself in the margin in the same
 * ink as the text, slightly larger, and nothing else. */
.steps li::before {
  background: none;
  border: 0;
  color: var(--bk-rule);
  font: 600 15px/1 "Iowan Old Style", Palatino, Georgia, serif;
  top: 2px;
}
.steps li { font-size: 15px; }
.steps b { color: var(--bk-brown); }

/* ---- AND THE TWO THINGS A PROSE PAGE HAS THAT THE COVER DID NOT ----
 *
 * Both were invisible on paper for the same reason the columns inverted: they
 * are painted for a near-black page. A note box is a dark panel with cream
 * text, which on paper is grey on grey; inline code is bright gold on black,
 * which on paper is a black chip with a glare in it. Neither was wrong before
 * this sheet existed, and neither survives contact with it.
 *
 * On paper a note is a marginal note: no panel at all, just the rule down the
 * side that already marks it, and the same ink as the text it interrupts. */
.rule {
  background: none;
  border-left: 2px solid var(--bk-rule);
  color: var(--bk-ink);
  padding: 2px 0 2px 16px;
  margin: 18px 0;
  font-size: 15px;
}
.rule b { color: var(--bk-brown); }

/* And a quoted command is set the way a book quotes one: in italic, in the
 * text's own face, and that is all. A tint behind it was tried and read as a
 * box with a border, because a filled rectangle around three words IS a box
 * however soft the fill is. Nothing printed puts a chip around a command. */
code {
  color: var(--bk-brown);
  /* `pre, code` in site.css gives both a fill AND a border, and killing only
   * the fill left the border drawing an empty rectangle round every command on
   * the page. A box with nothing in it is more visible than the box that was
   * filled, which is why this was easy to miss and obvious once seen. */
  background: none;
  border: 0;
  padding: 0;
  font-family: "Iowan Old Style", Palatino, Georgia, serif;
  font-style: italic;
  font-size: 1em;
}
pre {
  background: rgba(138, 106, 34, .08);
  border: .6px solid rgba(138, 106, 34, .4);
  color: var(--bk-ink);
}
pre code { background: none; padding: 0; color: var(--bk-ink); }

/* THE WORLD'S OWN COUNT, set as a book sets a figure: the number large and
 * quiet, the word under it in small caps. Not a dashboard tile. */
.tick {
  font: 400 30px/1.2 "Iowan Old Style", Palatino, Georgia, serif;
  letter-spacing: 5px;
  text-align: center;
  color: var(--bk-brown);
  background: none;
  border: 0;
  padding: 10px 0 2px;
  text-shadow: none;
}
.stats {
  display: flex;
  justify-content: center;
  gap: 42px;
  border: 0;
  background: none;
  padding: 4px 0 0;
}
.stat { background: none; border: 0; padding: 0; text-align: center; }
.stat .k {
  text-transform: uppercase;
  letter-spacing: 1.4px;
  font-size: 10.5px;
  color: var(--bk-quiet);
}
.stat .v { font-size: 20px; color: var(--bk-ink); }
.worldid, .ticklabel {
  text-align: center;
  font-size: 11.5px;
  color: var(--bk-quiet);
  letter-spacing: .6px;
  padding-top: 6px;
}

/* ---- THE ORNAMENT, WHICH IS HOW THE BOOK DIVIDES ANYTHING ----
 * A rule with a lozenge set into the middle of it. `handbook.mjs`: "A rule
 * across a page is a document; a rule with something set into the middle of it
 * is a book." Used here instead of the window's stone separators. */
.against, .isnot, .playbox { position: relative; }
.against::before, .isnot::before, .playbox::before {
  content: "\25C6";
  display: block;
  text-align: center;
  color: var(--bk-rule);
  font-size: 11px;
  margin: 30px auto 22px;
  width: 100%;
  border-top: .6px solid rgba(138, 106, 34, .55);
  line-height: 0;
  padding-top: 0;
  transform: translateY(-.5em);
  background: var(--bk-paper);
}

/* THE TWO COLUMNS stay two columns, because the comparison is the argument.
 * What goes is the pair of boxes: on paper a column is a column, told apart by
 * its heading and a rule between them.
 *
 * IT IS A GRID IN site.css AND IT STAYS ONE. The first cut set `display: flex`
 * here, which left the ornament `::before` as a third ITEM in the row: the two
 * columns of argument were squeezed into a third of the width each and came
 * out one word per line. The ornament spans the whole row instead. */
.against {
  gap: 0 34px;
  background: none;
  border: 0;
  padding: 0;
}
.against::before { grid-column: 1 / -1; }
.them, .here {
  background: none;
  border: 0;
  padding: 0;
}

/* ---- AND THE DIVIDER HAS TO BE CONTINUOUS ----
 *
 * The rule between the columns used to belong to one tall box, so drawing it
 * was a single border. With the pairs as rows there is no tall box any more:
 * there are seven separate items down the right-hand side, and a border on
 * each of them draws seven short lines with holes between.
 *
 * A grid item fills its row by default, so each right-hand item is already as
 * tall as its row. Take the row gap away and let padding do the spacing
 * instead, and the seven borders meet end to end and read as one line. The
 * headings lose their bottom margin for the same reason: a margin sits outside
 * the border box, so it would punch a gap through the rule at the top. */
.against { row-gap: 0; }
.against .here { border-left: .6px solid rgba(138, 106, 34, .4); padding-left: 32px; }
.against .them { padding-right: 4px; }
.against h3 { margin-bottom: 0; padding-bottom: 14px; }
.against p { padding-bottom: 15px; }
.them p, .here p, .isnot p { margin-bottom: 11px; }
.against p { margin-bottom: 0; }

@media (max-width: 620px) {
  /* one column, so there is nothing for a vertical rule to divide */
  .against .here { border-left: 2px solid rgba(138, 106, 34, .45);
    padding-left: 14px; }
  .against h3 { padding-bottom: 6px; }
  .against p { padding-bottom: 0; }
}

/* ---- AND THE TWO COLUMNS SWAP WEIGHT, WHICH THEY HAD TO ----
 *
 * site.css gives `.them` a dim grey and `.here` the parchment cream, and on a
 * near-black page that is exactly right: the dim column recedes and the bright
 * one is the argument. Put the same two colours on PAPER and it inverts. Cream
 * on cream is almost nothing, so the column making the case for this world was
 * the hardest thing on the page to read, while the column listing what every
 * other world does to you was the darkest and heaviest. The page argued
 * against itself.
 *
 * Matched at `.against .them p` because that is the shape site.css uses and a
 * bare `.them` loses to it. Ink for the case being made, and a grey a shade
 * lighter for the case being answered. */
 *
 * AND THESE SELECTORS BROKE ONCE ALREADY, in the quietest possible way. They
 * were written as `.against .them p`, which wants a paragraph INSIDE an
 * element called `them`. When the block was rebuilt as pairs the paragraph
 * BECAME the `.them`, so both rules stopped matching, nothing errored, and the
 * page silently went back to the dark sheet's colours: the case for this world
 * in cream on cream, the case against it in the heaviest ink on the page.
 * Matched on the element itself now, which is what the markup actually is. */
.against p.them, .against h3.them { color: var(--bk-quiet); }
.against p.here { color: var(--bk-ink); }
.against p.here b, .against h3.here { color: var(--bk-brown); }
.against h3.them { border-bottom-color: rgba(109, 96, 73, .35); }

h2, h3 {
  font: 600 13px/1.4 "Iowan Old Style", Palatino, Georgia, serif;
  text-transform: uppercase;
  letter-spacing: 1.7px;
  color: var(--bk-brown);
  border-bottom: .6px solid rgba(138, 106, 34, .5);
  padding-bottom: 5px;
  margin-bottom: 12px;
  background: none;
  text-shadow: none;
}

.isnot { background: none; border: 0; padding: 0; }
/* THE SAME INVERSION AS THE COLUMNS, one section down. site.css dims this
 * block's prose because on a near-black page a dim grey recedes politely; on
 * paper it goes to nothing and the five things this world is NOT -- which is
 * the most honest writing on the page -- came out as the faintest. */
.isnot p { color: var(--bk-ink); }
.isnot b, .here b { color: var(--bk-brown); }

/* THE DOOR. A printed book's call to action is a line of type and a rule, not
 * a button with a glow on it -- but this one is a door and has to look like
 * one, so it keeps its weight and loses the bevel: ink on paper, boxed in the
 * same hairline as everything else. */
.playbox { text-align: center; }
.playbtn {
  display: inline-block;
  font: 600 15px/1 "Iowan Old Style", Palatino, Georgia, serif;
  letter-spacing: 3.4px;
  text-transform: uppercase;
  color: var(--bk-paper);
  background: var(--bk-rule);
  border: 0;
  padding: 15px 34px;
  text-decoration: none;
  text-shadow: none;
  box-shadow: none;
}
.playbtn:hover { background: #6b4f16; }
.playsub {
  font-size: 13.5px;
  color: var(--bk-quiet);
  margin: 14px auto 0;
  max-width: 54ch;
}
.playsub.lesser { font-size: 12.5px; margin-top: 10px; }
.playsub a, .lede a, .here a, .isnot a { color: var(--bk-brown); }

/* THE FOOT LINK nav.js appends, which site.css styles as a stone strip. */
.foot, .foot a { color: var(--bk-quiet); }
.foot { border: 0; background: none; }

@media (max-width: 680px) {
  body { font-size: 16px; padding: 10px 8px 44px; }
  main.stone { padding: 26px 20px 28px; }
  h1 { font-size: 31px; letter-spacing: 6px; }
  /* THE ORNAMENT THAT WAS HERE DREW ITSELF SEVEN TIMES.
   *
   * `.here` used to be one tall column, so a single `::before` on it was the
   * mark that separated the two stacks once they stopped sitting side by side.
   * `.here` is now seven separate items, one per pair, and the same rule put a
   * diamond and a rule above every answer: six marks for a break that happens
   * nowhere. There is nothing to separate any more either, because the pairs
   * alternate down the page and each answer is already marked by its own rule
   * down the left. */
  .against .them { padding-right: 0; }
  .stats { gap: 24px; }
  /* A RUNNING HEAD ON A PHONE IS STILL A RUNNING HEAD. site.css turns the nav
   * into a three-column grid of tabs below 480px, which is a toolbar again
   * and takes a third of the screen before the world's name appears. It wraps
   * as a line of words instead, the way a contents line wraps. */
  nav.stone { display: flex; flex-wrap: wrap; row-gap: 4px; }
  nav.stone a { padding: 0 9px; font-size: 10.5px; letter-spacing: 1.6px; }
  nav.stone a.here::after { left: 9px; right: 9px; }
}

/* ---- A TABLE OF RANKS IS A LEDGER ----
 *
 * The hiscores, the board and the chart's keys are all tables, and site.css
 * paints a table the way the rest of that sheet works: a dark filled header
 * strip, a dark rule under every row, and a darker fill on hover. Those are
 * the right instincts for a near-black page and all three are wrong on paper.
 * A filled header band is a bar of ink across the top of the page, and a rule
 * under every single row is a cage.
 *
 * A ruled ledger does it with one line under the heading and hairlines between
 * the rows, light enough that the eye reads the column rather than the grid.
 * The site already ships `ledger-endpaper.svg` for the blank book sold in the
 * shop, and this is the same object: ruled paper with numbers written on it.
 */
table { font-size: 15px; }
th {
  background: none;
  color: var(--bk-brown);
  border-bottom: 1px solid var(--bk-rule);
  font: 600 11px/1.4 "Iowan Old Style", Palatino, Georgia, serif;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 6px 10px 7px;
}
td {
  border-bottom: .6px solid rgba(138, 106, 34, .22);
  color: var(--bk-ink);
  padding: 7px 10px;
}
tr:hover td { background: rgba(138, 106, 34, .07); }
.rank { color: var(--bk-quiet); }
/* YOUR OWN ROW, which has to be findable at a glance in a hundred. On the dark
 * sheet it is a lighter fill with a gold edge; on paper a fill competes with
 * the ruling, so it is the edge alone and the name set in the heading's brown. */
tr.mine td { background: rgba(138, 106, 34, .10); box-shadow: none; }
/* THE EDGE IS ON THE ROW, NOT ON EVERY CELL. site.css puts the inset shadow on
 * each `td`, which on a filled dark row is hidden by the fill everywhere but
 * the left. On paper the fill is a tint and all four bars show, so the row you
 * are looking for arrives cut into pieces by the thing meant to mark it. */
tr.mine td:first-child { box-shadow: inset 2px 0 0 var(--bk-rule); }
tr.mine td:nth-child(2) { color: var(--bk-brown); }
/* ---- THE BOARD'S STRIPES, WHICH WERE PAINTING OVER THE NAMES ----
 *
 * site.css stripes the board's even rows and gives the SECOND column -- the
 * names -- a fill of its own, because that column is sticky: the board scrolls
 * sideways under it, so it has to be opaque or the numbers slide under the
 * names. On a near-black page `#3f382e` is a shade off the page and does that
 * job invisibly. On paper it is a black bar across every other name, and the
 * hiscores arrived with half the citizens blacked out.
 *
 * The earlier fix here said `#board td:nth-child(2)` and quietly lost: the
 * striping rule is `#board tr:nth-child(even) td:nth-child(2)`, which carries
 * one more pseudo-class and therefore wins. Specificity, not order.
 *
 * So both are answered, and the sticky column is given the colour the row
 * actually shows rather than plain paper -- `#eee5d0` is the stripe flattened
 * onto the page, so the stripe runs unbroken across all four columns instead
 * of stopping dead at the names. */
#board tr:nth-child(even) td { background: rgba(138, 106, 34, .055); }
#board th:nth-child(2), #board td:nth-child(2) { background: var(--bk-paper); }
#board tr:nth-child(even) td:nth-child(2) { background: #eee5d0; }
#board tr:hover td { background: rgba(138, 106, 34, .10); }
#board tr:hover td:nth-child(2) { background: #eae0c8; }
#board th { color: var(--bk-brown); }
.nameb { color: var(--bk-ink); }
.footer, #findnote { color: var(--bk-quiet); }

/* ---- AND THE THINGS YOU TYPE INTO ----
 *
 * A field and two toggles, all three of them a dark fill with a dark border,
 * which on paper are three black boxes sitting in the middle of a page of
 * type. A printed form is a line to write on, so that is what these are: no
 * fill, a rule under the field, and the toggles as plain words that take a box
 * only when they are the one that is on.
 */
#find {
  background: none;
  color: var(--bk-ink);
  border: 0;
  border-bottom: 1px solid var(--bk-rule);
  border-radius: 0;
  font: italic 15px "Iowan Old Style", Palatino, Georgia, serif;
  letter-spacing: 0;
  padding: 5px 2px;
}
#find::placeholder { color: var(--bk-quiet); }
#find:focus { background: none; border-bottom-color: var(--bk-ink); }
.stab {
  background: none;
  border: .6px solid rgba(138, 106, 34, .45);
  color: var(--bk-brown);
  border-radius: 2px;
  font: 600 11px/1 "Iowan Old Style", Palatino, Georgia, serif;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  padding: 7px 11px;
}
.stab:hover { border-color: var(--bk-rule); color: var(--bk-ink); }
.stab.on { background: var(--bk-rule); border-color: var(--bk-rule); color: var(--bk-paper); }

/* ---- THE TWO DOORS ----
 *
 * The homepage asked one question with one button and explained the other half
 * in a paragraph underneath, set smaller than the rest. The choice is browser
 * or download; it is two buttons now, side by side, and they share a width so
 * neither reads as the real one and the other as a footnote.
 *
 * ON A PHONE THEY STACK, and the browser one is first because it is the one
 * that costs nothing. A row of two buttons at 360px is two buttons with four
 * letters each.
 */
.playbox.twin {
  display: flex;
  gap: 26px;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
}
.playbox.twin .door { flex: 1 1 300px; max-width: 360px; }
.playbox.twin .playbtn {
  display: block;
  padding: 15px 18px;
  font-size: 14px;
  letter-spacing: 2.6px;
}
.playbox.twin .playsub { margin-top: 12px; max-width: none; font-size: 13px; }
/* THE DIMENSION, SAID QUIETLY. It is the difference between the two and it is
 * not the name of either, so it sits on the button at half weight rather than
 * shouting 2D at somebody who has not yet been told what either door is. */
.dim2 {
  display: inline-block;
  margin-left: 10px;
  padding: 2px 7px;
  border: .6px solid rgba(244, 236, 218, .45);
  border-radius: 2px;
  font-size: 10.5px;
  letter-spacing: 1.6px;
  vertical-align: 2px;
  opacity: .85;
}
@media (max-width: 620px) {
  .playbox.twin { gap: 16px; }
  .playbox.twin .door { flex: 1 1 100%; max-width: none; }
}

/* site.css lays the nav out as a three-column grid below 480px. That is the
 * right answer for six tabs and the wrong one for a running head, which wraps
 * as a line of words. Stated at site.css's own breakpoint, 560px, so neither
 * sheet has to guess which loaded last. */
@media (max-width: 560px) {
  nav.stone { display: flex; grid-template-columns: none; }
  nav.stone a { padding: 0 8px; font-size: 10px; letter-spacing: 1.2px; }
  nav.stone a.here::after { left: 8px; right: 8px; }
}