/* The Returning Way — theology.
   Static first: without JavaScript this is a plainly annotated edition,
   notes stacked in the margin. margin.js only adds the drift behaviour. */

:root {
  /* The page: grounds first, then ink from darkest to quietest, then the
     rules and the hand that draws every mark. Written as tokens rather than
     literals because a second palette hangs off them — see "night" below. */
  --paper:     #f4efe4;
  --margin:    #efe8da;
  --card:      #f6f2e9;   /* a margin card, under its hue wash */
  --tint:      #ece4d4;   /* the confession's ground */
  --catch:     #e5dac2;   /* a catch standing open */

  --ink:       #2a2419;
  --ink-deep:  #3a3226;   /* the set-apart voices */
  --ink-warm:  #5a4436;   /* what is spoken, and the closing lines */
  --ink-soft:  #5a5040;
  --quiet:     #a3937a;

  --rule:      #ddd2bb;
  --rule-firm: #cbbb9a;   /* a rule that has to hold a box together */
  --hair:      #e8dfcb;   /* between the rows of a table */
  --ornament:  #b09a72;   /* every drawn mark */

  /* Eight relation labels, four hue families, no legend anywhere. */
  --ground: #4a5a7a;
  --echo:   #3f6f68;
  --rite:   #8a5a2b;
  --made:   #6a4a72;

  /* You-are-here, site-wide. The same value as the rite hue today, written
     separately because the two answer different questions — one says what kind
     of thing a link is, the other says where you are standing — and because
     they part company on a dark ground. */
  --accent: #8a5a2b;

  /* The same colours as channels, for the places the book needs them at a
     fraction: the wash behind a brought word, the dotted rule under a word
     that leaves, the tint behind a margin card. One set of numbers, so the
     night palette below moves them all at once. */
  --ink-rgb:    42, 36, 25;
  --ground-rgb: 74, 90, 122;
  --echo-rgb:   63, 111, 104;
  --rite-rgb:   138, 90, 43;
  --made-rgb:   106, 74, 114;

  --drop:    0 6px 22px rgba(var(--ink-rgb), 0.13);
  --drop-up: 0 -10px 30px rgba(var(--ink-rgb), 0.16);

  /* The book is set in the older face; the apparatus is set in the newer one.
     The text is the old thing — the annotations are now. */
  --old:  "Hoefler Text", Baskerville, "Times New Roman", serif;
  --now:  "Iowan Old Style", Palatino, "Palatino Linotype", Georgia, serif;
  /* And two cuts of one display face. Decorative carries the swashes and
     appears once a page, on the title; the plain cut does the rest of the
     titling — a section head, the one motto — where a flourish on every
     heading would be costume. Same superfamily, one request, no extra fetch. */
  --display: "Cinzel Decorative", "Cinzel", "Hoefler Text", Baskerville, serif;
  --title:   "Cinzel", "Cinzel Decorative", "Hoefler Text", Baskerville, serif;

  /* The three capital forms, and the rule that keeps them apart.

     Small caps was doing twelve jobs at eleven letter-spacings: the chrome,
     the section head, the opening line, the motto, a stage direction, a table
     header, a run-in heading. One device marking everything marks nothing —
     on *The Great Work* the motto and the opening line arrived in the same
     case at nearly the same size, three paragraphs apart, and the banner read
     as a second opening line.

     So the load splits three ways, and nothing wears two of them at once:

       var(--display), var(--title)   this is a title
       small caps in var(--now)       this is apparatus
       small caps in var(--old)       the book's own voice, inside a sentence

     The apparatus form gets one tracking and three sizes, named here. No rule
     below sets its own. */
  --track:    0.09em;
  --label:    0.86rem;   /* in the page: the kicker */
  --label-sm: 0.78rem;   /* the chrome, and index furniture */
  --label-xs: 0.66rem;   /* inside the reading column: runhead, stage */

  /* The measure. The theology is read with a margin alive beside it; the
     practices are performed at arm's length, set larger, and so take a little
     less width. Each body sets its own; this is the theology's.
     It was written twice before — 34rem on the paragraphs, 38rem on the
     column — so a practice's paragraphs measured narrower than its own lists,
     rules and tables. One number now, and each book names it. */
  --measure: 34rem;
}

/* ----------------------------------------------------------------- night */

/* The two books are two objects, and this is the plainest way to say so.

   The theology is read on paper the colour of paper. The practices are
   performed — in a kitchen, on a phone, at four in the morning, by somebody
   who has put the light out — and they are set by lamplight: a warm near-black
   ground, warm off-white ink, the same parchment temperature held rather than
   inverted to a cold grey. Inverting would have made a second, colder object
   out of the same book; holding the temperature makes the other half of one.

   It also answers a question the chrome was answering badly. A reader knows
   which book they are in before they have read a word of it, because the book
   looks like itself. The tab that used to say so in a boxed noun is gone, and
   the name in the bar is now confirmation rather than the only clue.

   The hues are lifted, not inverted. They were chosen against #f4efe4 and go
   to mud on a dark ground, and the only job they have is to stay apart from
   one another. The you-are-here rust and the rite hue — one value written
   twice in daylight — part company here: the rust carries a filled catch, the
   hue sits under a line of prose.

   The margin's four tinted cards are not here: the margin is the theology's,
   and this book has none. */

body.practice {
  --paper:     #17150f;
  --margin:    #1e1b15;
  --card:      #211d16;
  --tint:      #241f17;
  --catch:     #342c1e;

  --ink:       #e9e1cd;
  --ink-deep:  #f2ecda;
  --ink-warm:  #dcc09a;
  --ink-soft:  #bdb49d;
  --quiet:     #8b8270;

  --rule:      #322d24;
  --rule-firm: #4d4536;
  --hair:      #2a261f;
  --ornament:  #9a8460;

  --ground: #93a7cd;
  --echo:   #6fb5a8;
  --rite:   #cf9b62;
  --made:   #b593c4;
  --accent: #d9a768;

  --ink-rgb: 233, 225, 205;

  /* A shadow on a dark ground is not a darker ground; it is the absence of the
     light the panel is catching. */
  --drop: 0 6px 22px rgba(0, 0, 0, 0.55);

  /* Light on dark reads heavier than it measures. */
  -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--old);
  font-variant-numeric: oldstyle-nums;
  font-size: 17.5px;
  line-height: 1.8;
  font-synthesis: none;
}

/* ---------------------------------------------------------------- chrome */

.chrome {
  /* Three columns rather than space-between: the middle slot has to hold still
     across both books, and space-between centres the gaps, not the item. */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: baseline;
  gap: 0.4rem 1rem;
  padding: 0.8rem 1.6rem;
  border-bottom: 1px solid var(--rule);
  font-size: var(--label-sm);
  font-variant: small-caps;
  letter-spacing: var(--track);
  color: var(--quiet);
}
/* Three short labels, none of which reads if it breaks across two lines. The
   drops that hang off them are prose and must wrap, so this is the labels
   themselves and not the elements that contain them — set on `.left` it
   reached into the masthead's list and made a book's blurb one long line
   running off the side of a phone. */
