/* v3 family sheet: fun. Loaded after assets/v3/v3-site.css on every footered page under /fun, by the top block
   scripts/inject-fun-footer.js writes (the room, fun/index.html, takes no notebook and does not load it).

   The bridge in v3-site.css section 25.3 sets every page's <main> to full sheet width and centres each child.
   The fun pages were each built to a measure of their own (46rem for the games and the essay list, 52rem for a
   book, 62rem for the design wall, 66rem for the desk, 78rem for the bookcase), so <main> takes its measure back
   and is centred on the sheet, and its children line up on its left edge like writing on a page. */

html.v3 .v3-fam-fun > main { box-sizing: border-box; width: 100%; max-width: calc(46rem + 2 * var(--v3-pad-x)); margin-left: auto; margin-right: auto; padding-top: 0; padding-bottom: 0; }
html.v3 .v3-fam-fun > main > * { margin-left: 0; margin-right: 0; }
html.v3 .v3-fam-fun > main.desk-page { max-width: calc(66rem + 2 * var(--v3-pad-x)); }
html.v3 .v3-fam-fun > main:has(.the-wall) { max-width: calc(62rem + 2 * var(--v3-pad-x)); }
html.v3 .reading-body .v3-fam-fun > main { max-width: calc(78rem + 2 * var(--v3-pad-x)); }
html.v3 .book-page .v3-fam-fun > main { max-width: calc(52rem + 2 * var(--v3-pad-x)); }
@media (max-width: 640px) {
  html.v3 .v3-fam-fun > main { padding-left: 18px; padding-right: 18px; }
}

/* Headings: Aleo Bold from the bridge. The bookcase's shelf names were set in capitals with tracking, which v3
   does not do to a heading, so they read in sentence case as written. */
html.v3 .v3-fam-fun .shelf-row h2 > span { text-transform: none; letter-spacing: 0; }

/* The back link above every page: the quiet v3 button from the bridge, and the hairline under it is the ink rule
   at 40%. */
html.v3 .v3-fam-fun .fun-top { border-bottom-color: var(--v3-black-40); }
html.v3 .v3-fam-fun .fun-what { font-family: var(--v3-font-body); color: var(--v3-ink); }
html.v3 .v3-fam-fun .lede { color: var(--v3-ink); }

/* The essay list and every other plain link list: ink, no cream on hover. */
html.v3 .v3-fam-fun .shelf a { color: var(--v3-ink); }
html.v3 .v3-fam-fun .shelf a:hover, html.v3 .v3-fam-fun .shelf a:focus-visible { background: var(--v3-paper-under); }

/* The games: a paper card with the sheet shadow (fun/_shared/fun.css .stage), and every number in it tabular. */
html.v3 .v3-fam-fun .stage { background: var(--v3-paper); box-shadow: var(--v3-shadow-sheet-box); }
html.v3 .v3-fam-fun :is(.hud, .score-big, .pct, table.board) { font-variant-numeric: tabular-nums; }

/* The desk illustration on /fun/productivity-tips is a pencil drawing on its own paper, so it is laid on the
   sheet as a print with the sheet shadow rather than as a cream box. Its labels are Schibsted, sentence case. */
html.v3 .v3-fam-fun .desk-plate { box-shadow: var(--v3-shadow-sheet-box); }
html.v3 .v3-fam-fun :is(.spot-tag, .listspot, .desk-all) {
  font-family: var(--v3-font-body); font-weight: 600; letter-spacing: .01em; text-transform: none;
  color: var(--v3-ink); background: var(--v3-paper); border: 1px solid var(--v3-ink); border-radius: 0;
}
html.v3 .v3-fam-fun .spot-tag { font-size: .78rem; }
html.v3 .v3-fam-fun :is(.spot:hover, .spot:focus-visible, .spot.is-open) .spot-tag,
html.v3 .v3-fam-fun :is(.listspot, .desk-all):hover { color: var(--v3-orange-text); border-color: var(--v3-orange); background: var(--v3-paper); }
html.v3 .v3-fam-fun :is(.spot:hover, .spot:focus-visible, .spot.is-open) { border-color: var(--v3-orange); border-radius: 0; }
html.v3 .v3-fam-fun :is(.desk-hint, .cl-count, .ls-count) { font-family: var(--v3-font-body); font-weight: 600; letter-spacing: .02em; text-transform: none; }

