/* The Magic of Oz.
 *
 * Three rules govern everything below.
 *
 * One: prose measure and reference measure are different problems. A chapter of
 * Baum wants ~34em and nothing else. An index of 426 names wants the whole
 * screen. The old stylesheet gave both of them 42rem, which made the reading
 * pages slightly too wide and the reference pages unusable. --measure and
 * --wide are that distinction, and .shell is what aligns the masthead to
 * whichever one the page is using.
 *
 * Two: script is allowed, but it is first-party, it never phones anywhere, and
 * the page must be complete without it. Search is the one thing that genuinely
 * needs it; everything else here is a link, an anchor, a <details> or a
 * checkbox, and still works with script off.
 *
 * Three: one mode, done properly. This is a paper-and-ink palette — a warm grey
 * ground, near-black ink, emerald and straw out of the books. It is not a
 * light theme awaiting a dark twin.
 */

/* --------------------------------------------------------------- tokens */

:root {
  color-scheme: light;

  --ground:      #EEF1EC;
  --surface:     #F7F9F6;
  --sunk:        #E4E9E2;
  --ink:         #14201B;
  --dim:         #5E6B63;
  --rule:        #D3DAD1;
  --hair:        #E2E7E0;
  --emerald:     #1B7351;
  --emerald-dim: #EAF2ED;
  --straw:       #A87A2E;
  --straw-dim:   #F5EEDF;
  --poppy:       #A5382C;

  /* Georgia is on every machine this site will be read on and sets Baum
     perfectly well. A period face would be better and is a later job: it means
     self-hosting the files, because a webfont CDN is the third-party request
     the privacy page says this site does not make. */
  --f-body: Georgia, "Iowan Old Style", "Palatino Linotype", Palatino, serif;
  --f-ui:   -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

  --measure: 34em;   /* prose: a chapter, an essay */
  --wide:    46rem;  /* a single column of reference rows: index, shelf, chapters */
  --frame:   62rem;  /* the widest a page goes: --wide plus the contents rail */
  --gutter:  clamp(20px, 5vw, 40px);
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 17px/1.62 var(--f-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* One shell, three widths. The article takes whichever its page needs; the
   masthead and footer always take the full frame.

   Letting the header track the article width was tried and is wrong twice
   over: on a prose page the wordmark, five nav links and the search field no
   longer fit on one line and the header wraps, and walking from the library to
   a chapter makes the wordmark jump left. A header that moves as you navigate
   reads as a bug. Fixed at the frame it is the edge of the page — which is
   what a masthead is — and no article ever grows past it, so the wordmark is
   never indented inside the text it heads. */
.shell {
  max-width: var(--w);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

.masthead .shell, footer .shell { --w: var(--frame); }

/* Prose measure: a chapter, the front door, a hand-written page. */
body { --w: calc(var(--measure) + 2 * var(--gutter) + 4em); }

/* Everything that is a list of things to find runs the full width of the frame
   — the same edges as the masthead above and the footer below, so the page
   reads as one block rather than a narrow strip inside a wide one. A book's
   chapter list belongs here with the indexes and the shelf: it is a table of
   contents, scanned the same way. Still a single column; it is the column that
   got wider, not the count. */
.tpl-index-list, .tpl-library, .tpl-book, .tpl-entity, .tpl-map { --w: var(--frame); }

/* The whole map page takes the width, prose included. `.page p` caps
   paragraphs at a reading measure, which is right for a written page but wrong
   here: the text above the map is a caption to it, and a caption indented to
   half the width of the thing it captions looks like a mistake rather than a
   choice.

   `.page.mappage` rather than `.mappage`, because `.page p` is declared further
   down this file and would otherwise win the tie on source order. */
.page.mappage > p, .page.mappage .mapnote { max-width: none; }

/* The same on the indexes and the shelf. The paragraph under "Places" or "The
   Library" introduces the list below it, so it should share that list's edges;
   held to a reading measure it ended two-thirds of the way across and read as
   a stray column beside a full-width page. Written pages keep the measure —
   /about and /method are prose, and prose wants a short line. */
.page.index-page > p { max-width: none; }

a { color: var(--emerald); text-underline-offset: 3px; }
a:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--emerald);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip {
  position: absolute;
  left: -9999px;
  background: var(--ink);
  color: var(--ground);
  padding: 10px 16px;
}
.skip:focus { left: 12px; top: 12px; z-index: 20; }

/* ------------------------------------------------------------- masthead */

.masthead {
  border-bottom: 1px solid var(--rule);
  background: var(--ground);
}
.masthead .shell {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 32px;
  align-items: center;
  padding-block: 16px;
}

.wordmark {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-right: auto;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.005em;
  color: var(--ink);
  text-decoration: none;
}
.wordmark .mark { width: 28px; height: 28px; flex: none; }
.wordmark span { line-height: 1; }

.masthead nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 22px;
  font-family: var(--f-ui);
  font-size: 14px;
}
.masthead nav a {
  color: var(--dim);
  text-decoration: none;
  padding-block: 2px;
  border-bottom: 1.5px solid transparent;
}
.masthead nav a:hover { color: var(--emerald); border-bottom-color: var(--emerald); }
.masthead nav a[aria-current] { color: var(--ink); border-bottom-color: var(--straw); }

/* ---------------------------------------------------------------- search */

/* 659 entries behind one field. It sits in the masthead on every page because
   the thing a reader wants next is almost always a name, and until now the only
   way to reach one was to open a 426-entry index and scroll.

   The field is [hidden] in the HTML and revealed by search.js, so it never
   appears as a dead box. The nav beside it is the fallback and a real one. */

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.search {
  position: relative;
  flex: 1 1 13rem;
  max-width: 20rem;
  margin: 0;
  border: 0;
  padding: 0;
}
.search[hidden] { display: none; }

.search input {
  width: 100%;
  padding: 8px 32px 8px 12px;
  border: 1px solid var(--rule);
  border-radius: 3px;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--f-ui);
  font-size: 14px;
  line-height: 1.3;
  appearance: none;
}
.search input::placeholder { color: var(--dim); opacity: 1; }
.search input:focus {
  outline: none;
  border-color: var(--emerald);
  box-shadow: 0 0 0 3px var(--emerald-dim);
}
.search input::-webkit-search-cancel-button { appearance: none; }