.chrome summary, .chrome .in, .chrome .here, .chrome a.home { white-space: nowrap; }
.work ul, .contents ol { white-space: normal; }
.chrome a.home { color: inherit; text-decoration: none; }
.chrome a.home:hover { color: var(--ink-soft); }

/* Two books were published into one tree with no way from either to the other,
   and this bar is the plain answer: the other book one click away, from every
   page. It is not the standing left rail design.md rejected — that rejection
   was about a second column of apparatus flanking the measure and turning the
   text into a corridor. The bar stays unsticky for the same reason: furniture
   that follows you down the page is the corridor again.

   Masthead and catch answer two questions — which work, where in it — so they
   are dressed differently and set widest scope first. There was a third thing
   here, a boxed word naming the book you were in; it said in a label what a
   page says better in its own voice, and it is gone. See the kicker below. */
.chrome .left { display: flex; align-items: baseline; gap: 1.1rem; }
.chrome .end { display: flex; justify-content: flex-end; align-items: baseline; gap: 0.5rem; }

/* Which of the two books. A word, not a control — it was a filled tab once and
   read as something to press. By the time a reader gets here the palette has
   already told them; this is the name for it. */
.chrome .in { color: var(--ink-soft); }

/* The work, on a catch of its own. Not a bare link: the work is two books, and
   a reader who has met only one needs the other named in words rather than by
   a label that assumes they know what "Rites" means here. */
.work { position: relative; }
.work summary {
  list-style: none;
  cursor: pointer;
  color: var(--ink);
  padding: 0.2rem 0.7rem;
  border: 1px solid var(--rule);
  background: var(--margin);
}
.work summary::-webkit-details-marker { display: none; }
.work summary::after {
  content: " \25BE";
  display: inline-block;
  margin-left: 0.45em;
  color: var(--ornament);
  font-size: 0.9em;
}
.work summary:hover { border-color: var(--rule-firm); color: var(--accent); }
.work summary:hover::after { color: var(--accent); }
.work[open] summary { color: var(--accent); border-color: var(--rule-firm); background: var(--catch); }
.work[open] summary::after { content: " \25B4"; }
.work ul {
  position: absolute;
  z-index: 40;
  top: calc(100% + 0.85rem);
  left: 0;
  width: 22rem;
  max-width: 84vw;
  margin: 0;
  padding: 0.8rem 1.1rem;
  list-style: none;
  background: var(--margin);
  border: 1px solid var(--rule-firm);
  box-shadow: var(--drop);
  font-variant: normal;
  letter-spacing: 0;
  font-family: var(--old);
  font-size: 0.9rem;
  line-height: 1.45;
}
.work li { margin-bottom: 0.5em; }
.work li a { color: var(--ink); text-decoration: none; }
.work li a:hover { color: var(--accent); }
.work li.both {
  margin: 0.7em 0 0;
  padding-top: 0.6em;
  border-top: 1px solid var(--rule);
  font-style: italic;
  font-size: 0.84rem;
}
.work li.both a { color: var(--quiet); }


/* Contents on a catch. A native <details>, so it works with no JavaScript. */
.contents { position: relative; }
.contents summary {
  list-style: none;
  cursor: pointer;
  padding: 0.15rem 0.7rem;
  border: 1px solid transparent;
  color: var(--ink-soft);
}
.contents summary::-webkit-details-marker { display: none; }
.contents summary::after { content: " \203A"; color: var(--quiet); }
.contents summary:hover { border-color: var(--rule); }
.contents[open] summary { border-color: var(--rule-firm); background: var(--catch); }
.contents[open] summary::after { content: " \2039"; }

.contents ol {
  position: absolute;
  z-index: 40;
  top: calc(100% + 0.85rem);
  left: 50%;
  transform: translateX(-50%);
  width: 30rem;
  max-width: 88vw;
  margin: 0;
  padding: 0.9rem 1.2rem;
  list-style: none;
  columns: 2;
  column-gap: 2rem;
  background: var(--margin);
  border: 1px solid var(--rule-firm);
  box-shadow: var(--drop);
}
.contents li {
  display: flex;
  justify-content: space-between;
  gap: 0.6rem;
  break-inside: avoid;
  margin-bottom: 0.35em;
  font-variant: normal;
  font-size: 0.82rem;
  letter-spacing: 0;
  font-family: var(--old);
}
.contents li a { color: var(--ink); text-decoration: none; }
.contents li a:hover { color: var(--accent); }
.contents li span { color: var(--quiet); font-variant: small-caps; letter-spacing: var(--track); }
.contents li[aria-current] a { color: var(--accent); }

/* The front matter leads the list; it has no number because it is not a part. */
.contents li.front { margin-bottom: 0.55em; }
.contents li.front a { font-style: italic; color: var(--ink-soft); }

/* A group heads its run. Not a link — there is no page for "Boundaries and
   Thresholds", and a link that goes nowhere is worse than a word that never
   offered. */
.contents li.group {
  display: block;
  break-after: avoid;
  margin: 0.9em 0 0.35em;
  font-family: var(--now);
  font-variant: small-caps;
  letter-spacing: var(--track);
  font-size: var(--label-xs);
  color: var(--quiet);
}
.contents li.group:first-child { margin-top: 0; }

/* No height cap here: a capped multi-column list flows the overflow sideways
   into a third column and hides it, which silently lost the last entry. */


/* ---------------------------------------------------------------- layout */

.cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 19.5rem;
  align-items: start;
  max-width: 68rem;
  margin: 0 auto;
}

.main {
  padding: 2.2rem 2rem 4rem;
  border-right: 1px solid var(--rule);
  min-width: 0;
}
.main > p, .main > h2 { max-width: var(--measure); }

/* A running head, as a book has — and, like a book's, only on paper. On screen
   the chrome above already names the book and the section, so showing it here
   too said the same two things three times over, counting the h1. In print the
   chrome is hidden and this is the only thing that says where you are.
   Ragged right throughout: justification and hyphenation on a screen were the
   half of the antique setting that only signalled period. */
.runhead {
  display: none;
  justify-content: space-between;
  max-width: 34rem;
  padding-bottom: 0.45rem;
  margin-bottom: 1.6rem;
  border-bottom: 1px solid var(--rule-firm);
  font-family: var(--now);
  font-variant: small-caps;
  letter-spacing: var(--track);
  font-size: var(--label-xs);
  color: var(--quiet);
}

/* Headings take their own leading. They were inheriting the body's — 1.8, set
   for reading paragraphs at 17.5px — which at title size opened as much space
   inside a two-line title as between two paragraphs. */
h1 {
  font-family: var(--display);
  font-size: 1.62rem;
  font-weight: 400;
  line-height: 1.3;
  /* Roman capital wants air between the letters, where the reading face wanted
     it taken away. */
  letter-spacing: 0.035em;
  margin: 0.3rem 0 1.6rem;
}

/* A section inside a part — Invocation, Within a life, The last crossing. It
   was set in the same italic the margin uses for a resonance, at barely more
   than prose size, and it read as a stray italic line rather than as the head
   of what followed. It is a title, so it is set as one — in the titling face
   now, rather than in the apparatus small caps it shared with the chrome, the
   kicker and every stage direction in the book. Cinzel's lowercase are
   already small capitals, so `font-variant` has nothing left to do and the
   tracking comes off: the face is drawn wide. Bound to the section under it
   by taking its air above rather than below. */
