/* The Wooster Papers. The design language is specs/design-language.org in
   the inwit unit; design/specimen.html in this repo shows the parts. */

:root {
  --paper: #F7F4EB;
  --green: #253E35;
  --ink: #262721;
  --brick: #A44A37;
  --brass: #C9AD76;
  --muted: #6A6658;          /* ink at reduced weight, for metadata */
  --rule: #DDD5C3;           /* paper darkened: thin rules */
  --brass-wash: #EFE4CB;     /* brass on paper, for highlights */

  --serif: "EB Garamond", Garamond, "Times New Roman", serif;
  --sans: "Cabin", "Gill Sans", "Gill Sans MT", system-ui, sans-serif;

  --measure: 34rem;          /* about 66 characters of the body face */
  --margin: 3.25rem;         /* the gutter: the ¶ link and the aside bar */
}
* { box-sizing: border-box; }
html { font-size: 112.5%; }  /* 18px root; Garamond reads small */
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--serif); font-size: 1.1rem; line-height: 1.55;
  font-feature-settings: "liga", "kern", "onum";
  -webkit-font-smoothing: antialiased;
}
a { color: var(--green); text-decoration-thickness: 1px; text-underline-offset: 0.18em; text-decoration-color: rgba(37,62,53,.35); }
a:hover { text-decoration-color: var(--green); }
:focus-visible { outline: 2px solid var(--brick); outline-offset: 3px; border-radius: 2px; }
.visually-hidden { position: absolute; left: -9999px; }

.page { max-width: 64rem; margin: 0 auto; padding: 0 1.5rem 6rem; }
.ui { font-family: var(--sans); font-size: 0.8rem; letter-spacing: 0.01em; }
.muted { color: var(--muted); }

/* masthead */
header.masthead { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.5rem 0 1.25rem; border-bottom: 1px solid var(--rule); flex-wrap: wrap; }
.wordmark { display: flex; align-items: center; gap: 0.8rem; color: var(--green); text-decoration: none; }
/* the show-card W, in the site's green, brick and brass */
.wordmark .emblem { width: 3.8rem; height: 3.8rem; flex: none; }
.wordmark span { font-size: 2rem; font-variant-caps: small-caps; letter-spacing: 0.06em; line-height: 1; }
nav.doors { display: flex; gap: 1.6rem; flex-wrap: wrap; font-size: 0.95rem; }
nav.doors a { color: var(--ink); text-decoration: none; }
nav.doors a:hover, nav.doors a[aria-current] { color: var(--green); text-decoration: underline; }

/* page headings */
.kicker { color: var(--muted); margin: 3rem 0 0.4rem; }
/* a page that starts with its title, with no kicker above it, starts as far down as one that has one */
main > h1.title:first-child, main > article > h1.title:first-child { margin-top: 3rem; }
h1.title { font-weight: 400; font-size: 1.9rem; line-height: 1.15; margin: 0 0 1rem; max-width: 40rem; }
.lede { font-size: 1.25rem; line-height: 1.45; margin: 0 0 2rem; max-width: var(--measure); }
h2.section { font-family: var(--sans); font-size: 0.85rem; font-weight: 600; color: var(--green); margin: 2.6rem 0 0.8rem; }

/* the find box */
/* the front page's introduction, in the Papers' own voice */
section.intro { padding: 3rem 0 0.5rem; max-width: 40rem; }
section.intro h1 { font-weight: 400; font-size: 2.3rem; line-height: 1.12; margin: 0 0 1rem; }
section.intro p { max-width: var(--measure); }
section.intro .lede { margin-bottom: 0.9rem; }
section.find { padding: 2.2rem 0 3rem; max-width: 44rem; }
/* the About page, and the footer that leads to it */
.about { max-width: var(--measure); }
ul.about-books { list-style: none; padding: 0; margin: 0.6rem 0 1.4rem; }
ul.about-books li { padding: 0.15rem 0; }
footer.colophon { margin: 3.5rem 0 0; padding-top: 0.9rem; border-top: 1px solid var(--rule); color: var(--muted); font-size: 0.75rem; line-height: 1.5; }
footer.colophon p { margin: 0 0 0.5rem; }
footer.colophon .colophon-head { font-variant: small-caps; letter-spacing: 0.06em; font-weight: 500; }
footer.colophon a { color: var(--muted); }
footer.foot { margin-top: 5rem; border-top: 1px solid var(--rule); padding: 1rem 0 2rem; }
footer.foot a { color: var(--muted); }
.find h1 { font-weight: 400; font-size: 2.1rem; line-height: 1.12; margin: 0 0 1.4rem; letter-spacing: -0.005em; }
.find.compact { padding: 2.5rem 0 1.5rem; }
.find.compact h1 { font-size: 1.9rem; }
.find form { display: flex; gap: 0.8rem; border-bottom: 2px solid var(--green); }
.find input { flex: 1; min-width: 0; border: 0; background: transparent; font: italic 1.45rem/1.3 var(--serif);
  color: var(--ink); padding: 0.55rem 0; }