/* The shortcut, shown rather than documented. Hidden once the field is focused,
   where it would be telling the reader something they have already done. */
.search kbd {
  position: absolute;
  top: 50%;
  right: 9px;
  transform: translateY(-50%);
  padding: 1px 6px;
  border: 1px solid var(--rule);
  border-radius: 3px;
  background: var(--ground);
  color: var(--dim);
  font-family: var(--f-ui);
  font-size: 11px;
  line-height: 1.5;
  pointer-events: none;
}
.search input:focus ~ kbd, .search input:not(:placeholder-shown) ~ kbd { display: none; }

.results {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 30;
  max-height: min(70vh, 30rem);
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 3px;
  box-shadow: 0 8px 28px rgba(20, 32, 27, 0.13);
}
.results[hidden] { display: none; }
.results ul { list-style: none; margin: 0; padding: 4px; }

.results a {
  display: block;
  padding: 8px 10px;
  border-radius: 2px;
  text-decoration: none;
  color: var(--ink);
}
.results li[aria-selected="true"] a, .results a:hover { background: var(--emerald-dim); }

.sr-name { font-size: 15.5px; }
.sr-name mark {
  background: none;
  color: var(--emerald);
  font-weight: 700;
}
.sr-kind {
  margin-left: 8px;
  font-family: var(--f-ui);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--straw);
}
.sr-sum {
  display: block;
  margin-top: 1px;
  font-family: var(--f-ui);
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--dim);
}
.sr-empty { margin: 0; padding: 14px 14px; font-size: 14px; color: var(--dim); }

@media (max-width: 640px) {
  .search { order: 3; flex-basis: 100%; max-width: none; }
}

main { display: block; }
main > * { padding-block: clamp(28px, 5vw, 52px) 80px; }

/* --------------------------------------------------------------- typography */

h1 {
  font-size: clamp(30px, 4.4vw, 40px);
  line-height: 1.12;
  letter-spacing: -0.012em;
  text-wrap: balance;
  margin: 0 0 10px;
}

h2 {
  font-family: var(--f-ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--dim);
  margin: 44px 0 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--rule);
}

h3 { font-size: 18px; margin: 0 0 6px; }
p { margin: 0 0 14px; }

.kind {
  font-family: var(--f-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--straw);
  margin: 0 0 6px;
}

.note { color: var(--dim); font-size: 14.5px; max-width: var(--measure); }
.qualify { color: var(--dim); font-size: 13px; }
.credits { color: var(--dim); }

.breadcrumb {
  font-family: var(--f-ui);
  font-size: 13px;
  color: var(--dim);
  margin-bottom: 10px;
}
.breadcrumb a { color: var(--dim); text-decoration: none; }
.breadcrumb a:hover { color: var(--emerald); text-decoration: underline; }

/* ------------------------------------------------------------ front door */

.home h1 {
  font-size: clamp(36px, 6vw, 52px);
  letter-spacing: -0.02em;
}
.home h1::after {
  content: "";
  display: block;
  width: 96px;
  height: 3px;
  margin: 18px 0 0;
  background: linear-gradient(90deg, var(--emerald) 0 42%, var(--straw) 42% 100%);
}
.standfirst {
  font-size: clamp(20px, 2.6vw, 23px);
  font-style: italic;
  line-height: 1.45;
  color: var(--dim);
  margin: 18px 0 26px;
  max-width: 26em;
}

/* The five ways in. These are the whole navigation of the site for a first-time
   reader, so they are doors rather than list items: the name carries the weight
   and the count underneath tells you what is behind it. */
.doors {
  list-style: none;
  padding: 0;
  margin: 40px 0 36px;
  display: grid;
  gap: 1px;
  background: var(--rule);
  border-block: 1px solid var(--rule);
}
.doors li { background: var(--ground); }
.doors li a {
  display: block;
  padding: 18px 4px;
  text-decoration: none;
  font-size: 21px;
}
.doors li a:hover { background: var(--surface); }
.doors li a:hover .door-name { color: var(--emerald); text-decoration: underline; }
.doors .door-name { color: var(--ink); display: block; }
.doors span:not(.door-name) {
  display: block;
  margin-top: 3px;
  color: var(--dim);
  font-size: 14.5px;
  font-family: var(--f-ui);
}

/* The five doors stay stacked. Two abreast made the reader choose between
   columns before choosing a door, and the front page is the one place worth
   spending a whole line on each way in. */

/* ---------------------------------------------------------------- indexes */