h2 {
  font-family: var(--title);
  font-size: 1.05rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.35;
  color: var(--ink-warm);
  margin: 2.9rem 0 0.75rem;
}

/* A subtitle, not a section. The first heading of a front matter is the book
   saying what it is, and it and the h1 are one unit — the general rule's
   2.9rem above collapsed into the h1's 1.6rem below and opened a hole between
   a title and its own second line.

   It was selected as `h1 + h2`, which is true of it and says nothing about
   why. The renderer knows which heading this is — it is the part's first
   block — so it marks it, and the selector now names the thing rather than
   its position. */
h2.subtitle {
  font-family: var(--old);
  font-variant: normal;
  font-style: italic;
  letter-spacing: 0;
  font-size: 1.05rem;
  line-height: 1.4;
  color: var(--ink-soft);
  margin: -1.1rem 0 1.9rem;
}
p { margin: 0 0 1.05em; }

/* The part's first line in small caps — kept from the antique setting when the
   indents, the justification and the centred part title were dropped. The
   renderer has marked this paragraph since the beginning and the stylesheet
   never had a rule for it, so the one piece of that setting the book decided
   to keep was the piece that was not there. ::first-line, so it is the line
   rather than a word count, and it reflows with the measure. */
/* Prose small caps, in the book's own face — not the apparatus form above, so
   it keeps its own tighter tracking. It and the movement run-in are the only
   two, and both live inside a sentence.

   `p.opening`, not `.opening`. The contents page reuses the class as a layout
   hook on the section holding the Invocation, and an unscoped `::first-line`
   was setting that page's first heading in small caps from three hundred
   lines away — an apparatus page wearing a prose device by accident. */
p.opening::first-line {
  font-variant: small-caps;
  letter-spacing: 0.035em;
}

/* A motto: a banner the next paragraph immediately argues with. There is
   exactly one in the book — *No Work but the Great Work.* — and it was set in
   the same small caps as the opening line three paragraphs above it, at
   nearly the same size, so the banner read as a second opening. One line in a
   whole book is precisely when a display face is right. Left, where the book
   keeps everything else. */
.motto {
  font-family: var(--title);
  font-variant: normal;
  letter-spacing: 0.02em;
  font-size: 1.3rem;
  line-height: 1.4;
  color: var(--ink-warm);
  max-width: 30rem;
  margin: 2.3rem 0 1.7rem;
}

/* ------------------------------------------------------- the six voices */

/* the law — air, and nothing else. no rules, no bold, no centring. */
.v-plain, .v-law, .v-question, .v-confession, .v-address, .v-scene { margin: 1.9rem 0 2.1rem; }

/* the plain voice — a blockquote nobody has made a decision about, and the
   only dress in the book that claims nothing.

   It is what a guess falls through to. `law` held that job and is the most
   ceremonial setting here, so fifteen of the theology's twenty-seven
   blockquotes were being declared at, by default, because they did not end in
   a question mark and did not run past four hundred characters.

   Air and a measure. The vertical space is the `.v-*` margin every voice
   takes; the narrower column and the set-apart ink say a hand put this here.
   No size, no rule, no indent, no italic — those are the other five saying
   something, and this one has nothing to say yet. */
.v-plain p {
  line-height: 1.7;
  color: var(--ink-deep);
  max-width: 30rem;
}

.v-law p {
  font-size: 1.24rem;
  line-height: 1.5;
  color: var(--ink-deep);
  max-width: 29rem;
  letter-spacing: -0.005em;
}