/* Small labels across the section (the bookcase counts, a book's facts, the design wall's hint and captions):
   Schibsted SemiBold at the label size in sentence case as written, as the bridge does for eyebrows (25.7). The
   lettering printed on a drawn book cover (.bk-cover i) is part of the drawing and is left alone. The bookcase's
   pop-out (.bk-modal) is appended to <body> by bookcase.js, outside the sheet, so it is named alongside. */
html.v3 :is(.v3-fam-fun, .bk-modal) :is(.rl-count, .shelf-row h2, .shelf-row h2 em, .bk-nonotes, .book-facts li, .wall-hint, .cap, .visit a) {
  font-family: var(--v3-font-body); font-weight: 600; letter-spacing: .02em; text-transform: none;
}
html.v3 .v3-fam-fun .shelf-row h2 > span { font-family: var(--v3-font-display); font-weight: 700; }
html.v3 .v3-fam-fun .shelf-row h2 em { font-style: normal; color: var(--v3-ink); }
html.v3 .v3-fam-fun .visit a { color: var(--v3-ink); }
html.v3 :is(.v3-fam-fun, .bk-modal) .book-facts li.rated { color: var(--v3-orange-text); border-color: var(--v3-orange); }

/* The design wall. Its plates (screenshots and photographs with edges of their own) are prints on the sheet: a
   white border and the sheet shadow, with no cream behind them. The cut out objects stand on the paper as they
   are. Every rule is scoped to the wall's own classes under this family, never to .shelf, which fun.css owns
   and which once squashed every object on this page by 43px. */
html.v3 .v3-fam-fun :is(.cell.plate img, .entry .shot.plate img) { background: var(--v3-paper); border: 0; box-shadow: var(--v3-shadow-sheet-box); }
html.v3 .v3-fam-fun .cell.drawn .coast { background: var(--v3-paper); }
html.v3 .v3-fam-fun .cell[aria-expanded="true"]::after { background: var(--v3-orange); }
html.v3 .v3-fam-fun .entry p { color: var(--v3-ink); }
html.v3 .v3-fam-fun .entry h2 { font-size: var(--v3-fs-h2); line-height: 1.05; }

/* A list of essays is a list of titles, so its links are not underlined like links in running text. */
html.v3 .v3-fam-fun .shelf a { text-decoration: none; }
/* The leaderboard's figure column is right aligned, and its head goes with it. */
html.v3 .v3-fam-fun table.board th:last-child { text-align: right; }

/* The pop-out itself sits on <body>, outside the sheet the bridge's type rules are scoped to, so it takes the
   v3 faces here: Aleo for its heading and Schibsted for the notes. */
html.v3 .bk-modal { font-family: var(--v3-font-body); color: var(--v3-ink); background: var(--v3-paper); border-radius: 0; }
html.v3 .bk-modal :is(h1, h2, h3) { font-family: var(--v3-font-display); font-weight: 700; }
html.v3 .bk-modal :is(p, li, .by) { font-family: var(--v3-font-body); }

/* A book's notes are long reading: numbered lists take Aleo numerals in #D93200 and bullets are the darker
   orange, as the article body does (section 16). */
html.v3 :is(.v3-fam-fun, .bk-modal) .notes ol > li::marker { font-family: var(--v3-font-display); font-weight: 700; color: var(--v3-orange-text); }
html.v3 :is(.v3-fam-fun, .bk-modal) .notes ul > li::marker { color: var(--v3-orange-text); }
html.v3 :is(.v3-fam-fun, .bk-modal) .notes code { background: var(--v3-paper-note); font-family: var(--v3-font-code); }