/* 426 names in one column was a scroll, not an index. Three things fix it and
   none of them need script: the alphabet is a row of anchors at the top, the
   entries flow into as many columns as the window allows, and each letter is a
   scroll target with its own heading. Ctrl-F still works over all of it,
   because all of it is in the page. */

.az {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin: 22px 0 8px;
  padding: 10px 0;
  background: var(--ground);
  border-bottom: 1px solid var(--rule);
  font-family: var(--f-ui);
}
/* The alphabet spreads to fill the column rather than sitting at a fixed size.
   At a fixed 1.85em a 27-letter rail is wider than the single-column measure
   and wrapped, leaving Z alone on a second line. Letting each letter flex means
   the rail is always exactly one line and always the width of the list it
   points into. */
.az a, .az span {
  flex: 1 1 auto;
  min-width: 1.35em;
  padding: 3px 0;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: 3px;
  text-decoration: none;
}
.az a { color: var(--emerald); }
.az a:hover { background: var(--emerald); color: var(--ground); }
.az span { color: var(--rule); }          /* a letter nothing is filed under */
.az .all { flex: 0 0 auto; min-width: auto; padding-inline: 10px; color: var(--dim); }

/* One column, each letter section running the full width of it.

   Multi-column was denser and worse to read: the eye has to find the top of the
   next column, an entry's blurb wraps every four or five words, and a name and
   the chapter it comes from end up on different lines for no reason but the
   column being narrow. One column gives each entry a whole line, which is what
   a reference entry wants. The A–Z rail is what makes the length navigable.

   .entities is the plain block that wraps the letter headings and their lists;
   it carries no column properties, and should not grow any. */
.entity-list { list-style: none; padding: 0; margin: 0; }

/* ------------------------------------------------------------------ cards */

/* One treatment for every row that is really a link: an index entry, a book on
   the shelf, a chapter in a book. The whole row is the target, it says so on
   hover, and a chevron at the right edge says so before you hover.

   The motion is deliberately small — a hairline ground, a hair of movement, a
   chevron that slides a couple of pixels. This is a paper-and-ink site and a
   card that lifts off the page with a shadow would be borrowed from a different
   one. What matters is that the row answers when you point at it. */
.card {
  display: flex;
  align-items: baseline;
  gap: 4px 16px;
  padding: 13px 14px 13px 12px;
  margin-left: -12px;
  border-radius: 3px;
  color: inherit;
  text-decoration: none;
  border-left: 2px solid transparent;
  transition: background-color 0.13s ease, border-color 0.13s ease, transform 0.13s ease;
}
.card-main { flex: 1 1 auto; min-width: 0; }

a.card:hover {
  background: var(--surface);
  border-left-color: var(--emerald);
  transform: translateX(2px);
}
a.card:focus-visible {
  outline: 2px solid var(--emerald);
  outline-offset: -2px;
  background: var(--surface);
}

/* The affordance, before the pointer arrives: present but quiet, and it moves
   with the row rather than appearing out of nothing on hover — an icon that
   only exists on hover cannot tell anyone the row is clickable. */
.go {
  flex: none;
  align-self: center;
  font-size: 19px;
  line-height: 1;
  color: var(--rule);
  transition: color 0.13s ease, transform 0.13s ease;
}
a.card:hover .go, a.card:focus-visible .go {
  color: var(--emerald);
  transform: translateX(3px);
}

a.card:hover .name, a.card:focus-visible .name,
a.card:hover .title, a.card:focus-visible .title,
a.card:hover .ct, a.card:focus-visible .ct { color: var(--emerald); }

/* A book with no chapters yet is not a link, so it gets none of this. */
span.card { cursor: default; }

/* The letter a group is filed under. Full width, with the rule running the
   whole measure so it reads as a section divider rather than a label. */
.letter {
  margin: 34px 0 4px;
  padding: 0 0 8px;
  font-family: var(--f-body);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--straw);
  border-bottom: 1px solid var(--straw-dim);
  scroll-margin-top: 72px;
}
/* The first letter keeps the same space above it as every other letter. Zeroing
   it pulled A up tight under the alphabet rail while B, C and D each sat in
   their own air, so the top of the list was a different shape from the rest of
   it for no reason a reader could see. */

/* The row's padding lives on the card now, so the <li> carries only the rule
   between entries. */
.entities li { padding: 0; margin: 0; border-bottom: 1px solid var(--hair); }
.entities .name { font-size: 17px; color: var(--emerald); transition: color 0.13s ease; }
.entities .blurb {
  display: block;
  margin-top: 2px;
  font-size: 15px;
  line-height: 1.45;
  color: var(--ink);
}
.entities .meta {
  display: block;
  margin-top: 4px;
  font-family: var(--f-ui);
  font-size: 12.5px;
  color: var(--dim);
}

/* A creature is not a person, and the combined index gave no way to tell them
   apart short of opening the page. One quiet word does it. */
.entities .tag {
  font-family: var(--f-ui);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--straw);
  margin-left: 7px;
  vertical-align: 1px;
}

/* The page's own contents, for an index that is really three indexes. Set as
   a row of targets rather than a bulleted list, because it is navigation. */
.worldnav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 24px 0 8px;
  padding-bottom: 4px;
}
.worldnav a {
  display: flex;
  align-items: baseline;
  gap: 9px;
  padding: 8px 14px;
  border: 1px solid var(--rule);
  border-radius: 20px;
  background: var(--surface);
  font-family: var(--f-ui);
  font-size: 13.5px;
  color: var(--ink);
  text-decoration: none;
  transition: border-color 0.13s ease, color 0.13s ease;
}
.worldnav a:hover { border-color: var(--emerald); color: var(--emerald); }
.worldnav .wn-count {
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  color: var(--straw);
}