/* the question — open, unbolded, never rhetorical */
.v-question p {
  font-size: 1.16rem;
  line-height: 1.6;
  font-style: italic;
  color: var(--ground);
  max-width: 30rem;
  padding-left: 1.2rem;
  text-indent: -0.7rem;
}
.v-question p::before { content: "\201C"; color: #a8b2c4; padding-right: 0.1rem; }

/* the confession — smaller, admitted rather than declared */
.v-confession p {
  font-size: 0.94rem;
  line-height: 1.72;
  color: var(--ink-soft);
  max-width: 30rem;
  margin-left: 1.2rem;
  padding: 0.85rem 1.15rem;
  background: var(--tint);
}

/* the address — spoken to someone. native to this book, not borrowed.
   Left, like everything else. It was centred on its own narrower measure, and
   centring was the fourth thing saying what italic, the warm rust and a
   paragraph's worth of air had already said. The narrow measure stays: that
   one is doing work, because a line spoken to somebody is short. */
.v-address p {
  font-size: 1.1rem;
  line-height: 1.7;
  font-style: italic;
  color: #7a4a2a;
  max-width: 26rem;
}

/* the scene — narrative, and the longest set-apart thing in the book */
.v-scene p {
  font-size: 0.98rem;
  line-height: 1.72;
  color: var(--ink-deep);
  max-width: 34rem;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 0.9rem 0;
}

/* the interruption — a guest at the table breaking frame. Four of them:
   the Gnostic, the Buddhist, the anarchist and the storyteller. They are the
   only voices in the book that are not yours, so they get room and a mark. */
.teller {
  margin: 2.6rem 0;
  padding: 0 0 1.4rem;
  max-width: 31rem;
  border-bottom: 1px solid #e0d6c2;
}
.teller-mark { display: flex; margin-bottom: 0.7rem; }
.teller-mark svg { fill: none; stroke: var(--ornament); stroke-width: 1.1; stroke-linejoin: round; }
.teller-mark svg .fill { fill: var(--ornament); stroke: none; }
.teller .stage {
  display: block;
  font-family: var(--now);
  font-variant: small-caps;
  letter-spacing: var(--track);
  font-size: var(--label-xs);
  color: #a3846a;
  margin-bottom: 0.55rem;
}
.teller .said {
  display: block;
  font-style: italic;
  font-size: 1.32rem;
  line-height: 1.5;
  color: var(--ink-warm);
}

/* The epigraph — a book saying itself in one breath, on its own front matter
   and nowhere else.

   The theology's is six claims that are the whole theology. The practices' is
   the ten-second floor, three paragraphs closed by a rule, and it is the same
   gesture made by the other book — so the two are set the same way and a
   reader crossing between them meets a shape they have already read.

   Below the voices on purpose: the theology's sits inside a voice — `.v-plain`
   now that `law` is no longer what a guess falls through to — and a rule of
   equal weight further up the file would lose to it. The species underneath is
   not a mistake: an epigraph is dressed by where it stands, and the voice it
   happens to be made of claims nothing. */
/* A bracket, not a bar. The left rule it wore is blockquote grammar, and a
   blockquote is the one thing the book's own thesis is not — the page already
   carries six of them dressed six ways, and the epigraph was reading as a
   seventh. Hairlines above and below at its own measure is front-matter
   shape, and neither of the other two set-apart devices uses it.

   It also settles a difference the comment above used to deny. The practices'
   epigraph was closed by a `---` in the source and the theology's was not, so
   the two were never in fact set the same; the rule below is the epigraph's
   own now, in both books, and `practice.mjs` drops the source's. */
.epigraph {
  max-width: 31rem;
  margin: 1.7rem 0 2.6rem;
  padding: 1.4rem 0;
  border-top: 1px solid var(--ornament);
  border-bottom: 1px solid var(--ornament);
}
.epigraph p {
  font-size: 1.1em;
  line-height: 1.56;
  color: var(--ink-deep);
  max-width: none;
  margin-bottom: 0.75em;
  letter-spacing: 0;
}
.epigraph p:last-child { margin-bottom: 0; }

/* ------------------------------------------------ the Otherworld crossing */

/* The tale isn't a different kind of text. It's a place you go and come back. */
.tale { margin: 0; }
.tale p { max-width: var(--measure); }

.cross { display: flex; justify-content: center; margin: 1.7rem 0; }
.cross svg { fill: none; stroke: var(--rule-firm); stroke-width: 1; }
.cross circle { stroke: var(--ornament); }
.cross .pupil { fill: var(--ornament); stroke: none; }

/* ------------------------------------------------------------- the marks */

/* brings — a wash behind the word: something waiting just off the page */
a.brings {
  color: inherit;
  text-decoration: none;
  cursor: default;
  background: linear-gradient(transparent 88%, rgba(var(--ink-rgb), 0.13) 88%);
  transition: background 0.18s, color 0.18s;
}
a.brings:hover, a.brings:focus, a.brings.lit { background: linear-gradient(transparent 88%, currentColor 88%); }
a.brings:focus { outline: none; }
a.brings:focus-visible { outline: 2px solid var(--ground); outline-offset: 2px; }

/* goes — a dotted rule and an open door */
a.goes {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dotted rgba(var(--ink-rgb), 0.4);
  transition: border-color 0.18s, color 0.18s;
}
a.goes::after {
  content: "\25E6";
  font-size: 0.62em;
  vertical-align: 0.15em;
  padding-left: 0.2em;
  color: rgba(var(--ink-rgb), 0.4);
  transition: color 0.18s;
}
a.goes:hover, a.goes:focus-visible { border-bottom-color: currentColor; }
a.goes:hover::after, a.goes:focus-visible::after { color: currentColor; }

/* crosses — the third verb.

   brings opens a note beside you; goes takes you out of the book. A crossing
   does neither: it moves you to the other half of the same work, so it takes
   neither the wash that promises a margin card nor the dotted rule and open
   door that mean departure. It takes the mark you cross to get in — the same
   rule-and-eye as the Otherworld crossing, at reading size — and stays quiet
   until you are on it.

   This half-answers design.md's open question about the crossing mark and the
   versals being drawn in different hands: the small mark and the big one now
   match. The versals are still their own vocabulary. */
a.crosses { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; }
a.crosses:hover, a.crosses:focus-visible { border-bottom-color: var(--rite); color: var(--rite); }

.cross-mark { fill: none; stroke: var(--ornament); stroke-width: 1.1; }
.cross-mark circle { stroke: var(--ornament); }
a.crosses:hover .cross-mark, a.crosses:focus-visible .cross-mark { stroke: var(--rite); }

/* In a practice the mark follows the phrase: a reference glyph on a sentence
   that still has to read as a sentence while somebody performs it. */
body.practice a.crosses .cross-mark {
  width: 0.62em; height: auto;
  vertical-align: 0.08em;
  margin-left: 0.22em;
}

/* In a margin card it leads: here the card *is* the destination, so the mark
   introduces it rather than trailing it, and it takes the card's own hue. */
.note a.crosses .cross-mark {
  width: 0.78em; height: auto;
  vertical-align: -0.02em;
  margin-right: 0.32em;
  stroke: currentColor;
}
.note a.crosses .cross-mark circle { stroke: currentColor; }

/* hue is category, and it arrives only under the cursor */
.f-ground a.goes:hover, .f-ground .rel { color: var(--ground); }
.f-echo   a.goes:hover, .f-echo   .rel { color: var(--echo); }
.f-rite   a.goes:hover, .f-rite   .rel { color: var(--rite); }
.f-made   a.goes:hover, .f-made   .rel { color: var(--made); }

/* ------------------------------------------------------------- the margin */

.marg { font-family: var(--now); background: var(--margin); padding: 2.2rem 0.95rem 3rem; min-height: 100%; }

.note {
  display: block;
  margin-bottom: 0.9rem;
  padding: 0.65rem 0.8rem 0.7rem;
  border-top: 2px solid;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--ink-soft);
}
.note.f-ground { border-top-color: rgba(var(--ground-rgb), 0.5);  background: linear-gradient(rgba(var(--ground-rgb), 0.07), rgba(var(--ground-rgb), 0.07)), var(--card); }
.note.f-echo   { border-top-color: rgba(var(--echo-rgb), 0.5); background: linear-gradient(rgba(var(--echo-rgb), 0.07), rgba(var(--echo-rgb), 0.07)), var(--card); }
.note.f-rite   { border-top-color: rgba(var(--rite-rgb), 0.5);  background: linear-gradient(rgba(var(--rite-rgb), 0.07), rgba(var(--rite-rgb), 0.07)), var(--card); }
.note.f-made   { border-top-color: rgba(var(--made-rgb), 0.5); background: linear-gradient(rgba(var(--made-rgb), 0.07), rgba(var(--made-rgb), 0.07)), var(--card); }

/* Each link wears its relation as a colour on a short rule, not as a word.
   The taxonomy is a grammar the margin runs on, not something a reader is
   asked to learn: eight labels named out loud is a legend nobody wanted, and
   FORM in particular explains nothing to anyone who has not read the atlas.
   Unnamed, the hues still do the work — they separate stacked links, they
   repeat across the book, and an attentive reader will notice that the same
   colour keeps meaning the same kind of thing. */
.note .link {
  display: block;
  margin-bottom: 0.95rem;
  padding-left: 0.55rem;
  border-left: 2px solid currentColor;
}
.note .link:last-child { margin-bottom: 0; }
.note .f-ground { color: var(--ground); }
.note .f-echo   { color: var(--echo); }
.note .f-rite   { color: var(--rite); }
.note .f-made   { color: var(--made); }

/* Said out loud only to a screen reader: the relation, which has no colour to
   go on, and a crossing's destination, which in a practice is not in the
   anchor's own words. */
.note .rel, .vh {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

/* A citation supports a claim; a resonance proposes a relation. The italic
   goes on the sentence, never the label — `font-synthesis: none` means an
   italic small-caps label silently degrades to lowercase. */
.note .s-resonance .said { font-style: italic; }

/* Without a sentence the subjects carry the card. Set in the margin's own
   small caps so it reads as a heading over the link rather than as prose
   somebody forgot to finish. */
.note .subject {
  display: block;
  font-variant: small-caps;
  letter-spacing: var(--track);
  font-size: 0.82em;
  line-height: 1.45;
  color: var(--quiet);
  margin: 0.1em 0 0.5em;
}

/* The work's name wraps rather than being cut off. Truncating it was a way of
   keeping cards to one line back when a card was a sentence plus a source;
   now the name often *is* the annotation, and half a name is no use to a
   reader deciding whether to follow it. */
.note a.goes, .note a.crosses {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--quiet);
  overflow-wrap: break-word;
}