.find input::placeholder { color: var(--muted); }
.find input:focus { outline: none; }
.find form:focus-within { border-bottom-color: var(--brick); }
.find button { font-family: var(--sans); font-size: 0.85rem; font-weight: 500; border: 0; background: var(--green);
  color: var(--paper); padding: 0 1.1rem; margin: 0.35rem 0; border-radius: 2px; cursor: pointer; }
.find button:hover { background: #1b2f28; }
.examples { margin: 1.1rem 0 0; color: var(--muted); }
.examples a { color: var(--ink); margin-right: 1.2rem; white-space: nowrap; }
.examples a:first-of-type { margin-left: 0.6rem; }

/* home */
.ways { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 0 2.5rem;
  border-top: 1px solid var(--rule); padding-top: 1.6rem; max-width: 52rem; }
.ways a { display: block; text-decoration: none; color: var(--ink); padding: 0 0 1.3rem; }
.ways a strong { display: block; font-weight: 500; font-size: 1.3rem; color: var(--green); }
.ways a span { font-size: 1rem; }
.ways a:hover strong { text-decoration: underline; }
.today { margin-top: 3rem; border-top: 1px solid var(--rule); padding-top: 1.6rem; max-width: 44rem; }
.today p.summary { font-size: 1.35rem; line-height: 1.35; margin: 0.3rem 0 0.5rem; }
.today p.summary a { color: var(--ink); text-decoration: none; }
.today p.summary a:hover { color: var(--green); }

/* results and lists of scenes */
section.results { max-width: 44rem; border-top: 1px solid var(--rule); padding-top: 1.6rem; }
/* pictures whose caption or context matches, above the scenes */
.find-pictures { margin: 0 0 2.4rem; }
.find-pictures ul.gallery { grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: 1.2rem 1rem; }
.find-pictures ul.gallery img { height: 8rem; }
/* entries whose name matches, above the scenes */
.entries { margin: 0 0 2.4rem; }
.entries ul { list-style: none; padding: 0; margin: 0; }
/* an invisible table: name, how often, what it is */
.entries li { padding: 0.3rem 0; border-bottom: 1px solid var(--rule); display: grid;
  grid-template-columns: minmax(10rem, 15rem) 7rem minmax(0, 1fr); gap: 0.9rem; align-items: baseline; }
.entries li .nm { min-width: 0; }
.entries li .nm a { font-size: 1.05rem; }
.entries li .n { white-space: nowrap; }
.entries li .d { font-family: var(--sans); font-size: 0.8rem; line-height: 1.4; color: var(--muted); min-width: 0; }
.results .count { color: var(--muted); margin: 0 0 1.4rem; }
article.hit { padding: 0 0 1.6rem; margin: 0 0 1.6rem; border-bottom: 1px solid var(--rule); }
.hit .cite { color: var(--muted); margin: 0 0 0.35rem; }
.hit h2 { font-size: 1.3rem; font-weight: 500; line-height: 1.3; margin: 0 0 0.6rem; }
.hit h2 a { color: var(--ink); text-decoration: none; }
.hit h2 a:hover { color: var(--green); }
.hit blockquote { margin: 0 0 0.7rem; padding-left: 1rem; border-left: 2px solid var(--brass); font-style: italic; }
mark { background: var(--brass-wash); color: inherit; padding: 0 0.1em; border-radius: 1px; }
.people { color: var(--muted); margin: 0; }
.people a { color: var(--ink); }
.nothing { padding: 0.4rem 0; }
.nothing p { margin: 0 0 0.3rem; }
.nothing .voice { font-style: italic; font-size: 1.25rem; }

ol.scenes { list-style: none; padding: 0; margin: 0; max-width: 44rem; }
ol.scenes li { padding: 0.55rem 0; border-bottom: 1px solid var(--rule); }
ol.scenes li a { color: var(--ink); text-decoration: none; }
ol.scenes li a:hover { color: var(--green); text-decoration: underline; }
ol.scenes .where { display: block; color: var(--muted); }
.chapter { margin-top: 2.2rem; }
.chapter h2 { font-weight: 400; font-size: 1.5rem; margin: 0 0 0.4rem; }

/* reading page */
.reading .where { margin-left: var(--margin); color: var(--muted); margin-top: 3rem; margin-bottom: 0.4rem; }
.reading h1 { margin: 0 0 1.6rem var(--margin); font-size: 1.9rem; font-weight: 400; line-height: 1.2; max-width: var(--measure); }
.text { max-width: calc(var(--measure) + var(--margin)); }
.text p { position: relative; margin: 0 0 0.25rem var(--margin); text-indent: 1.3em; hyphens: auto; }
.text p.first, .text p.display { text-indent: 0; }
.text p.display { padding-left: 1.6rem; font-style: italic; }
/* Paragraphs carry ids for links and citations, but no visible numbers.
   Pointing at a paragraph shows a pilcrow in the gutter: its permanent link. */
.text p .pl { position: absolute; left: calc(-1 * var(--margin)); width: calc(var(--margin) - 1.4rem);
  text-align: right; text-indent: 0; line-height: calc(1.1rem * 1.55); font-style: normal;
  color: var(--brass); text-decoration: none; opacity: 0; }
.text p:hover .pl, .text p:target .pl, .text p.target .pl, .text p .pl:focus-visible { opacity: 1; }
.text p .pl:hover { color: var(--green); }
.text p:target, .text p.target { background: var(--brass-wash); box-shadow: -0.4rem 0 0 var(--brass-wash), 0.4rem 0 0 var(--brass-wash); }
/* a Strand illustration in the text, after the paragraph it pictures */
.text figure.strand { margin: 1.4rem 0 1.6rem var(--margin); max-width: var(--measure); }
.text figure.strand img { display: block; max-width: 100%; max-height: 24rem; width: auto; height: auto; margin: 0 auto; mix-blend-mode: multiply; }
.text figure.strand a { display: block; cursor: zoom-in; }
.text figure.strand figcaption { margin-top: 0.5rem; text-align: center; }
.text figure.strand .words { display: block; font-style: italic; font-size: 0.98rem; line-height: 1.4; }
.text figure.strand .words.caps { font-style: normal; text-transform: lowercase; font-variant: small-caps; letter-spacing: 0.03em; }
.text figure.strand .credit { display: block; color: var(--muted); font-size: 0.72rem; margin-top: 0.25rem; }
/* the text from the server: while it comes, where a passage stops, and why it is a passage */
.text p.text-status { text-indent: 0; margin-left: var(--margin); }
.text p.gap { text-indent: 0; margin: 0.4rem 0 0.6rem var(--margin); letter-spacing: 0.3em; }
.text p.excerpt-note { text-indent: 0; margin: 1.4rem 0 0 var(--margin); padding-top: 0.6rem; border-top: 1px solid var(--rule);
  color: var(--muted); max-width: var(--measure); }
/* An aside's brass bar runs in the gutter, between the ¶ and the text. */
.text .aside { position: relative; margin-left: calc(var(--margin) - 0.9rem); border-left: 2px solid var(--brass); padding-left: calc(0.9rem - 2px); }
/* the site's note on an aside: not the book's text, so it sits apart from it */
.text .aside p.sidenote { text-indent: 0; margin: 0 0 0.5rem; font-size: 0.75rem; line-height: 1.4; color: var(--muted); }
.text .aside p.sidenote .k { display: block; font-variant: small-caps; letter-spacing: 0.04em; color: var(--brick); }
@media (min-width: 66rem) {
  .text .aside p.sidenote { position: absolute; left: calc(100% + 2.8rem); top: 0.3rem; width: 14rem; margin: 0;
    border-top: 1px solid var(--brass); padding-top: 0.35rem; }
  /* a scene page in two columns: the text, and beside it who is there and the asides' notes */
  .reading { display: grid; grid-template-columns: calc(var(--measure) + var(--margin)) minmax(12rem, 1fr); column-gap: 2.8rem; }
  .reading > .where, .reading > h1, .reading > .text, .reading > nav.turn { grid-column: 1; }
  .reading > .scene-side { grid-column: 2; grid-row: 3; align-self: start; margin: 0.3rem 0 0; max-width: 14rem;
    border-top: 1px solid var(--rule); padding-top: 0.6rem; }
  .reading > .scene-side p { line-height: 1.45; }
}
.text .aside p { margin-left: 0; }
.text p.label { text-indent: 0; color: var(--muted); margin: 1rem 0 0.35rem var(--margin); }
.text .aside p.label { margin-left: 0; margin-top: 0; }
.text p.chapter-break { text-indent: 0; margin: 1.6rem 0 0.8rem var(--margin); color: var(--muted); }
.cast { margin: 2.4rem 0 0 var(--margin); max-width: var(--measure); border-top: 1px solid var(--rule); padding-top: 1rem; }
.cast p { margin: 0 0 0.4rem; }
nav.turn { display: flex; justify-content: space-between; gap: 2rem; margin: 2rem 0 0 var(--margin);
  max-width: var(--measure); border-top: 1px solid var(--rule); padding-top: 1rem; }
nav.turn a { max-width: 48%; color: var(--ink); text-decoration: none; }
nav.turn a:hover { color: var(--green); }
nav.turn .next { text-align: right; margin-left: auto; }

/* entries: people, places, things */
.entry { display: grid; grid-template-columns: minmax(0, 1fr) 15rem; gap: 3rem; }
.entry .aka { color: var(--muted); margin: -0.4rem 0 1.1rem; }
ul.dealings { list-style: none; padding: 0; margin: 0; max-width: 40rem; }
ul.dealings li { display: grid; grid-template-columns: 5.2rem 1fr; gap: 0.6rem; padding: 0.35rem 0; border-bottom: 1px solid var(--rule); }
ul.dealings .ch { font-family: var(--sans); font-size: 0.75rem; color: var(--muted); padding-top: 0.25rem; text-decoration: none; }
ul.dealings .ch:hover { color: var(--green); text-decoration: underline; }
/* connections: one row per other, with where they meet on the canon map */
ul.connections { list-style: none; padding: 0; margin: 0; max-width: 44rem; }
ul.connections li { display: grid; grid-template-columns: minmax(9rem, 12rem) minmax(10rem, 1fr) auto 2rem;
  gap: 0.9rem; align-items: baseline; padding: 0.45rem 0; border-bottom: 1px solid var(--rule); }
ul.connections .who a { color: var(--ink); text-decoration-color: var(--rule); }
ul.connections .who a:hover { color: var(--green); }
sup.kind { font-family: var(--sans); font-size: 0.45em; font-weight: 400; color: var(--muted); opacity: 0.8; margin-left: 0.15em; line-height: 0; vertical-align: 0.9em; cursor: help; }
ul.connections.verb-first li { grid-template-columns: minmax(10rem, 1fr) minmax(9rem, 12rem) auto 2rem; }
ul.connections.verb-first .words { text-align: left; }
ul.connections .words { font-style: italic; color: var(--muted); font-size: 1rem; }
ul.connections .n { text-align: right; color: var(--muted); text-decoration: none; }
ul.connections a.n:hover { color: var(--green); text-decoration: underline; }
p.col-head { max-width: 44rem; text-align: right; font-size: 0.75rem; margin: -0.6rem 0 0; }
/* the canon map: one bar for all the books, a tick per chapter where the two meet */
.canon-map { position: relative; display: inline-block; width: 12rem; height: 11px; vertical-align: middle; cursor: pointer; }
.canon-map .band { position: absolute; top: 4px; height: 3px; background: var(--rule); }
.canon-map .band.alt { opacity: 0.45; }
.canon-map a { position: absolute; top: 0; height: 11px; min-width: 2px; background: var(--green); }
.canon-map a.near { background: var(--ink); top: -2px; height: 15px; min-width: 3px; }
.canon-map .tip { display: none; position: absolute; bottom: 16px; transform: translateX(-50%); white-space: nowrap; pointer-events: none; z-index: 3;
  font-family: var(--sans); font-size: 0.75rem; font-style: normal; color: var(--paper); background: var(--ink); padding: 0.15rem 0.45rem; border-radius: 3px; }
.canon-map .tip.right { transform: translateX(-100%); }
.canon-map.active .tip { display: block; }
ul.in-books { list-style: none; padding: 0; margin: 0 0 2rem; max-width: var(--measure); }
ul.in-books li { padding: 0 0 0.9rem; font-size: 1.2rem; line-height: 1.45; }
.book-head { font-weight: 500; font-size: 1.15rem; margin: 1.4rem 0 0.2rem; }
h2.book-head { font-size: 1.4rem; margin-top: 2.2rem; }
ul.arc { list-style: none; padding: 0; margin: 0 0 1.4rem; max-width: var(--measure); font-size: 1.25rem; line-height: 1.45; }
ul.arc li { padding: 0.15rem 0; }
ul.arc a.ui { color: var(--muted); margin-left: 0.3rem; }
ul.dealings em { color: var(--muted); }
details.more { margin-top: 0.8rem; }
details.more summary { cursor: pointer; color: var(--green); padding: 0.3rem 0; }
/* the jump links at the top of a long entry; they stay in view while it scrolls */
nav.jumps { position: sticky; top: 0; z-index: 2; display: flex; flex-wrap: wrap; gap: 0.3rem 1.2rem; padding: 0.5rem 0;
  margin: 0.4rem 0 1.4rem; background: var(--paper); border-bottom: 1px solid var(--rule); }
nav.jumps a { text-decoration: none; color: var(--green); }
nav.jumps a:hover { text-decoration: underline; }
h2.section[id] { scroll-margin-top: 3rem; }
/* under a scene in a cast or place page's lists: the words around where it is named */
ol.scenes blockquote.snip { margin: 0.25rem 0 0.2rem; padding-left: 0.7rem; border-left: 2px solid var(--brass);
  font-style: italic; font-size: 0.98rem; line-height: 1.45; color: var(--ink); }
ol.scenes blockquote.snip mark { background: var(--brass-wash); color: inherit; }
/* under a scene in a cast or place page's lists: the words around where it is named */
ol.scenes blockquote.snip { margin: 0.25rem 0 0.2rem; padding-left: 0.7rem; border-left: 2px solid var(--brass);
  font-style: italic; font-size: 0.98rem; line-height: 1.45; color: var(--ink); }
ol.scenes blockquote.snip mark { background: var(--brass-wash); color: inherit; }
details.book-fold { border-bottom: 1px solid var(--rule); }
details.book-fold summary { cursor: pointer; padding: 0.45rem 0; font-size: 1.1rem; }
details.book-fold summary:hover cite { color: var(--green); }
details.book-fold[open] summary { margin-bottom: 0.3rem; }
details.in-books-fold { border-top: 1px solid var(--rule); margin-bottom: 0.8rem; }
details.in-books-fold ul.in-books { margin-bottom: 1rem; }
.entry > .side { align-self: start; min-width: 0; }
aside.curious { align-self: start; border-top: 2px solid var(--brick); padding-top: 0.8rem; margin-top: 3rem; }
aside.pictured-in { margin-top: 2.4rem; border-top: 2px solid var(--brass); padding-top: 0.8rem; }
aside.pictured-in h2 { font-family: var(--sans); font-size: 0.85rem; font-weight: 600; color: var(--ink); margin: 0 0 0.8rem; }
aside.pictured-in figure { margin: 0 0 1.3rem; }
aside.pictured-in img { display: block; width: 100%; max-height: 18rem; object-fit: contain; mix-blend-mode: multiply; }
aside.pictured-in .cap { display: block; font-style: italic; font-size: 0.85rem; line-height: 1.35; margin-top: 0.4rem; }
aside.pictured-in .cap.caps { font-style: normal; text-transform: lowercase; font-variant: small-caps; letter-spacing: 0.03em; }
aside.pictured-in .credit { display: block; font-size: 0.7rem; margin-top: 0.25rem; }
aside.pictured-in details summary { cursor: pointer; color: var(--green); margin-bottom: 0.8rem; }
.curious h2 { font-family: var(--sans); font-size: 0.85rem; font-weight: 600; color: var(--brick); margin: 0 0 0.7rem; }
.curious p { margin: 0 0 0.6rem; font-size: 1rem; }
.curious p.ui { font-size: 0.8rem; }
.curious button.another { font-size: 0.8rem; border: 0; background: none; padding: 0; color: var(--brick); cursor: pointer; text-decoration: underline; text-decoration-color: var(--rule); }
.curious button.another:hover { text-decoration-color: var(--brick); }
ul.plain { list-style: none; padding: 0; margin: 0; }
ul.plain li { padding: 0.25rem 0; }
/* the Cast page: a programme in tiers, the smaller parts folded, and a name filter */
.cast-filter { display: flex; align-items: baseline; gap: 1rem; margin: 1.6rem 0 0.4rem; max-width: 36rem; }
.cast-filter input { flex: 1; min-width: 0; font: italic 1.15rem/1.3 var(--serif); color: var(--ink); background: transparent;
  border: 0; border-bottom: 2px solid var(--green); padding: 0.4rem 0; }
.cast-filter input:focus { outline: none; border-bottom-color: var(--brick); }
/* a kind (People, Props) is a heading of its own, ruled off; its tiers sit under it in small capitals */
.cast-group { margin-top: 3.2rem; padding-top: 1.1rem; border-top: 1px solid var(--rule); }
.cast-group h2.section { font-family: var(--serif); font-size: 1.7rem; font-weight: 400; color: var(--ink); margin: 0 0 0.6rem; }
.cast-group h2.section .ui { font-size: 0.85rem; margin-left: 0.3rem; }
.cast-group h2.section .kind-key { font-family: var(--sans); font-size: 0.9rem; color: var(--muted); vertical-align: 0.35em; }
.tier { margin: 0 0 1.4rem; }
.tier-head { font-size: 0.8rem; font-weight: 500; font-variant: small-caps; letter-spacing: 0.06em; color: var(--muted);
  margin: 1.3rem 0 0.5rem; }
.tier-head .muted { font-variant: normal; letter-spacing: 0; }
details.tier summary, ul.tree details summary { cursor: pointer; }
details.tier summary:hover { color: var(--green); }
ul.index { list-style: none; padding: 0; margin: 0; columns: 2 16rem; column-gap: 2.5rem; }
ul.index li { break-inside: avoid; padding: 0.2rem 0; }
ul.index li span { color: var(--muted); }
ul.tree { list-style: none; margin: 0; padding-left: 0; }
ul.tree ul { list-style: none; padding-left: 1.4rem; border-left: 1px solid var(--rule); margin: 0.2rem 0 0.4rem 0.3rem; }
ul.tree li { padding: 0.15rem 0; }

/* an editorial moment */
figure.plate { margin: 3rem 0 0; border-top: 1px solid var(--rule); padding-top: 2rem;
  display: grid; grid-template-columns: 13rem minmax(0, 1fr); gap: 2.5rem; align-items: end; max-width: 44rem; }
figure.plate img { width: 100%; height: auto; display: block; filter: sepia(0.15) contrast(1.02); mix-blend-mode: multiply; }
figure.plate .credit { color: var(--muted); }
figure.plate .summary { font-size: 1.15rem; line-height: 1.35; margin: 0.2rem 0 0.4rem; }
figure.plate .summary a { color: var(--ink); text-decoration: none; }
figure.plate .summary a:hover { color: var(--green); }
figure.plate img { max-height: 22rem; object-fit: contain; }
/* the illustrations: thumbnails on a book's chapter list, and the gallery */
ol.scenes .thumbs { display: flex; gap: 0.4rem; margin-top: 0.35rem; }
ol.scenes .thumbs img { height: 3.4rem; width: auto; display: block; mix-blend-mode: multiply; border: 1px solid var(--rule); }
section.story-pictures { margin: 2.2rem 0 0; }
ul.gallery { list-style: none; padding: 0; margin: 0.8rem 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
  gap: 1.6rem 1.4rem; align-items: start; }
ul.gallery a { display: block; color: var(--ink); text-decoration: none; }
ul.gallery img { height: 11rem; width: 100%; object-fit: contain; object-position: center bottom; display: block; mix-blend-mode: multiply; }
ul.gallery a:hover img { outline: 2px solid var(--brass); outline-offset: 3px; }
ul.gallery .cap { display: block; margin-top: 0.5rem; font-style: italic; font-size: 0.85rem; line-height: 1.35; text-align: center; }
ul.gallery .cap.caps { font-style: normal; text-transform: lowercase; font-variant: small-caps; letter-spacing: 0.03em; }
ul.gallery .cap { user-select: text; }


@media (max-width: 760px) {
  /* a phone: no gutter for the ¶ links (they need a pointer to hover), just room for the aside bar */
  :root { --margin: 0.9rem; }
  .text p .pl { display: none; }
  .wordmark .emblem { width: 2.8rem; height: 2.8rem; }
  .wordmark span { font-size: 1.45rem; }
  nav.doors { gap: 0.4rem 1.1rem; font-size: 0.9rem; }
  .find h1 { font-size: 2rem; }
  h1.title { font-size: 1.65rem; }
  .entry, figure.plate { grid-template-columns: 1fr; gap: 1.2rem; }
  aside.curious { margin-top: 0; }
  figure.plate img { max-width: 13rem; }
  .examples a { white-space: nowrap; display: inline-block; margin-bottom: 0.3rem; }
  .find input { font-size: 1.1rem; }
  .find button { padding-left: 0.9rem; padding-right: 0.9rem; }
  nav.turn a { max-width: 100%; }
  nav.turn { flex-direction: column; gap: 0.8rem; }
  nav.turn .next { text-align: left; margin-left: 0; }
  /* a connection on a phone: the name with its count on one line, the words, then the map across */
  ul.connections li { grid-template-columns: minmax(0, 1fr) auto; row-gap: 0.3rem;
    grid-template-areas: "who n" "words words" "map map"; }
  ul.connections.verb-first li { grid-template-areas: "words words" "who n" "map map"; }
  ul.connections .who { grid-area: who; }
  ul.connections .words { grid-area: words; text-align: left; }
  ul.connections .n { grid-area: n; align-self: baseline; }
  ul.connections .canon-map { grid-area: map; width: 100%; }
  .entries li { grid-template-columns: minmax(0, 1fr) auto; }
  .entries li .d { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: no-preference) {
  .text p:target { transition: background-color .6s ease; }
}

/* who is where */
.grid-controls { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; margin: 0.6rem 0 0; }
.grid-controls select { font: inherit; background: transparent; border: 0; border-bottom: 1px solid var(--rule); color: var(--green); }
/* the grid scrolls inside its frame, the names and the book and chapter headings staying in view */
.heatmap-wrap { overflow: auto; max-height: 78vh; margin-top: 1rem; border-top: 1px solid var(--rule); }
table.heatmap { border-collapse: separate; border-spacing: 3px; }
.heatmap th { font-weight: 400; background: var(--paper); }
.heatmap thead th { position: sticky; z-index: 2; }
.heatmap thead tr:first-child th { top: 0; height: 1.7rem; }
.heatmap thead tr:nth-child(2) th { top: calc(1.7rem + 3px); }
.heatmap thead th.bk { text-align: left; font-size: 0.95rem; padding: 0.2rem 0 0.3rem 0.3rem; border-left: 1px solid var(--rule); white-space: nowrap; }
.heatmap thead th.ch { font-size: 0.6rem; color: var(--muted); width: 16px; text-align: center; }
.heatmap thead th.ch.first, .heatmap td.first { border-left: 1px solid var(--rule); }
.heatmap tbody th, .heatmap thead th:first-child { position: sticky; left: 0; z-index: 1; }
.heatmap thead th:first-child { z-index: 3; }
.heatmap tbody th { text-align: left; font-size: 0.9rem; line-height: 1; padding: 0 0.9rem 0 0.2rem; white-space: nowrap;
  box-shadow: 1px 0 0 var(--rule); }
.heatmap tr { height: 19px; }
.heatmap tbody th a { color: var(--ink); text-decoration: none; }
.heatmap tbody th a:hover { color: var(--green); text-decoration: underline; }
.heatmap td { width: 16px; height: 16px; border-radius: 2px; background: transparent; }
.heatmap tbody tr.lit th a { color: var(--green); text-decoration: underline; }
.heatmap tbody tr.lit th { background: var(--brass-wash); }
.heatmap tbody tr.lit td:not(.p1):not(.p2):not(.p3) { background: var(--brass-wash); }
.heatmap thead th.lit { color: var(--ink); background: var(--brass-wash); font-weight: 600; }
.heatmap td.m { box-shadow: inset 0 0 0 1px var(--brass); }
.heatmap td.p1 { background: #A9B9AF; }
.heatmap td.p2 { background: #6F8A7C; }
.heatmap td.p3 { background: var(--green); }

/* search filters */
.filters { display: flex; flex-wrap: wrap; gap: 0.9rem 2.8rem; margin: 0 0 2.6rem; }
.filters .facet { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: baseline; }
.filters .facet > span { color: var(--muted); margin-right: 0.2rem; }
.filters button { font: inherit; font-family: var(--sans); font-size: 0.78rem; border: 1px solid var(--rule); background: transparent;
  color: var(--ink); border-radius: 2px; padding: 0.1rem 0.45rem; cursor: pointer; }
.filters button[aria-pressed="true"] { background: var(--green); border-color: var(--green); color: var(--paper); }
.filters button:hover { border-color: var(--green); }
.filters button.clear { border: 0; padding: 0.25rem 0; color: var(--brick); text-decoration: underline; text-decoration-color: var(--rule); align-self: center; }
.filters button.clear:hover { text-decoration-color: var(--brick); }

/* the rooms */
ul.rooms { list-style: none; padding: 0; margin: 0; max-width: 44rem; }
ul.rooms li { padding: 1rem 0; border-bottom: 1px solid var(--rule); display: grid; gap: 0.2rem; }
ul.rooms strong { font-weight: 500; font-size: 1.35rem; }
section.couple { margin: 2.4rem 0 0; max-width: 60rem; }
section.couple h2 { font-weight: 500; font-size: 1.3rem; margin: 0 0 1rem; }
section.couple h2 a { color: var(--ink); }
a.pairlink { margin-left: 0.6rem; color: var(--muted); font-weight: 400; }
/* a railway line: stations on a rule */
ol.line { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; row-gap: 1.4rem; }
ol.line li { position: relative; flex: 0 1 11rem; padding: 1.1rem 0.8rem 0 0; border-top: 3px solid var(--green); }
ol.line li:last-child { border-top-color: transparent; background: linear-gradient(var(--green), var(--green)) top left / 0.8rem 3px no-repeat; }
ol.line li::before { content: ""; position: absolute; top: -9px; left: 0; width: 13px; height: 13px; border-radius: 50%;
  background: var(--paper); border: 3px solid var(--green); }
ol.line li.engaged::before { background: var(--green); }
ol.line li.broken-off::before { border-color: var(--brick); }
ol.line li.proposal::before { border-color: var(--brass); }
ol.line li.married::before { background: var(--green); width: 17px; height: 17px; top: -11px; }
ol.line li a { color: var(--ink); text-decoration: none; display: block; }
ol.line li a:hover .what { text-decoration: underline; color: var(--green); }
ol.line .what { display: block; line-height: 1.25; }
ol.line li.broken-off .what { color: var(--brick); }
ol.line .when { display: block; color: var(--muted); margin-top: 0.2rem; }
section.exhibit { margin: 2.6rem 0 0; border-top: 1px solid var(--rule); padding-top: 1.4rem; max-width: 44rem; }
/* an exhibit's Strand pictures, in the margin beside it as the asides' notes are */
section.couple.pictured { max-width: none; display: grid; grid-template-columns: minmax(0, 44rem) 17rem; column-gap: 2.8rem; }
section.couple.pictured > :not(.exhibit-pictures) { grid-column: 1; }
section.couple .exhibit-pictures { grid-column: 2; grid-row: 1 / span 10; align-self: start; display: flex; flex-direction: column; gap: 1.2rem; }
/* a memory's picture, under it in the list */
.memory-pictures { display: flex; flex-wrap: wrap; gap: 1.2rem; margin: 0.6rem 0 0.4rem; }
.memory-pictures figure { margin: 0; width: 14rem; }
.memory-pictures img { display: block; width: 100%; max-height: 18rem; object-fit: contain; mix-blend-mode: multiply; }
.memory-pictures .cap { display: block; font-style: italic; font-size: 0.85rem; line-height: 1.35; margin-top: 0.4rem; }
.memory-pictures .cap.caps { font-style: normal; text-transform: lowercase; font-variant: small-caps; letter-spacing: 0.03em; }
.memory-pictures .credit { display: block; font-size: 0.7rem; margin-top: 0.25rem; }
section.exhibit.pictured { max-width: none; display: grid; grid-template-columns: minmax(0, 44rem) 17rem; column-gap: 2.8rem; }
section.exhibit.pictured > :not(.exhibit-pictures) { grid-column: 1; }
section.exhibit .exhibit-pictures { grid-column: 2; grid-row: 1 / span 30; align-self: start; display: flex; flex-direction: column; gap: 1.2rem; }
.exhibit-pictures img { display: block; width: 100%; max-height: 22rem; object-fit: contain; mix-blend-mode: multiply; }
.exhibit-pictures figcaption { margin-top: 0.4rem; }
.exhibit-pictures .cap { display: block; font-style: italic; font-size: 0.85rem; line-height: 1.35; }
.exhibit-pictures .cap.caps, figure.plate .plate-caption.caps { font-style: normal; text-transform: lowercase; font-variant: small-caps; letter-spacing: 0.03em; }
.exhibit-pictures .credit { display: block; font-size: 0.7rem; margin-top: 0.25rem; }
figure.plate .plate-caption { font-style: italic; font-size: 1.05rem; line-height: 1.4; margin: 0.3rem 0 0.6rem; }
@media (max-width: 66rem) {
  /* on a narrow screen: the exhibit's number and name, then its pictures, then the rest */
  section.couple.pictured { display: flex; flex-direction: column; }
  section.couple.pictured > * { order: 3; }
  section.couple.pictured > h2 { order: 1; }
  section.couple .exhibit-pictures { order: 2; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 1rem; margin: 0.2rem 0 1rem; }
  .memory-pictures { justify-content: center; }
  section.exhibit.pictured { display: flex; flex-direction: column; }
  section.exhibit.pictured > * { order: 3; }
  section.exhibit.pictured > .exhibit-no { order: 0; }
  section.exhibit.pictured > h2 { order: 1; }
  section.exhibit .exhibit-pictures { order: 2; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 1rem; margin: 0.2rem 0 1rem; }
  .exhibit-pictures figure { margin: 0; width: 12rem; text-align: center; }
}
section.exhibit h2 { font-weight: 400; font-size: 1.9rem; margin: 0.2rem 0 0.6rem; }
nav.exhibit-index ol { columns: 3 12rem; column-gap: 2rem; padding-left: 1.4rem; margin: 0.4rem 0 1rem; }
nav.exhibit-index li { break-inside: avoid; padding: 0.1rem 0; }
nav.exhibit-index li::marker { color: var(--muted); font-size: 0.82em; font-variant-numeric: tabular-nums; }
p.fate { font-size: 1.1rem; }
nav.exhibit-index li.once-link { list-style: none; color: var(--muted); }
table.once-table { border-collapse: collapse; width: 100%; max-width: 50rem; margin: 0.6rem 0 1rem; }
table.once-table td { padding: 0.35rem 0.8rem 0.35rem 0; border-bottom: 1px solid var(--rule); vertical-align: baseline; }
details.exhibit-story { margin-top: 0.6rem; }
details.exhibit-story summary { cursor: pointer; color: var(--green); padding: 0.3rem 0; }
details.exhibit-story[open] summary { margin-bottom: 0.4rem; }
section.exhibit h2 a { color: var(--ink); }
p.objection { font-size: 1.1rem; }

p.surprised { margin: 1.6rem 0 -1.6rem var(--margin); color: var(--muted); }
p.surprised a { font-weight: 600; }

p.legend { color: var(--muted); display: flex; gap: 1.2rem; margin: -1rem 0 0.4rem; }
p.legend .key i { display: inline-block; width: 11px; height: 11px; border-radius: 2px; vertical-align: -1px; margin-right: 0.3rem; }
p.legend .key i.p2 { background: #6F8A7C; }
p.legend .key i.m { box-shadow: inset 0 0 0 1px var(--brass); }

/* the books: those in the archive in full ink, the rest dimmed */
ol.books li.ready { border-left: 3px solid var(--green); padding-left: 0.8rem; }
ol.books li.ready a { font-weight: 500; }
ol.books li.waiting { color: var(--muted); padding-left: calc(0.8rem + 3px); opacity: 0.75; }
ol.books .tag { border: 1px solid var(--rule); border-radius: 2px; padding: 0 0.35rem; margin-left: 0.4rem; color: var(--muted); }
ul.dealings li:target { background: color-mix(in srgb, var(--green) 10%, transparent); }