.worldgroup { margin-top: 44px; scroll-margin-top: 20px; }
.worldgroup > h2 {
  font-family: var(--f-body);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--ink);
  border-bottom-width: 2px;
  border-bottom-color: var(--ink);
}

.countline {
  font-family: var(--f-ui);
  font-size: 13px;
  color: var(--dim);
  margin: 0;
}

/* ----------------------------------------------------------- entity pages */

/* An entity page is eight sections and, for Dorothy, fifty-seven kilobytes.
   On a wide screen the section list becomes a rail beside the article: the
   reader can see the shape of the page and jump into it. Below that width it
   is a plain row of links above the article, which is the same information in
   the shape a phone can use. Anchors only. */

@media (min-width: 1000px) {
  /* The body column is capped near the reading measure and the rail is pushed
     to the far edge of the frame, so the article lines up under the wordmark
     and the rail lines up under the search field, instead of both drifting
     into the middle of a wide window. */
  .entity {
    display: grid;
    grid-template-columns: minmax(0, 46rem) 13rem;
    justify-content: space-between;
    gap: 0 44px;
    align-items: start;
  }
  .entity > * { grid-column: 1; min-width: 0; }
  .entity > .contents {
    grid-column: 2;
    grid-row: 1 / span 99;
    position: sticky;
    top: 24px;
    margin: 0;
  }
}

.contents {
  margin: 0 0 30px;
  padding: 14px 0;
  border-block: 1px solid var(--rule);
  font-family: var(--f-ui);
}
.contents h2 {
  margin: 0 0 8px;
  padding: 0;
  border: 0;
  font-size: 11px;
}
.contents ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
}
.contents a {
  font-size: 13.5px;
  color: var(--dim);
  text-decoration: none;
  padding-block: 2px;
}
.contents a:hover { color: var(--emerald); text-decoration: underline; }

@media (min-width: 1000px) {
  .contents { border: 0; padding: 0; border-left: 1px solid var(--rule); padding-left: 18px; }
  .contents ul { flex-direction: column; gap: 7px; }
}

.entity section { scroll-margin-top: 24px; }

.aliases { color: var(--dim); font-style: italic; margin: 0 0 16px; }

/* The summary is the first thing a reader wants and the thing most of these
   pages lacked, so it carries the weight of the page rather than sitting in the
   same grey as the metadata around it. */
.entity .summary {
  font-size: 20px;
  line-height: 1.5;
  color: var(--ink);
  max-width: var(--measure);
  margin: 0 0 16px;
}
.first { color: var(--dim); margin: 0; }

.confidence { font-size: 13.5px; color: var(--dim); margin: 12px 0 0; max-width: var(--measure); }
.confidence.confirmed { color: var(--emerald); }

/* How sure we are, said plainly next to the claim itself. */
.ev {
  font-family: var(--f-ui);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: help;
}
.ev.confirmed   { color: var(--emerald); }
.ev.plausible   { color: var(--straw); }
.ev.unconfirmed { color: var(--poppy); }
.ev.disputed    { color: var(--poppy); text-decoration: line-through; }

.cites { list-style: none; padding: 0; margin: 0; }
.cites li { padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid var(--hair); }
.cite { font-family: var(--f-ui); font-size: 13px; color: var(--dim); }
.cite:hover { color: var(--emerald); }

.rel {
  color: var(--straw);
  font-variant: small-caps;
  letter-spacing: 0.04em;
}

/* One claim per row — "friend of Ozma" — with its evidence folded away behind
   a toggle labelled with the number of chapters that state it. The claim reads
   as a sentence; the count sits at the right edge so the counts line up down
   the list and the better-attested connections are visible at a glance. */
.relations { list-style: none; padding: 0; margin: 0; }
.relations > li { border-bottom: 1px solid var(--hair); }

/* The whole row is the summary, so the count keeps its place in the right hand
   column whether the row is open or shut. Opening only adds the body beneath
   it — the control the reader just clicked does not move out from under the
   pointer they would use to close it again. */
.relev summary {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 4px 16px;
  padding: 11px 0;
  cursor: pointer;
  list-style: none;
}
.relev summary::-webkit-details-marker { display: none; }
.relev summary:hover .relcount { color: var(--emerald); }
.relev summary:focus-visible { outline: 2px solid var(--emerald); outline-offset: -2px; border-radius: 2px; }

.relations .relclaim { grid-column: 1; font-size: 16.5px; }

/* No reserved column for the relationship. Holding it to 7.5em was meant to
   line the names up, and it did the opposite: short labels got a gap wide
   enough to read as a missing word ("friend of      Dorothy Gale"), while
   "transformed into" overran the column and butted straight against its name.
   Set as a phrase, every row reads the same way — which is how the claim is
   spoken anyway. */
/* The relationship gets the same breathing room on both sides. It only had it
   on the right, so "Gargoyles enemy of  Dorothy Gale" sat tight against the
   name before it and loose against the name after — and because the label
   widths differ, the second name landed somewhere different on every row. Even
   margins also make an inbound row space exactly like an outbound one, where
   the label leads and the gap after it is all there is. */
.relations .rel { margin-right: 0.35em; }
.relations .relclaim > .rel:not(:first-child) { margin-left: 0.35em; }