/* ------------------------------------------------------------ enhanced */

/* Everything below applies only once margin.js has taken over. */
.js .marg { position: relative; }
.js .note {
  position: absolute;
  left: 0.95rem;
  right: 0.95rem;
  margin: 0;
  opacity: 0;
  transition: opacity 0.25s ease;
}
/* The long settle belongs to a note going quiet — never to a mode change. */
.js .note.ghost { opacity: 0.2; transition: opacity 7s cubic-bezier(0.25, 0, 0.45, 1); }
.js .note.gone  { opacity: 0; transition: opacity 2.4s ease-out; }
.js .note.live  { opacity: 1; transition: opacity 0.15s ease-in; }
.js .note.live.f-ground { border-top-color: var(--ground); }
.js .note.live.f-echo   { border-top-color: var(--echo); }
.js .note.live.f-rite   { border-top-color: var(--rite); }
.js .note.live.f-made   { border-top-color: var(--made); }

@media (prefers-reduced-motion: reduce) {
  .js .note, .js .note.gone, .js .note.live { transition: none; }
}

/* -------------------------------------------------------------- closer */

/* A cadence, not emphasis. Every part gets the mark; only a short closing
   line gets the extra size, so The Ground's long ending reads normally.

   The assembly hung at the left on a 3.4rem rule, and a part ended with what
   read as an ordinary paragraph with a doodle over it. The mark now sits
   between two rules with a part-break's worth of air above it rather than a
   paragraph's, and the line itself takes the deep ink: `--ink-warm` is what
   this book uses for what is spoken, and a closer is its own last word, not
   speech. The line stays left. */
.closer-rule { display: flex; align-items: center; gap: 0.9rem; max-width: 30rem; margin: 4rem 0 1.3rem; }
.closer-rule::before, .closer-rule::after { content: ""; height: 1px; background: var(--rule-firm); }
.closer-rule::before { width: 3.4rem; }
.closer-rule::after { flex: 1; }
.closer-rule svg { fill: none; stroke: var(--ornament); stroke-width: 1.2; stroke-linejoin: round; }
.closer-rule svg .fill { fill: var(--ornament); stroke: none; }

.closer { max-width: 33rem; }
.closer.spoken { font-size: 1.2rem; line-height: 1.45; color: var(--ink-deep); max-width: 30rem; }

/* --------------------------------------------------------------- pager */

/* Prev/next is the primary movement through both books — design.md says so —
   and it was set smaller than a footnote, in the palest ink on the page. It is
   the one control a reader uses on every page; it reads at something near
   reading size, and names the section it goes to. */
.pager {
  display: flex;
  justify-content: space-between;
  gap: 1.4rem;
  margin-top: 3.5rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--rule);
  font-size: 0.98rem;
  line-height: 1.4;
}
.pager a {
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.pager a[rel="next"] { text-align: right; }
.pager a:hover { color: var(--accent); border-bottom-color: var(--rule-firm); }

/* -------------------------------------------------------------- narrow */

@media (max-width: 62rem) {
  .chrome { padding: 0.7rem 1.2rem; font-size: 0.74rem; }
  .cols { display: block; }
  .main { border-right: 0; padding: 1.6rem 1.2rem 2.5rem; }

  /* `body.practice .main` out-specifies the line above, so the practices kept
     their desktop padding on a phone until this was written. */
  body.practice { --pad: 1.4rem; }
  body.practice .main { padding-block: 1.8rem 3rem; }


  /* Without JavaScript the notes stack below the prose, which is the floor
     this whole design stands on: the page must read with nothing running. */
  .marg { padding: 1.6rem 1.2rem 2.5rem; border-top: 1px solid var(--rule); }

  /* With JavaScript they are reached by tapping the sentence instead. Fifteen
     cards in a pile at the foot of a part, divorced from the passages that
     called them, is not a margin — it is a list nobody reads. */
  .js .marg { display: none; }
  .js .note { position: static; opacity: 1; margin-bottom: 0; }

  /* …except the one currently in the sheet, which is inside the dialog and so
     outside .marg entirely. */
  .js .sheet .note { display: block; }
}

/* ----------------------------------------------------------- the practices */

/* A book you perform is not a book you read.
   
   The theology is set to be read with a margin alive beside it. These pages
   are held at arm's length, in a kitchen, on a phone, sometimes at four in the
   morning, by somebody who has to find their place again after doing what the
   last paragraph said. So: a little more size, a little less width, and four
   devices — the kicker, the movement, the said, the doors. Nothing else. No
   voices, no margin, no closers; the absence is the design. */

body.practice {
  --measure: 33rem;
  --gutter: 2.6rem;      /* where a movement's number hangs */
  --pad: 2rem;
  --size: 18.5px;
  --lh: 1.72;
  font-size: var(--size);
  line-height: var(--lh);
}

/* The gutter is taken from both sides, not only the left. Given to the left
   alone it moved the prose off the centre of the window by exactly its own
   width, and a reading column that is not centred reads as a mistake even to
   somebody who cannot say what is wrong with it. The measure is the content
   box; everything below only changes the tokens. */
/* The same block the theology sits in, so the text does not jump sideways when
   a reader crosses between the books. The theology's column is the left of a
   68rem block with a margin beside it; the practices have no margin, and
   centring the column in the window instead made the two books look like two
   sites. The space at the right is simply not used here.

   The gutter is what lines them up: the practices' numerals stand where the
   theology's prose starts, and the prose starts one gutter further in. */
body.practice main { max-width: 68rem; margin: 0 auto; }
body.practice .main {
  border-right: 0;
  max-width: calc(var(--measure) + 2 * var(--pad) + var(--gutter));
  margin: 0;
  padding-inline: calc(var(--pad) + var(--gutter)) var(--pad);
  padding-block: 2.4rem 4rem;
}

body.practice h1 {
  font-size: 1.5rem;
  margin: 0 0 1.5rem;
}
/* h2 needs no override: a section head is a section head in either book, and
   the front matter's three — The four groups, Finding a return, Keeping time —
   are doing exactly the job Invocation does. There was an h3 rule here too,
   for a level neither book has ever used — forty-three files, and not one
   `###` in any of them. */

/* The kicker — which group, which number, and the way to the rest of it.

   A practice is reached by need far more often than by reading front to back,
   so a reader often lands on one page with no sense that it is one of six
   close relatives. The group answers that, and it was a fact already sitting
   in the file, used nowhere but the contents.

   It is a catch: the chrome's own device, brought down into the page where the
   question is actually asked. The last line of the drop names the book and
   leads to its front matter, which is where "which book is this" belongs — a
   thing a reader wants once, on arrival, and not from a label standing over
   every page for ever. That label was tried in the chrome and taken out. */
.kicker {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
  /* A kicker's worth of air below, not a line's. It sits over a title that now
     carries a 2.6rem numeral beside it, and at 0.75rem the group, the number
     and the title were one stack with nothing between them. */
  margin: 0 0 1.45rem;
  font-family: var(--now);
  font-variant: small-caps;
  letter-spacing: var(--track);
  font-size: var(--label);
  color: var(--quiet);
}
.kicker > * + *::before {
  content: "\00B7";
  margin-right: 0.5rem;
  color: var(--rule-firm);
}

/* The versal.

   `docs/design.md` § No versals killed the illuminated initial because three
   parts opened with "I". Both books in has only hardened it: seven of the
   thirteen theology parts open with "T", and twenty-seven of the thirty-one
   practices open with the words *The point is to*. An ornamented letter would
   stutter thirty-four times.

   A number does not. The practices are numbered, the numbers cannot repeat,
   and the front matter already sends a reader to a practice by its number. So
   the one illumination in either book is a numeral — and arabic, where a
   movement's numeral in the same gutter is roman, so no one reads the two as
   one sequence.

   It hangs inside the h1 rather than beside it, because the kicker above
   varies in height and the number has to sit on the title whatever the kicker
   does. `aria-hidden`: the number is already in the page's own furniture, and
   a screen reader reading "5 The God Unfed" gains nothing.

   Only on an entry. The front matter and the last pages are the book talking
   about itself, and they are not practices to be counted. */
body.practice h1 { position: relative; }
.versal {
  position: absolute;
  top: -0.32rem;
  /* The gap is what `left` adds beyond the gutter: the numeral's right edge
     lands there, and a two-digit one grows leftward from it into the padding
     rather than toward the title. 0.85rem read as crowding at 2.6rem — a
     numeral that size needs about half its own height of air beside it. */
  left: calc(-1 * var(--gutter) - 1.35rem);
  width: var(--gutter);
  text-align: right;
  font-family: var(--display);
  font-size: 2.6rem;
  line-height: 1;
  color: var(--ornament);
}

.kin { position: relative; }
.kin summary { list-style: none; cursor: pointer; color: var(--ink-soft); }
.kin summary::-webkit-details-marker { display: none; }
.kin summary::after { content: " \203A"; color: var(--quiet); }
.kin summary:hover { color: var(--accent); }
.kin[open] summary { color: var(--accent); }
.kin[open] summary::after { content: " \2039"; }

.kin ol {
  position: absolute;
  z-index: 40;
  top: calc(100% + 0.55rem);
  left: 0;
  width: 25rem;
  max-width: 86vw;
  margin: 0;
  padding: 0.85rem 1.15rem;
  list-style: none;
  background: var(--margin);
  border: 1px solid var(--rule-firm);
  box-shadow: var(--drop);
  font-family: var(--old);
  font-variant: normal;
  letter-spacing: 0;
  font-size: 0.92rem;
  line-height: 1.45;
}
.kin li { display: flex; justify-content: space-between; gap: 0.9rem; margin-bottom: 0.4em; }
.kin li a { color: var(--ink); text-decoration: none; }
.kin li a:hover { color: var(--accent); }
.kin li span { color: var(--quiet); font-variant: small-caps; letter-spacing: var(--track); }
.kin li[aria-current] a { color: var(--accent); }
.kin li.all {
  display: block;
  margin: 0.75em 0 0;
  padding-top: 0.6em;
  border-top: 1px solid var(--rule);
  font-style: italic;
  font-size: 0.87rem;
}
.kin li.all a { color: var(--quiet); }
.kin li.all a:hover { color: var(--ink-soft); }

/* The movement.

   `**The hearth.**` opening a paragraph is the only structural device these
   thirty pages have, and it reached the browser as ordinary bold — the one
   weight `docs/design.md` argues the book should never lean on. It is a
   run-in heading, so it is set as one: the sentence stays a sentence, and the
   words that name the movement take small caps and the warm ink instead of
   weight.

   The number is not ornament. The front matter's occasion index sends readers
   to "The God Unfed, the last movement" and "True Naming, the last movement",
   and until this line existed the page they arrived at gave them no way to
   count. It hangs in the gutter so the measure is unchanged. */
.movement { position: relative; margin-top: 1.9em; }
.movement > strong {
  font-weight: 400;
  font-variant: small-caps;
  letter-spacing: 0.07em;
  color: var(--ink-warm);
}
.movement > .n {
  position: absolute;
  left: calc(-1 * var(--gutter));
  width: calc(var(--gutter) - 0.9rem);
  text-align: right;
  font-family: var(--now);
  font-size: 0.78rem;
  /* The paragraph's own line box, not the numeral's. A smaller font inheriting
     a unitless line-height gets a shorter line, and the numeral then sits a
     few pixels above the baseline it is supposed to be sitting on. */
  line-height: calc(var(--size) * var(--lh));
  color: var(--quiet);
}

/* The point sentence — the one place in a practice a claim is allowed to be
   something other than an instruction. Taken by position, not by wording: it
   opens every entry and none of the four pages that are not entries. A little
   size and the deep ink; no rule, no italic, no banner. `docs/practices.md`
   forbids mottos and set-apart lines, and this is a thesis, not one. */
.point {
  font-size: 1.09em;
  line-height: 1.5;
  color: var(--ink-deep);
  margin-bottom: 1.5em;
}

/* The said — the lines you speak.

   These were running inside the prose, chained with `Or:`, six deep in two
   entries: the densest paragraph in the book, arriving at the exact moment
   somebody is standing in a room choosing what to say. Set as a stack, one
   utterance a line, hanging so a long one still reads as a single thing.

   No quotation marks and no rule down the side. The space is the quotation —
   which is also why the source dropped its own quotes when these moved out of
   the paragraph. A rule would make them a quoted authority; they are the
   reader's own words, offered. */
ul.said {
  list-style: none;
  max-width: var(--measure);
  margin: 0.95rem 0 1.15rem;
  padding: 0 0 0 1.5rem;
}
/* Close-set on purpose. Six alternatives are one offer, and spaced like
   paragraphs they read as six instructions to carry out in order. */
ul.said li {
  margin-bottom: 0.12em;
  padding-left: 0.7rem;
  text-indent: -0.7rem;
  font-size: 1.05em;
  line-height: 1.4;
  color: var(--ink-warm);
}
ul.said li:last-child { margin-bottom: 0; }

/* ------------------------------------------------------- tables and rules */

/* The occasion index is the only way into the practices by need, and it was
   reaching the page as one paragraph of pipe characters. Set plainly: the need
   on the left in the quieter ink, what to do about it on the right. No zebra —
   a reader scans this for their own sentence, not across columns. */
.table-wrap { overflow-x: auto; margin: 1.4rem 0; }
table { border-collapse: collapse; width: 100%; font-size: 0.94rem; }
th {
  text-align: left;
  font-weight: 400;
  font-variant: small-caps;
  letter-spacing: var(--track);
  color: var(--quiet);
  border-bottom: 1px solid var(--rule);
  padding: 0 1.2rem 0.4rem 0;
}
td { vertical-align: top; padding: 0.5rem 1.2rem 0.5rem 0; border-bottom: 1px solid var(--hair); }
td:first-child { color: var(--ink-soft); width: 45%; }
td:last-child { padding-right: 0; }

/* Navigation inside the work — a table cell, or a practice named in the
   front matter's own prose — takes the book's hand rather than the browser's
   blue. A hairline in the parchment tone, rust under the cursor. Quiet enough
   that a paragraph naming thirty practices reads as a paragraph and not as a
   ruled list, and present enough to say every one of them is a door. */
td a,
body.practice .main > p > a:not(.crosses),
body.practice .main > ul > li > a:not(.crosses) {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--rule-firm);
}
td a:hover,
body.practice .main > p > a:not(.crosses):hover,
body.practice .main > ul > li > a:not(.crosses):hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