.relcount {
  grid-column: 2;
  justify-self: end;
  font-family: var(--f-ui);
  font-size: 11.5px;
  letter-spacing: 0.05em;
  color: var(--dim);
  white-space: nowrap;
}
.relcount::after {
  content: "▸";
  display: inline-block;
  margin-left: 7px;
  color: var(--straw);
  font-size: 12px;
  vertical-align: -1px;
}
.relev[open] .relcount::after { content: "▾"; }

.relev-body {
  padding: 0 0 14px 14px;
  border-left: 2px solid var(--straw-dim);
  margin-left: 2px;
}
.relations .where { display: block; margin: 0; font-family: var(--f-ui); font-size: 12.5px; color: var(--dim); }
.relations .pull { margin-top: 7px; font-size: 15.5px; }

.pull {
  margin: 8px 0 0;
  padding-left: 14px;
  border-left: 2px solid var(--rule);
  color: var(--dim);
  font-style: italic;
  max-width: var(--measure);
}
.first-quote { margin-top: 8px; }

/* The books in their own words — the best content on the page, set like it. */
.described-quote {
  margin: 0 0 18px;
  padding: 2px 0 2px 18px;
  border-left: 3px solid var(--straw);
  font-size: 17.5px;
  line-height: 1.55;
  max-width: var(--measure);
}
.described-quote cite {
  display: block;
  margin-top: 7px;
  font-family: var(--f-ui);
  font-size: 12.5px;
  font-style: normal;
  color: var(--dim);
}

.names b { font-size: 15.5px; }
.names .meta { display: block; font-family: var(--f-ui); font-size: 12.5px; color: var(--dim); }

/* Where the books disagree.
 *
 * This is the site's editorial position made visible — every other Oz reference
 * has had to choose a side — and it was rendering as a pale warning box with
 * the passages in a bullet list, which made a deliberate stance look like a
 * validation error. The panel is gone. What is left is the explanation, and
 * then the passages themselves set side by side as evidence, each over the
 * author who wrote it and the year they wrote it, so a reader can see the
 * disagreement rather than be told about it. */

/* The explanation is ordinary prose — the same paragraph the rest of the page
   uses — because it is ordinary prose. Styling it as its own panel made the
   section read as two competing blocks before the evidence had even started.
   The section is one block: a sentence saying what the disagreement is, then
   the passages that constitute it. */
.entity #disagree > p { max-width: var(--measure); }

/* A quoted passage looks the same wherever it appears. These are the same kind
   of object as the ones under "As the books describe them" — the books' own
   words with a citation under them — so they get the same treatment: a straw
   rule down the left and nothing else. Boxing them in bordered white panels
   made three quotations look like an alert about a problem, which is the
   opposite of the point: the disagreement is the content, not a warning. */
.sides {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
}
.sides li {
  margin: 0 0 18px;
  padding: 2px 0 2px 18px;
  border-left: 3px solid var(--straw);
}
.sides li:last-child { margin-bottom: 0; }
.sides blockquote {
  margin: 0;
  padding: 0;
  border: 0;
  max-width: var(--measure);
  font-size: 17.5px;
  line-height: 1.55;
  color: var(--ink);
}
.sides .side-src {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 8px;
  margin: 7px 0 0;
  font-family: var(--f-ui);
  font-size: 12.5px;
  color: var(--dim);
}
.sides .side-who { color: var(--dim); }
.sides .side-where::before,
.sides .side-year::before { content: "·"; margin-right: 8px; color: var(--straw); }

/* Worked out rather than quoted: present, useful, and visibly not the same kind
   of thing as a citation. */
.derived .cites li { border-bottom-style: dashed; }
.derived .how { display: block; margin-top: 3px; font-family: var(--f-ui); font-size: 12.5px; color: var(--dim); }

.inline {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 7px 18px;
}
.together .inline li { display: flex; align-items: baseline; gap: 5px; }
.together .n { color: var(--straw); font-family: var(--f-ui); font-size: 11px; font-variant-numeric: tabular-nums; }

/* ----------------------------------------------- appearances, by book */

/* A book, and how much of it a thing is in. The coverage line is the point:
   "all 24 chapters" tells a reader more than twenty-four links they will not
   follow. <details> keeps this working with no JavaScript on the page. */

.bookgroup { border-bottom: 1px solid var(--hair); }
.bookgroup:first-of-type { border-top: 1px solid var(--hair); }
.bookgroup summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  padding: 12px 0;
  cursor: pointer;
  list-style: none;
}
.bookgroup summary::-webkit-details-marker { display: none; }
.bookgroup summary::before {
  content: "▸";
  color: var(--straw);
  font-size: 11px;
  width: 1em;
  flex: none;
  transition: transform 0.12s ease;
}
.bookgroup[open] summary::before { transform: rotate(90deg); }
.bookgroup summary:hover .bt { color: var(--emerald); }
.bookgroup .bt { font-size: 16.5px; }
.bookgroup .cov { font-family: var(--f-ui); font-size: 12.5px; color: var(--dim); }

/* Chapters read as chapters, not as a row of numbers: the number keeps its
   column so the titles line up, and the title is what you actually scan. */