hr { border: 0; border-top: 1px solid var(--rule); margin: 2rem 0; }

/* Below the breakpoint a two-column table of forty rows is unreadable, so each
   row becomes a stacked pair: the need, then the answer indented under it. */
@media (max-width: 46rem) {
  /* Three labels will not sit on one line at this width without breaking, and
     a broken label is worse than a second row. The work and the book take the
     ends of the first line — widest scope and where-you-are — and the catch,
     which is the one thing here a reader actually presses, takes a row of its
     own and stays centred. */
  .chrome {
    grid-template-columns: auto auto;
    grid-template-areas: "work book" "catch catch";
    justify-content: space-between;
    row-gap: 0.55rem;
    padding: 0.6rem 1.2rem 0.7rem;
    font-size: 0.7rem;
  }
  .chrome .left { grid-area: work; }
  .chrome .end  { grid-area: book; }
  .chrome .here { grid-area: book; }
  .chrome .contents { grid-area: catch; justify-self: center; }

  /* A catch is a word about 26px tall, and a fingertip needs forty. The target
     is grown without moving the word, the way the sheet's close button does
     it — the bar has to stay a bar. */
  .chrome summary, .kin summary { position: relative; }
  .chrome summary::before, .kin summary::before {
    content: "";
    position: absolute;
    inset: -0.5rem -0.35rem;
  }

  /* A drop anchored to a label near the edge of the screen runs off it. Here
     it hangs from the bar and spans it, keeping the page's own gutter: the
     containing block moves from the catch to the whole header, which is what
     making the catch static and the header relative does. */
  .chrome { position: relative; }
  .contents, .work { position: static; }
  .contents ol, .work ul {
    top: 100%;
    left: 1.2rem;
    right: 1.2rem;
    width: auto;
    max-width: none;
    transform: none;
  }

  /* No room beside the column for a hanging numeral. It goes inline rather
     than away: a phone is exactly where somebody counts movements with the
     page in one hand and the other hand doing what it said. */
  body.practice { --gutter: 0rem; --pad: 1.2rem; }
  .versal {
    position: static;
    display: block;
    width: auto;
    text-align: left;
    font-size: 1.9rem;
    margin-bottom: 0.15rem;
  }
  .movement > .n {
    position: static;
    display: inline;
    width: auto;
    margin-right: 0.5rem;
    line-height: inherit;
  }

  table, tbody, tr, td { display: block; width: auto; }
  thead { display: none; }
  tr { border-bottom: 1px solid var(--rule); padding: 0.6rem 0; }
  td { border: 0; padding: 0; }
  td:first-child { width: auto; }
  td:last-child { padding-left: 1.2rem; }
}

/* ------------------------------------------------------------- contents */

/* Both books on one page. It exists because the two were published into one
   tree with no way from either to the other, and a reader arriving at the
   front door could not learn the second book was there. */
.contents-page .book { margin-bottom: 3rem; }
/* The Invocation opens both books, so it stands clear of them. */
.contents-page .opening { margin-bottom: 2.4rem; padding-bottom: 1.4rem; border-bottom: 1px solid var(--rule); }
.contents-page .finding { margin-top: 1rem; }
.contents-page .book h2 {
  font-style: normal;
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--ink);
  margin: 0 0 0.2rem;
}
.contents-page .book h2 a { color: var(--ink); text-decoration: none; }
.contents-page .book h2 a:hover { color: var(--accent); }
.contents-page h3 {
  font-size: var(--label-xs);
  font-weight: 400;
  font-variant: small-caps;
  letter-spacing: var(--track);
  color: var(--quiet);
  margin: 1.6rem 0 0.5rem;
}
ol.parts { list-style: none; margin: 0.6rem 0; padding: 0; columns: 2; column-gap: 2.4rem; }
ol.parts li { break-inside: avoid; margin-bottom: 0.3em; display: flex; gap: 0.7rem; }
ol.parts li a { color: var(--ink); text-decoration: none; }
ol.parts li a:hover { color: var(--accent); }
ol.parts .n {
  flex: 0 0 2.2em;
  text-align: right;
  color: var(--quiet);
  font-variant: small-caps;
  letter-spacing: var(--track);
}
@media (max-width: 46rem) { ol.parts { columns: 1; } }

/* ----------------------------------------------------------- the sheet */

/* A note on a narrow screen, where there is no margin for it to stand in.
   It rises over the lower part of the page and the sentence that called it
   stays readable above — which is the whole reason for a sheet rather than a
   full screen. It stays until dismissed: nothing on a touch screen should
   time out while somebody is reading it. */

dialog.sheet {
  border: 0;
  padding: 0;
  margin: 0 0 0 auto;
  max-width: none;
  width: 100%;
  /* A floor as well as a ceiling: a one-link card should raise the same sheet
     as a five-link one, so the thing does not change size as you tap along a
     passage. The card sits at the top of it and the space below is deliberate. */
  min-height: 46vh;
  max-height: 74vh;
  /* The small viewport where there is one: on iOS `vh` is measured with the
     toolbars hidden, so a sheet sized in it can run past what is on screen. */
  min-height: 46svh;
  max-height: 74svh;
  position: fixed;
  inset: auto 0 0 0;
  /* Only the body scrolls. A dialog is a scroll container by default, and two
     nested ones on a phone means the header can scroll away under a thumb. */
  overflow: hidden;
  background: var(--margin);
  color: var(--ink-soft);
  border-top: 1px solid var(--rule);
  box-shadow: var(--drop-up);
}
/* Scoped to [open]: a display on the bare dialog would show it closed. */
dialog.sheet[open] { display: flex; flex-direction: column; }
dialog.sheet::backdrop { background: rgba(var(--ink-rgb), 0.25); }

/* No grab handle. It would promise a drag that does nothing — the sheet has
   one height and cannot be resized, so a control implying otherwise is a lie
   told in furniture. */

/* The close button gets a row of its own rather than floating over the body.
   Laid over the scrolling element, it showed clipped on a phone and a tap on
   it did nothing — nothing may sit on top of the scroller. */
.sheet-head {
  flex: none;
  display: flex;
  justify-content: flex-end;
  padding: 0.5rem 0.7rem 0;
}

.sheet-body {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  font-family: var(--now);
  /* Deep foot: the card sits high in the sheet, near the passage it belongs
     to, rather than hugging the bottom edge of the screen. */
  padding: 0.2rem 1.2rem 5rem;
  overflow-y: auto;
  /* The sheet spans the screen, but the card inside keeps a readable measure —
     a title set across a whole tablet is no easier to read than one that runs
     off a phone. */
  max-width: 34rem;
  margin: 0 auto;
}
/* Read at arm's length on a phone, not glanced at from a chair. The margin's
   greys are set to recede beside the prose; in the sheet the note *is* the
   page, so it takes the page's own ink. */