.chapterlinks {
  list-style: none;
  margin: 0 0 12px;
  padding: 0 0 0 1.6em;
}
.chapterlinks li { break-inside: avoid; margin: 0; }
.chapterlinks a {
  display: flex;
  gap: 10px;
  align-items: baseline;
  padding: 4px 6px 4px 0;
  border-radius: 3px;
  text-decoration: none;
  font-size: 14.5px;
}
.chapterlinks a:hover { background: var(--surface); }
.chapterlinks .n {
  flex: none;
  width: 2em;
  text-align: right;
  color: var(--straw);
  font-family: var(--f-ui);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}
.chapterlinks .ct { color: var(--ink); }
.chapterlinks a:hover .ct { color: var(--emerald); }

/* ---------------------------------------------------------- the library */

/* Twenty-five books set as a bulleted list read as a bibliography. A library is
   a thing you look along. Each book gets a card with its number in the sequence
   and its year, grouped by who was writing — the handover from Baum to Thompson
   in 1921 is the single most useful fact about the shape of this shelf, and the
   old list stated it nowhere. */

/* One book per row, full width. A grid of cards packed four across turned the
   shelf into a contact sheet — you read it by scanning a block, not by running
   your eye down a spine. In a single column the title, its credits and its
   length line up in three fixed places down the page, which is how a
   bibliography is read and how a shelf is looked along. */
.shelf {
  list-style: none;
  padding: 0;
  margin: 16px 0 0;
}
.shelf li { border-bottom: 1px solid var(--hair); }

/* No permanent left rule on a shelf row. It was left over from the design
   before these became cards, and against the card's own inset it rendered as a
   column of broken green dashes down the page rather than a continuous shelf
   edge. The hover edge every other card gets does the job, and does it only
   when it means something. */
.shelf .card { align-items: center; }
.shelf .title {
  display: block;
  font-size: 18.5px;
  line-height: 1.3;
  color: var(--emerald);
  transition: color 0.13s ease;
}
.shelf li.quiet .title { color: var(--dim); }
.shelf .credits {
  display: block;
  margin-top: 2px;
  font-family: var(--f-ui);
  font-size: 13px;
  color: var(--dim);
}
/* The length is pushed to the right edge and given a fixed column, so "6
   chapters" and "30 chapters" end at the same place and the numbers can be
   compared by running an eye down them. Without the min-width they were merely
   right-of-centre and each row ended somewhere different. */
.shelf .count {
  flex: none;
  min-width: 7.5em;
  text-align: right;
  font-family: var(--f-ui);
  font-size: 11px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--straw);
}
.shelf li.quiet .count { color: var(--dim); }

.shelf-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
  margin: 44px 0 0;
}
.shelf-head h2 {
  font-family: var(--f-body);
  font-size: 23px;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--ink);
  margin: 0;
  padding: 0;
  border: 0;
}
.shelf-head .span {
  font-family: var(--f-ui);
  font-size: 13px;
  color: var(--dim);
}

/* ------------------------------------------------------------- one book */

/* A book's chapters in one column, in order. Two or three columns made the
   reader jump back to the top of the page to continue at chapter 13, which is
   exactly wrong for a list whose whole meaning is its order. */
.chapters { list-style: none; padding: 0; margin: 18px 0 0; }
.chapters li { border-bottom: 1px solid var(--hair); }
.chapters .card { padding-block: 10px; gap: 14px; }
.chapters .n {
  flex: none;
  width: 2em;
  text-align: right;
  color: var(--straw);
  font-family: var(--f-ui);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}
/* The title, not "the last span" — the chevron is the last span now. */
.chapters .ct { flex: 1 1 auto; color: var(--ink); font-size: 16px; transition: color 0.13s ease; }

/* ------------------------------------------------------------ the plates */

.plates { margin-top: 44px; }

/* The line about the plates is a caption to the grid under it, so it shares the
   grid's edges. `.note` holds text to a reading measure, which is right for a
   note in a column of prose and wrong for one heading a full-width gallery. */
.plates .note { max-width: none; }

/* The plates are scans of whatever was on the page — a full-page colour plate,
   a decorated initial, a strip of caption two inches tall. Shown at their own
   proportions they made a grid with holes in it: rows an inch high next to rows
   a foot high, and a caption stranded beside a picture six times its size.
   Normalising them to one tile shape is what makes it a gallery rather than a
   pile. object-fit: contain keeps every plate whole — a scan cropped to fill
   would cut the head off a drawing — and the tile's ground shows the shape of
   what is in it. The lightbox is where the plate is seen properly. */
.plate-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 18px;
  margin: 20px 0 0;
}
.plate { margin: 0; }
.plate a {
  display: block;
  border: 1px solid var(--rule);
  background: var(--surface);
  border-radius: 2px;
  overflow: hidden;
  transition: border-color 0.13s ease, transform 0.13s ease, box-shadow 0.13s ease;
}
.plate a:hover {
  border-color: var(--emerald);
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(20, 32, 27, 0.10);
}
.plate a:focus-visible { outline: 2px solid var(--emerald); outline-offset: 2px; }
/* height:auto is load-bearing, not tidiness. Every plate carries width/height
   attributes for layout stability, and the height attribute maps to the CSS
   height property — which outranks aspect-ratio. Without this the tiles took
   the scan's raw pixel height and the grid became five columns 4,322px tall. */
.plate img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: contain;
  background: #F3EFE2;
  padding: 6px;
}
.plate figcaption {
  margin-top: 7px;
  font-family: var(--f-ui);
  font-size: 12px;
  color: var(--dim);
}

/* The lightbox, opened by :target. Hidden with display:none rather than
   opacity, which is what keeps the full-size scan from being downloaded until
   someone actually opens it. */
.lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 50;
  padding: 3vh 4vw;
  overflow: auto;
}
.lightbox:target { display: grid; align-content: center; justify-items: center; gap: 14px; }

/* The scrim is a link, so clicking anywhere outside the plate closes it. */
.lb-scrim {
  position: fixed;
  inset: 0;
  background: rgba(16, 22, 19, 0.86);
  cursor: zoom-out;
}

.lightbox figure {
  position: relative;
  margin: 0;
  max-width: min(64rem, 92vw);
}
.lightbox img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 78vh;
  margin: 0 auto;
  background: var(--surface);
}
.lightbox figcaption {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 20px;
  margin-top: 10px;
  font-family: var(--f-ui);
  font-size: 12.5px;
  color: #C3CCC6;
}
.lightbox figcaption a { color: #8FD3B6; }

.lb-nav {
  position: relative;
  display: flex;
  align-items: center;
  gap: 26px;
  font-family: var(--f-ui);
  font-size: 13.5px;
}
.lb-nav a { color: #C3CCC6; text-decoration: none; padding: 6px 4px; }
.lb-nav a:hover { color: #fff; text-decoration: underline; }
.lb-nav a:focus-visible { outline: 2px solid #8FD3B6; outline-offset: 2px; }
.lb-close { font-weight: 600; }

/* ------------------------------------------------------------- a chapter */

/* The reading page is the site's whole promise, so it is the one place that
   gets typographic treatment rather than layout: a wider leading, an opening
   line that announces itself the way a printed chapter does, and nothing in
   the margins to look at. */

.prose { margin-top: 26px; font-size: 18px; line-height: 1.72; }
.prose p { margin: 0 0 1.05em; max-width: var(--measure); }

.chapter h1 { font-size: clamp(27px, 3.6vw, 34px); margin-bottom: 4px; }

/* The rule under the chapter number, as the books set it. */
.chapter .kind { margin-bottom: 10px; }
.chapter .kind::after {
  content: "";
  display: block;
  width: 44px;
  height: 2px;
  margin-top: 8px;
  background: var(--straw);
  opacity: 0.55;
}

/* A drop cap on the first paragraph only. ::first-letter is safe here — if a
   chapter opens on a quotation mark the browser takes both characters, which is
   the correct typographic answer anyway. */
.prose > p:first-of-type::first-letter {
  float: left;
  font-size: 3.1em;
  line-height: 0.84;
  padding: 0.06em 0.1em 0 0;
  color: var(--emerald);
}
.prose > p:first-of-type::after { content: ""; display: table; clear: both; }

.appears { max-width: var(--measure); }
.appears h2 { margin-top: 40px; }

/* Previous and next chapter, named. "← Previous" tells a reader nothing they
   could not guess; the title of the chapter they are about to open tells them
   whether to open it. */
.pager {
  display: grid;
  gap: 12px;
  margin-top: 48px;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
  font-family: var(--f-ui);
  font-size: 14.5px;
}
@media (min-width: 620px) { .pager { grid-template-columns: 1fr 1fr; } }
/* No box. Two filled, bordered panels at the foot of a chapter competed with
   the chapter — the last thing on a reading page should be quiet, and the
   titles alone are enough to say what they are. They behave like every other
   row on the site instead: nothing until you point at them. */
.pager a {
  display: block;
  padding: 12px 14px;
  border-radius: 3px;
  text-decoration: none;
  line-height: 1.35;
  color: var(--ink);
  transition: background-color 0.13s ease, color 0.13s ease;
}
.pager a:hover { background: var(--surface); color: var(--emerald); }
.pager a:hover .dir { color: var(--emerald); }
.pager a:focus-visible { outline: 2px solid var(--emerald); outline-offset: -2px; }
.pager .prev { margin-left: -14px; }
.pager .next { margin-right: -14px; }
.pager .dir {
  display: block;
  margin-bottom: 3px;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dim);
}
.pager .next { text-align: right; }
.pager .next:only-child { grid-column: 2; }

/* ---------------------------------------------------------------- the map */

.compass-switch { border: none; margin: 30px 0 0; padding: 0; }
.compass-switch legend {
  font-family: var(--f-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--dim);
  padding: 0;
}
.compass-switch input { position: absolute; opacity: 0; pointer-events: none; }
.compass-switch label {
  display: inline-block;
  margin: 10px 8px 0 0;
  padding: 7px 14px;
  border: 1px solid var(--rule);
  border-radius: 20px;
  font-family: var(--f-ui);
  font-size: 13px;
  color: var(--dim);
  cursor: pointer;
  background: var(--surface);
}
.compass-switch label:hover { border-color: var(--emerald); color: var(--emerald); }
#compass-baum:checked ~ label[for="compass-baum"],
#compass-thompson:checked ~ label[for="compass-thompson"] {
  background: var(--emerald);
  border-color: var(--emerald);
  color: var(--ground);
}
#compass-baum:focus-visible ~ label[for="compass-baum"],
#compass-thompson:focus-visible ~ label[for="compass-thompson"] {
  outline: 2px solid var(--emerald);
  outline-offset: 2px;
}

.mapwrap { margin-top: 22px; }
/* The map fills the page. It is the one illustration on the site and the reason
   the page exists, so it gets the width rather than sitting at 640px in the
   corner of a 992px frame.

   The viewBox is square, so full width means full height too — capped at 78vh
   so the whole of Oz is on screen at once, which is the point of a map. Below
   that cap the width is what governs.

   Type inside an SVG scales with the SVG, so the label sizes have to come down
   as the map goes up or the countries end up shouting: at 400 user units across
   a 912px box the old 12px became a rendered 27px. These values are set so the
   labels land near where they were at 640px. */
.ozmap {
  width: 100%;
  max-width: min(100%, 78vh);
  height: auto;
  display: block;
  margin: 0 auto;
}
.ozmap text { font-family: var(--f-body); font-size: 8.5px; }
.ozmap .rose { font-size: 7.5px; fill: var(--dim); letter-spacing: 0.08em; }
.ozmap .city text { font-size: 9px; }
.ozmap a text { text-decoration: none; }
.ozmap a:hover .quadfill { filter: brightness(0.94); }
.ozmap a:hover text { text-decoration: underline; }
.ozmap a:focus-visible { outline: 2px solid var(--emerald); outline-offset: 2px; }

/* Munchkin and Winkie country each exist twice; which copy shows depends on
   whose account you asked for. */
.quad-munchkin.at-west, .quad-winkie.at-east { display: none; }
#compass-thompson:checked ~ .mapwrap .quad-munchkin.at-east,
#compass-thompson:checked ~ .mapwrap .quad-winkie.at-west { display: none; }
#compass-thompson:checked ~ .mapwrap .quad-munchkin.at-west,
#compass-thompson:checked ~ .mapwrap .quad-winkie.at-east { display: block; }

.mapnote { margin-top: 16px; }
.regionlist {
  list-style: none;
  padding: 0;
  margin: 18px 0 0;
}
.regionlist li {
  padding: 14px 0;
  border-bottom: 1px solid var(--hair);
}
.regionlist b { display: block; font-size: 16.5px; margin-bottom: 4px; }
.regionlist b a { text-decoration: none; }
.regionlist b a:hover { text-decoration: underline; }

/* ------------------------------------------------------- written pages */

/* The method page's tally and table: counts of what the site contains, so they
   take the full measure rather than the prose one. */
.page .tally { list-style: none; padding: 0; margin: 16px 0 0; max-width: none; }
.tally li {
  padding: 11px 0;
  border-bottom: 1px solid var(--hair);
  font-size: 16px;
}
.tally b { font-family: var(--f-ui); font-size: 17px; color: var(--straw); }

.table-scroll { overflow-x: auto; margin: 18px 0; border: 1px solid var(--rule); }
.method table { border-collapse: collapse; width: 100%; font-size: 14.5px; min-width: 34rem; }
.method th, .method td {
  text-align: left;
  padding: 11px 16px;
  border-bottom: 1px solid var(--hair);
  vertical-align: top;
}
.method thead th {
  font-family: var(--f-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dim);
  background: var(--surface);
}
.method tbody th { font-weight: 600; white-space: nowrap; }
.method td.num, .method th.num {
  font-family: var(--f-ui);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.method tbody tr:last-child th, .method tbody tr:last-child td { border-bottom: 0; }

.page h2 {
  font-family: var(--f-body);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.005em;
  text-transform: none;
  color: var(--ink);
  margin: 38px 0 10px;
  padding: 0;
  border: 0;
}
.page p, .page ul, .page ol { max-width: var(--measure); }
.page li { margin-bottom: 5px; }
.page em { color: var(--dim); }

/* The measure above is for prose. The index, the shelf, the alphabet and the
   region grid are all <ul>s living inside .page, and inheriting a 34em cap
   collapsed each of them into a third of the screen — the library shelf laid
   itself out in two narrow columns down the left of a wide window. These are
   structure, not paragraphs, and they take the full shell. */
.page .shelf, .page .entities, .page .entity-list, .page .regionlist,
.page .az, .page .chapters {
  max-width: none;
}
.page .shelf li, .page .entities li, .page .regionlist li { margin-bottom: 0; }

/* ----------------------------------------------------------------- footer */

/* A footer that ends the site rather than trailing off it. What was here was a
   sentence about the public domain and four small links, which left every page
   stopping mid-air. This gives the reader the way back in — every section, and
   the pages about the site — with the rights note kept but demoted to where a
   colophon belongs. */

footer {
  border-top: 1px solid var(--rule);
  background: var(--surface);
  padding-block: 40px 48px;
  color: var(--dim);
  font-size: 13.5px;
}

.foot-cols {
  display: grid;
  gap: 30px 48px;
  grid-template-columns: 1fr;
}
@media (min-width: 620px) {
  .foot-cols { grid-template-columns: minmax(0, 1.6fr) auto auto; }
}

.foot-about .wordmark { font-size: 17px; margin-bottom: 12px; }
.foot-about .wordmark .mark { width: 22px; height: 22px; }
.foot-about p {
  margin: 0;
  max-width: 34em;
  font-size: 13.5px;
  line-height: 1.6;
}

.foot-nav h2 {
  margin: 0 0 10px;
  padding: 0;
  border: 0;
  font-family: var(--f-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--straw);
}
.foot-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-family: var(--f-ui);
  font-size: 13.5px;
}
.foot-nav a { color: var(--dim); text-decoration: none; white-space: nowrap; }
.foot-nav a:hover { color: var(--emerald); text-decoration: underline; }

.foot-base {
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
}
.foot-base p { margin: 0 0 6px; max-width: 52em; font-size: 12.5px; line-height: 1.6; }
.foot-base p:last-child { margin-bottom: 0; }
.foot-note { opacity: 0.8; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}