.sheet .note { margin: 0; border-top: 0; padding: 0; color: var(--ink); }
.sheet .note .subject { color: var(--ink-soft); }
.sheet .note a.goes { color: var(--ink); font-size: 0.95rem; }
.sheet .note .said { color: var(--ink); }
.sheet .note .link { margin-bottom: 1.1rem; }

.sheet-close {
  position: relative;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  -webkit-appearance: none;
  appearance: none;
  border: 1px solid var(--rule);
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink-soft);
  cursor: pointer;
  touch-action: manipulation;
}
/* The circle stays small; the target is the 44px a fingertip needs. */
.sheet-close::before { content: ""; position: absolute; inset: -0.4rem; }
/* Drawn rather than set: the ✕ glyph falls back to whatever font the phone
   happens to have, and a drawn cross is the same everywhere. */
.sheet-close svg { display: block; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; }
.sheet-close:hover { border-color: var(--ink-soft); }

/* The page behind does not scroll while a note is over it. */
body.sheeted { overflow: hidden; }

/* Above the breakpoint the margin does the work and the sheet never opens. */
@media (min-width: 62.01rem) { dialog.sheet[open] { display: none; } }

/* ---------------------------------------------------------------- print */

/* The plainest reading is paper. Marks, margin and chrome all come off. */
@media print {
  /* The movement numerals stay — they are the structure of the practice, not
     navigation, and a printed page still has to be countable. */
  .chrome, .marg, .pager, dialog.sheet { display: none; }
  /* A crossing is a place to go, and paper is where you cannot. */
  a.crosses { border-bottom: 0; }
  .cross-mark { display: none; }
  /* the running head is book, not chrome — on paper it is what orients you */
  .runhead { display: flex; max-width: none; }
  .cols { display: block; max-width: none; }
  .main { border-right: 0; padding: 0; }
  body { background: #fff; color: #000; font-size: 11.5pt; line-height: 1.55; }
  a.brings { background: none; }
  a.goes { border-bottom: 0; }
  a.goes::after { content: ""; }
  .v-law p, .v-question p, .v-address p { font-size: 12.5pt; }
  .v-confession p { background: none; border-left: 1pt solid #999; }
  h1 { break-after: avoid; }
  .voice, .teller, .tale p { break-inside: avoid; }

  /* Paper is paper. The practices are set by lamplight on a screen, and the
     lamplight ink — a pale gold for what is spoken, a pale one for the
     numerals — is close to invisible on a white sheet. Printing one prints the
     daylight book: the tokens go back to their `:root` values, and only the
     ones this book actually uses need saying. */
  body.practice {
    --paper: #fff;
    --ink: #000;
    --ink-deep: #1a1a1a;
    --ink-warm: #3a2d22;
    --ink-soft: #444;
    --quiet: #777;
    --rule: #bbb;
    --rule-firm: #999;
    --ornament: #777;
    --accent: #000;
    --ink-rgb: 0, 0, 0;
  }
  /* `body.practice .main` out-specifies the `.main` rule above. The gutter is
     kept — the numerals stand in it — and the rest of the page furniture goes. */
  body.practice main { max-width: none; }
  body.practice .main {
    max-width: none;
    padding-inline: var(--gutter) 0;
    padding-block: 0;
  }
  .movement, ul.said, .epigraph { break-inside: avoid; }

  /* The versal hangs a little wider than the gutter, which on paper is a
     little wider than the sheet. It stands over the title instead, exactly as
     it does on a phone, and for the same reason. */
  .versal {
    position: static;
    display: block;
    width: auto;
    text-align: left;
    font-size: 1.9rem;
    margin-bottom: 0.15rem;
  }
  .kicker { break-after: avoid; }
}

/* ------------------------------------------------------ the link index */

/* A back-of-book index: the oldest way of turning a pile of references into
   something a reader can move around in. Set plainer than the book, because
   it is apparatus rather than text — but in the book's faces, because it is
   still part of the same object. */

body.links { padding-top: 0; }
.chrome .here {
  font-family: var(--now);
  font-variant: small-caps;
  letter-spacing: var(--track);
  font-size: var(--label-xs);
  color: var(--quiet);
}
.index-main {
  max-width: 46rem;
  margin: 0 auto;
  padding: 2.4rem 1.6rem 6rem;
}
.index-main h1 { margin-bottom: 0.4rem; }
.index-main .hint {
  font-family: var(--now);
  font-size: 0.85rem;
  color: var(--ink-soft);
  max-width: 32rem;
  margin: 0 0 1.6rem;
}

/* Every subject at the top, so the whole vocabulary is visible at once —
   that is the part a reader browses. */
.jump {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.9rem;
  padding: 1rem 0 1.4rem;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  margin-bottom: 2.2rem;
}
.jump a {
  font-family: var(--now);
  font-variant: small-caps;
  letter-spacing: var(--track);
  font-size: var(--label-sm);
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px dotted transparent;
}
.jump a:hover { border-bottom-color: var(--quiet); }
.n { color: var(--quiet); font-size: 0.78em; font-variant: normal; }

.tag { margin-bottom: 2.2rem; scroll-margin-top: 4rem; }
.tag h2 {
  font-family: var(--now);
  font-variant: small-caps;
  letter-spacing: var(--track);
  font-size: 1rem;
  font-weight: 400;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid var(--rule);
  margin: 0 0 0.7rem;
}
.tag .top { float: right; color: var(--quiet); text-decoration: none; font-size: 0.8rem; }
.tag ul { list-style: none; margin: 0; padding: 0; }

/* One work, then the passages that reach it — a work linked from four places
   is one entry with four lines under it, not four works. */
.work-entry {
  padding-left: 0.6rem;
  border-left: 2px solid currentColor;
  margin-bottom: 0.9rem;
}
.work-entry.f-ground { color: var(--ground); }
.work-entry.f-echo   { color: var(--echo); }
.work-entry.f-rite   { color: var(--rite); }
.work-entry.f-made   { color: var(--made); }
.work-entry .work {
  display: block;
  font-size: 0.95rem;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px dotted rgba(var(--ink-rgb), 0.35);
}
.work-entry .work:hover { border-bottom-color: currentColor; }
.work-entry .said { display: block; font-size: 0.88rem; color: var(--ink); margin-top: 0.15rem; }
.work-entry .places { list-style: none; margin: 0.2rem 0 0; padding: 0; }
.work-entry .places li {
  font-family: var(--now);
  font-size: 0.8rem;
  color: var(--ink-soft);
  line-height: 1.45;
}
.work-entry .back { color: var(--ink-soft); }
.work-entry .in {
  font-variant: small-caps;
  letter-spacing: var(--track);
  color: var(--quiet);
  margin-left: 0.4em;
}

/* The margin's subjects lead here. */
.note .subject a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dotted rgba(var(--ink-rgb), 0.28);
}
.note .subject a:hover { border-bottom-color: currentColor; color: var(--ink); }

@media print { .jump, .tag .top { display: none; } }