/* SECTIONS — The remaining sections, each small enough to share a file: Solomonic, gematria, source books, Enochian, geomancy and its shield, the planetary squares, alphabets, symbols, alchemy and the orders.

   One of ten stylesheets split out of a single 10,361-line tree.css.
   THE ORDER MATTERS AND IS NOT ALPHABETICAL. The layout links them as
   base → tree → correspondences → reference → tarot → chrome → astrology → history → sections → editing,
   and the rules inside this file keep the order they had in the original,
   so the cascade resolves exactly as it did before the split. */

/* --- the seventy-two ------------------------------------------------------ */

.spirits__controls {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: flex-end;
  justify-content: space-between;
  margin: 1.25rem 0 0;
}
.spirits__ranks { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.spirits__legend {
  width: 100%;
  padding: 0 0 0.45rem;
  font-size: var(--type-label);
  font-variant: small-caps;
  letter-spacing: 0.07em;
  color: var(--ink-faint);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 32px;
  padding: 0.25rem 0.7rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: none;
  color: var(--ink-muted);
  font: inherit;
  font-size: 0.82rem;
  text-decoration: none;
  cursor: pointer;
}
.chip:hover { border-color: var(--ink-faint); color: var(--ink); }
.chip--on {
  border-color: var(--ink);
  color: var(--ink);
  background: var(--ground-lift);
  box-shadow: inset 0 -2px 0 var(--ink);
}
.chip__count { font-size: var(--type-label); color: var(--ink-faint); }
.chip--on .chip__count { color: var(--ink-muted); }

.spirits__tools { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.spirits__entry-search {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 32px;
  color: var(--ink-muted);
  font-size: var(--type-label);
  cursor: pointer;
}
.spirits__entry-search input { accent-color: var(--accent); }
.spirits__search input,
.spirits__order select {
  min-height: 32px;
  padding: 0.3rem 0.6rem;
  border: 1px solid var(--rule);
  background: var(--ground-lift);
  color: var(--ink);
  font: inherit;
  font-size: var(--type-small);
}
.spirits__search input { min-width: 15rem; }
.spirits__count { margin: 1.1rem 0 0; font-size: 0.82rem; color: var(--ink-faint); }
.spirits__empty {
  margin: 1.5rem 0;
  max-width: 58ch;
  color: var(--ink-muted);
  line-height: 1.65;
}

.spirit-grid {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
  display: grid;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}
@media (min-width: 700px) { .spirit-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .spirit-grid { grid-template-columns: repeat(3, 1fr); } }

.spirit { background: var(--ground); }
.spirit__link {
  display: flex;
  gap: 0.9rem;
  padding: 0.95rem 1rem;
  color: var(--ink);
  text-decoration: none;
}
.spirit__link:hover { background: var(--ground-lift); }
.spirit__link:focus-visible,
.spirit__disclosure summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.spirit__disclosure { border-top: 1px solid var(--rule); }
.spirit__disclosure summary {
  padding: 0.55rem 1rem;
  color: var(--ink-muted);
  font-size: var(--type-label);
  cursor: pointer;
}
.spirit__disclosure summary:hover { color: var(--ink); background: var(--ground-lift); }
.spirit__disclosure blockquote {
  margin: 0;
  padding: 0.25rem 1rem 1rem;
  color: var(--ink-muted);
  font-size: var(--type-small);
  line-height: 1.65;
}
.spirit__disclosure blockquote p { margin: 0; }
.spirit__disclosure footer { margin-top: 0.65rem; color: var(--ink-faint); font-size: var(--type-label); }

/* The seals are black ink on white paper; on a dark ground they have to be
   inverted or they are a white block with a scribble in it. */
.spirit__sigil {
  flex: none;
  width: 4.5rem;
  height: 4.5rem;
  object-fit: contain;
  filter: invert(1) brightness(0.92);
  opacity: 0.9;
}
.spirit__sigil--none { display: block; border: 1px dashed var(--rule); }
.spirit__link:hover .spirit__sigil { opacity: 1; }

.spirit__body { display: block; min-width: 0; }
.spirit__head { display: flex; align-items: baseline; gap: 0.5rem; }
.spirit__number { font-size: var(--type-label); color: var(--ink-faint); }
.spirit__name { font-size: 1.02rem; }
.spirit__meta,
.spirit__also {
  display: block;
  margin-top: 0.15rem;
  font-size: var(--type-label);
  color: var(--ink-faint);
}
.spirit__opening {
  display: block;
  margin-top: 0.45rem;
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--ink-muted);
}
.spirit-page__hero { display: grid; gap: 1.5rem; margin: 1.25rem 0 0; }
@media (min-width: 760px) {
  .spirit-page__hero { grid-template-columns: 15rem minmax(0, 1fr); align-items: start; }
}
/* The seals are potrace output: black paths on nothing at all, no background
   rect. So the panel behind them is CSS, and it has to be on a wrapper rather
   than on the image — a filter applies to the element's own background too,
   and `invert(1)` was turning --ground-lift into a near-white block behind the
   sigil. Black panel, inverted seal, white lines. */
.spirit-page__seal { margin: 0; }
.spirit-page__seal-frame {
  display: block;
  background: var(--seal-ground);
  border: 1px solid var(--rule);
  padding: 1rem;
  /* border-box, or width:100% plus 2rem of padding and 2px of border overflows
     the grid column by 34px and lands on the text beside it. */
  box-sizing: border-box;
  width: 100%;
}
.spirit-page__seal-image {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: auto;
  filter: invert(1);
}
.spirit-page__seal figcaption {
  margin: 0.6rem 0 0;
  font-size: var(--type-label);
  line-height: 1.5;
  color: var(--ink-faint);
}
.spirit-page__also { margin: 0.3rem 0 0; color: var(--ink-muted); font-size: var(--type-small); }
.spirit-page__entry {
  margin: 1rem 0 0;
  padding: 1.1rem 1.25rem;
  border-left: 3px solid var(--rule);
  background: var(--ground-lift);
  max-width: 70ch;
}
.spirit-page__entry p { margin: 0; line-height: 1.75; }
.spirit-page__entry footer { margin: 0.8rem 0 0; font-size: var(--type-label); color: var(--ink-faint); }
.spirit-page__nav {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin: 2.5rem 0 0;
  padding: 1rem 0;
  border-top: 1px solid var(--rule);
  font-size: var(--type-small);
}
.spirit-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; padding: 0; }

.parts { list-style: none; margin: 1.25rem 0 0; padding: 1px; background: var(--rule); }
.parts__item {
  margin-bottom: 1px;
  background: var(--ground);
}
.parts__item:last-child { margin-bottom: 0; }
.parts__disclosure > summary {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: center;
  min-height: 56px;
  box-sizing: border-box;
  padding: 0.65rem 0.8rem;
  cursor: pointer;
  list-style: none;
}
.parts__disclosure > summary::-webkit-details-marker { display: none; }
.parts__disclosure > summary:hover { background: var(--history-band); }
.parts__disclosure[open] > summary { border-bottom: 1px solid var(--rule); }
.parts__number {
  flex: none;
  width: 1.9rem;
  height: 1.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--rule);
  border-radius: 50%;
  font-size: 0.8rem;
  color: var(--ink-faint);
}
.parts__summary-title { min-width: 0; }
.parts__title { margin: 0; font-size: 1.05rem; display: flex; gap: 0.5rem; align-items: baseline; flex-wrap: wrap; }
.parts__preview {
  display: block;
  overflow: hidden;
  margin-top: 0.15rem;
  color: var(--ink-faint);
  font-size: var(--type-label);
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.parts__toggle {
  width: 0.4rem;
  height: 0.4rem;
  border-right: 1.5px solid var(--ink-faint);
  border-bottom: 1.5px solid var(--ink-faint);
  transform: rotate(-45deg);
}
.parts__disclosure[open] .parts__toggle { transform: rotate(45deg); }
.parts__body { padding: 0.9rem 1rem 1rem 3.55rem; }
.parts__summary { margin: 0; max-width: 70ch; line-height: 1.7; }
.parts__why { margin: 0.6rem 0 0; max-width: 70ch; font-size: var(--type-small); line-height: 1.65; color: var(--ink-muted); }

.metals {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.8rem;
  margin: 0 0 1.5rem;
  padding: 0.85rem 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.metals li { margin: 0 0 0.4rem; }
.solomonic-reference { margin-top: 1rem; }
.parts__link { margin: 0.6rem 0 0; font-size: var(--type-small); }

.rank-group__count { color: var(--ink-faint); font-size: 0.8em; font-variant-numeric: tabular-nums; }
.rank-group__metal { margin: 0.35rem 0 0; font-size: var(--type-small); color: var(--ink-muted); }
.rank-group__metal strong { color: var(--ink); font-weight: 500; }
.rank-group .spirit-chips { margin-top: 0.8rem; }

/* The seals, as an index of pictures. The frame and the image are the spirit
   page's own classes — black wrapper, inverted image — so the two cannot
   drift; this only makes the frame square and centres the seal in it. */
.seal-gallery {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 1.25rem 1rem;
  grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
}
.seal-gallery__link { display: block; color: var(--ink); text-decoration: none; }
.seal-gallery__frame {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  max-width: 100%;
  padding: 0.75rem;
}
.seal-gallery__frame .spirit-page__seal-image { width: 100%; height: 100%; object-fit: contain; }
.seal-gallery__link:hover .seal-gallery__frame,
.seal-gallery__link:focus-visible .seal-gallery__frame { border-color: var(--ink-faint); }
.seal-gallery__name { display: block; margin-top: 0.45rem; font-size: var(--type-small); }
.seal-gallery__source { margin: 0.15rem 0 0; font-size: var(--type-label); color: var(--ink-faint); }

/* ── Rituals ─────────────────────────────────────────────────────────────
   Every drawing is SVG in currentColor, built from the step rows. The first
   stroke of a pentagram is the one the 1909 plate prints, so it is the one
   drawn strongest; the other four follow from it and are drawn lighter. */
.ritual-hebrew { font-size: 1.05em; }
.ritual-context { max-width: 48rem; margin: 1.5rem 0 0; }
.ritual-cards { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
@media (min-width: 760px) { .ritual-cards { grid-template-columns: repeat(2, 1fr); } }
.ritual-card { background: var(--ground); }
.ritual-card__link { display: flex; gap: 1rem; align-items: flex-start; height: 100%; padding: 1rem 1.1rem; color: var(--ink); text-decoration: none; }
.ritual-card__link:hover { background: var(--ground-lift); }
.ritual-card__art { flex: none; width: 5.5rem; height: 5.5rem; display: grid; place-items: center; }
.ritual-card__art svg { width: 100%; height: 100%; }
.ritual-card__art--hebrew { font-size: 1.6rem; color: var(--ink-muted); }
.ritual-card__body { display: block; min-width: 0; }
.ritual-card__kind { display: block; font-size: var(--type-label); font-variant: small-caps; letter-spacing: 0.06em; color: var(--ink-faint); }
.ritual-card__name { display: block; margin-top: 0.15rem; font-size: 1.05rem; font-weight: 500; }
.ritual-card__summary { display: block; margin-top: 0.35rem; font-size: var(--type-small); line-height: 1.55; color: var(--ink-muted); }
.ritual-card__count { display: block; margin-top: 0.4rem; font-size: var(--type-label); color: var(--ink-faint); }

.ritual-page__abbreviation { margin: 0.2rem 0 0; color: var(--ink-faint); letter-spacing: 0.08em; }
.ritual-page__abbreviation abbr { text-decoration: none; }
.ritual-page__purpose { max-width: 70ch; margin: 0.6rem 0 0; color: var(--ink-muted); line-height: 1.6; }
.ritual-page__related { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; margin: 1rem 0 0; }
.ritual-facts { display: flex; flex-wrap: wrap; gap: 1px; margin: 1.25rem 0 0; background: var(--rule); border: 1px solid var(--rule); max-width: 42rem; }
.ritual-facts > div { flex: 1 1 7rem; padding: 0.55rem 0.75rem; background: var(--ground-lift); }
.ritual-facts dt { font-size: var(--type-label); color: var(--ink-faint); }
.ritual-facts dd { margin: 0.15rem 0 0; }

.ritual-page__circle-body { display: grid; gap: 1.5rem; align-items: center; }
@media (min-width: 820px) { .ritual-page__circle-body { grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); } }
.ritual-page__circle-key p { max-width: 60ch; margin: 0 0 0.75rem; line-height: 1.65; color: var(--ink-muted); }

.ritual-circle { display: block; width: 100%; max-width: 22rem; height: auto; color: var(--ink); overflow: visible; }
.ritual-circle--compact { max-width: 8rem; }
.ritual-circle__ring { fill: none; stroke: var(--rule); stroke-width: 1.5; }
.ritual-circle__walk { fill: none; stroke: var(--ink-faint); stroke-width: 1.2; stroke-dasharray: 3 3; }
.ritual-circle__walk-head { fill: var(--ink-faint); }
.ritual-circle__plate { fill: var(--ground); stroke: var(--rule); }
.ritual-circle__glyph { fill: none; stroke: var(--ink-muted); stroke-width: 1.4; stroke-linejoin: round; }
.ritual-circle__quarter--on .ritual-circle__glyph { stroke: var(--ink); stroke-width: 2; }
.ritual-circle__quarter--on .ritual-circle__plate { stroke: var(--ink); }
.ritual-circle__quarter-name { fill: var(--ink-faint); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; }
.ritual-circle__divine { fill: var(--ink); font-size: 13px; }
.ritual-circle__angel { fill: var(--ink-muted); font-size: 12px; font-style: italic; }
.ritual-circle__quarter--on .ritual-circle__angel { fill: var(--ink); font-weight: 600; }
.ritual-circle__performer { fill: var(--ground-lift); stroke: var(--ink); stroke-width: 1.5; }
.ritual-circle__facing { fill: var(--ink); }
.ritual-circle--compact .ritual-circle__angel { font-size: 22px; }

.pentagram { display: block; width: 100%; max-width: 11rem; height: auto; color: var(--ink); }
.pentagram--compact { max-width: 5.5rem; }
.pentagram__ghost { fill: none; stroke: var(--rule); stroke-width: 1; stroke-linejoin: round; }
.pentagram__stroke { stroke: currentColor; stroke-linecap: round; }
.pentagram__stroke--first { stroke-width: 2.4; }
.pentagram__stroke--rest { stroke-width: 1.3; opacity: 0.6; }
.pentagram__arrow { fill: currentColor; }
.pentagram__arrow--rest { opacity: 0.85; }
.pentagram__start-label { fill: var(--ink-muted); font-size: 6px; letter-spacing: 0.06em; }
.pentagram__number { fill: var(--ink-muted); font-size: 7px; }
.pentagram__number--first { fill: var(--ink); font-weight: 700; }
.pentagram__start { fill: var(--ground); stroke: currentColor; stroke-width: 1.8; }

.ritual-star { display: block; width: 100%; max-width: 7rem; height: auto; color: var(--ink); }
.ritual-star__line { fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }

.ritual-figure { display: block; width: 100%; max-width: 8rem; height: auto; color: var(--ink); }
.ritual-figure__head { fill: none; stroke: currentColor; stroke-width: 1.6; }
.ritual-figure__body, .ritual-figure__limb { stroke: var(--ink-muted); stroke-width: 1.6; stroke-linecap: round; }
.ritual-figure__limb--active { stroke: currentColor; stroke-width: 2.2; }
.ritual-figure__forearm { fill: none; stroke: currentColor; stroke-width: 2; stroke-dasharray: 3 2.5; stroke-linecap: round; }
.ritual-figure__hand { fill: currentColor; }
.ritual-figure__guide { stroke: var(--rule); stroke-width: 1; stroke-dasharray: 2 2; }
.ritual-figure__point { fill: var(--ground); stroke: var(--ink-faint); stroke-width: 1; }
.ritual-figure__point--on { fill: currentColor; stroke: currentColor; }
.ritual-figure__number { fill: currentColor; font-size: 8px; font-weight: 700; }
.ritual-figure__side { fill: var(--ink-faint); font-size: 7px; letter-spacing: 0.06em; }
.ritual-figure__breath { stroke: currentColor; stroke-width: 1.2; stroke-dasharray: 2 2; }
.ritual-figure__arrow { fill: currentColor; }

.ritual-stage { margin: 2rem 0 0.5rem; font-size: 1rem; font-variant: small-caps; letter-spacing: 0.06em; color: var(--ink-muted); }
.ritual-steps { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.ritual-step { display: grid; grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr); gap: 1.25rem; padding: 1.25rem 0; border-top: 1px solid var(--rule); scroll-margin-top: 1rem; }
.ritual-step:last-child { border-bottom: 1px solid var(--rule); }
@media (max-width: 560px) { .ritual-step { grid-template-columns: minmax(0, 1fr); } .ritual-step__art { max-width: 9rem; } }
.ritual-step__art:empty { display: none; }
.ritual-step__number { display: flex; gap: 0.6rem; align-items: baseline; margin: 0; font-size: var(--type-label); color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.ritual-step__quarter { font-variant: small-caps; letter-spacing: 0.06em; }
.ritual-step__instruction { margin: 0.25rem 0 0; font-size: 1.05rem; line-height: 1.55; }
.ritual-step__spoken { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.75rem 0 0; }
.ritual-step__word { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem 0.6rem; padding: 0.4rem 0.7rem; border: 1px solid var(--rule); border-radius: 0.4rem; background: var(--ground-lift); color: var(--ink); text-decoration: none; }
.ritual-step__word:hover, .ritual-step__word:focus-visible { border-color: var(--ink-faint); }
.ritual-step__word-name { font-size: 1.1rem; letter-spacing: 0.02em; }
.ritual-step__word-hebrew { font-size: 1.25rem; }
.ritual-step__word-gloss { font-size: 0.8rem; color: var(--ink-muted); }
.ritual-step__declared { margin: 0; font-size: 1.1rem; font-style: italic; }
.ritual-step__inline-word { margin-left: 0.35rem; color: var(--ink-muted); }
.ritual-step__inner { margin: 0.5rem 0 0; padding-left: 1.2rem; line-height: 1.7; }
.ritual-step__performs-link { margin: 0.6rem 0 0; font-size: var(--type-small); }
.ritual-step__how { margin: 0.6rem 0 0; font-size: var(--type-small); color: var(--ink-muted); max-width: 70ch; }
.ritual-step__note { margin: 0.6rem 0 0; font-size: var(--type-small); line-height: 1.6; color: var(--ink-muted); max-width: 70ch; }
.ritual-step__claim, .ritual-step__performs { margin-top: 0.6rem; }

.ritual-quote { margin: 0.75rem 0 0; max-width: 70ch; }
.ritual-quote__text { margin: 0; padding: 0.55rem 0.9rem; border-left: 3px solid var(--rule); background: var(--ground-lift); }
.ritual-quote__text p { margin: 0; line-height: 1.6; }
.ritual-quote--contradicts .ritual-quote__text { border-left-color: var(--ink-faint); }
.ritual-quote__notes { margin: 0.4rem 0 0; font-size: var(--type-small); line-height: 1.6; color: var(--ink-muted); }
.ritual-quote__source { display: flex; flex-wrap: wrap; gap: 0.3rem 0.6rem; align-items: baseline; margin-top: 0.35rem; font-size: var(--type-label); color: var(--ink-faint); }
.ritual-quote__rights { font-style: italic; }

.ritual-names { display: grid; gap: 1rem; margin-top: 1rem; }
@media (min-width: 900px) { .ritual-names { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ritual-name { padding: 1rem 1.1rem; border: 1px solid var(--rule); background: var(--ground); scroll-margin-top: 1rem; }
.ritual-name__head { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; }
.ritual-name__name { margin: 0; font-size: 1.2rem; }
.ritual-name__translit { margin: 0.15rem 0 0; font-size: 0.82rem; color: var(--ink-faint); }
.ritual-name__hebrew { font-size: 1.9rem; line-height: 1.1; }
.ritual-name__gloss { margin: 0.5rem 0 0; font-size: 0.95rem; }
.ritual-name__summary { margin: 0.4rem 0 0; font-size: var(--type-small); line-height: 1.6; color: var(--ink-muted); }
.ritual-name__link, .ritual-name__spoken-in { margin: 0.5rem 0 0; font-size: 0.82rem; }
.ritual-name__sources { margin-top: 0.6rem; }
.ritual-name__claim + .ritual-name__claim { margin-top: 1rem; }
.ritual-name__claim-title { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: baseline; margin: 0; font-size: var(--type-small); font-weight: 500; }
.ritual-name__claim-notes { margin: 0.3rem 0 0; font-size: var(--type-small); line-height: 1.6; color: var(--ink-muted); }

.ritual-dispute { margin: 1.25rem 0 0; padding: 1rem 1.1rem 1.1rem; border: 1px solid var(--rule); background: var(--ground); scroll-margin-top: 1rem; }
.ritual-dispute__head { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; }
.ritual-dispute__question { margin: 0; font-size: 1.05rem; }
.ritual-dispute__stake { margin: 0.5rem 0 0; max-width: 72ch; line-height: 1.6; color: var(--ink-muted); }
.ritual-dispute__witnesses { list-style: none; margin: 0.5rem 0 0; padding: 0; }
.ritual-dispute__witness { padding: 0.35rem 0 0.5rem; border-top: 1px dashed var(--rule); }
.ritual-dispute__witness:first-child { border-top: 0; }

.ritual-history { margin: 1rem 0 0; }
.ritual-history__title { margin: 0; font-size: 1rem; }
.ritual-history__notes { margin: 0.35rem 0 0; max-width: 72ch; line-height: 1.6; color: var(--ink-muted); }
.spirits__aside { color: var(--ink-faint); }

/* --- Hebrew gematria --------------------------------------------------- */

.gematria { max-width: 54rem; }
.gematria__calculator,
.gematria__result,
.gematria__candidates,
.gematria__matches,
.gematria__about,
.gematria__history { margin-top: 2.5rem; }

.section-index__kicker .icon { margin-right: 0.25rem; vertical-align: -0.18em; }
.gematria__definition {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1rem;
  max-width: 48rem;
  margin-top: 1.75rem;
  padding: 1.1rem 1.2rem;
  border: 1px solid var(--rule);
  background: var(--ground-lift);
}
.gematria__definition-icon { color: var(--ink-muted); }
.gematria__definition h2 { margin: 0; font-size: 1.05rem; font-weight: 400; }
.gematria__definition p {
  margin: 0.45rem 0 0;
  color: var(--ink-muted);
  font-size: var(--type-small);
  line-height: 1.65;
}

.gematria__form {
  display: flex;
  gap: 0.75rem;
  align-items: end;
  max-width: 42rem;
}
.gematria__field { flex: 1 1 18rem; }
.gematria__label { display: block; margin-bottom: 0.35rem; font-size: var(--type-small); }
.gematria__input {
  box-sizing: border-box;
  width: 100%;
  min-height: 2.8rem;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--rule);
  background: var(--ground-lift);
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
}
.gematria__input:focus-visible,
.gematria__submit:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.gematria__submit {
  min-height: 2.8rem;
  padding: 0.6rem 0.9rem;
  border: 1px solid var(--ink-faint);
  background: var(--ink);
  color: var(--ground);
  font: inherit;
  cursor: pointer;
}
.gematria__privacy,
.gematria__method-note,
.gematria__sources {
  max-width: 68ch;
  color: var(--ink-faint);
  font-size: 0.8rem;
  line-height: 1.6;
}
.gematria__privacy { margin: 0.6rem 0 0; }
.gematria__error {
  margin: 1.5rem 0 0;
  padding: 0.75rem 0.9rem;
  border-left: 3px solid var(--ink);
  background: var(--ground-lift);
}

.gematria__result {
  padding: 1.25rem;
  border: 1px solid var(--rule);
}
.gematria__result-heading {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 1.5rem;
}
.gematria__eyebrow {
  margin: 0;
  color: var(--ink-faint);
  font-size: var(--type-label);
  font-variant: small-caps;
  letter-spacing: 0.07em;
}
.gematria__hebrew {
  margin: 0.2rem 0 0;
  font-family: var(--hebrew);
  font-size: clamp(2.3rem, 7vw, 4rem);
  font-weight: 400;
  line-height: 1.2;
}
.gematria__transliteration { margin: 0.15rem 0 0; color: var(--ink-muted); }
.gematria__total { flex: none; margin: 0; text-align: right; }
.gematria__total span { display: block; color: var(--ink-faint); font-size: var(--type-label); }
.gematria__total strong {
  display: block;
  font-size: 2.5rem;
  font-weight: 400;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.gematria__sense { margin: 0.9rem 0 0; color: var(--ink-muted); }
.gematria__equation {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem;
  margin: 1.3rem 0 0;
  padding: 0.9rem 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.gematria__equation span {
  display: inline-grid;
  justify-items: center;
  min-width: 1.7rem;
}
.gematria__equation i { font-family: var(--hebrew); font-size: 1.6rem; font-style: normal; line-height: 1; }
.gematria__equation small { color: var(--ink-faint); font-family: var(--serif); font-size: var(--type-label); }
.gematria__equation b { color: var(--ink-faint); font-weight: 400; }
.gematria__equation strong { font-size: 1.35rem; font-weight: 400; font-variant-numeric: tabular-nums; }
.gematria__method-note { margin: 0.9rem 0 0; }

.gematria__intro { max-width: 66ch; color: var(--ink-muted); line-height: 1.65; }
.gematria__candidates ul,
.gematria__match-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 1px;
  margin: 1rem 0 0;
  padding: 1px;
  list-style: none;
  background: var(--rule);
}
.gematria__candidates li,
.gematria__match-list li { min-width: 0; background: var(--ground); }
.gematria__candidates a,
.gematria__match-list a {
  box-sizing: border-box;
  display: grid;
  min-height: 100%;
  padding: 0.9rem;
  color: var(--ink);
  text-decoration: none;
}
.gematria__candidates a:hover,
.gematria__candidates a:focus-visible,
.gematria__match-list a:hover,
.gematria__match-list a:focus-visible { background: var(--ground-lift); }
.gematria__candidate--active a { box-shadow: inset 3px 0 0 var(--ink); }
.gematria__candidates a { grid-template-columns: minmax(0, 1fr) auto; gap: 0.25rem 0.75rem; }
.gematria__candidate-word,
.gematria__match-word { font-family: var(--hebrew); font-size: 1.55rem; line-height: 1.35; }
.gematria__candidate-value {
  align-self: center;
  color: var(--ink-faint);
  font-size: 1.1rem;
  font-variant-numeric: tabular-nums;
}
.gematria__candidate-sense,
.gematria__match-meaning { margin-top: 0.45rem; color: var(--ink-muted); font-size: var(--type-small); line-height: 1.5; }
.gematria__candidate-sense { grid-column: 1 / -1; }
.gematria__match-transliteration { color: var(--ink-muted); font-size: 0.8rem; }
.gematria__match-source { margin-top: 0.55rem; color: var(--ink-faint); font-size: var(--type-label); }
.gematria__sources { margin: 1.5rem 0 0; }
.gematria__about p { max-width: 68ch; line-height: 1.7; }

.gematria__history-intro {
  max-width: 70ch;
  margin: 0;
  color: var(--ink-muted);
  line-height: 1.7;
}
.gematria__history-list {
  display: grid;
  gap: 1px;
  margin: 1.4rem 0 0;
  padding: 1px;
  list-style: none;
  background: var(--rule);
}
.gematria__history-list li {
  min-width: 0;
  padding: 1.15rem;
  background: var(--ground);
}
.gematria__history-date {
  margin: 0;
  color: var(--ink-faint);
  font-size: var(--type-label);
  font-variant: small-caps;
  letter-spacing: 0.06em;
}
.gematria__history-list h3 { margin: 0.3rem 0 0; font-size: 1.08rem; font-weight: 400; }
.gematria__history-list h3 + p {
  margin: 0.6rem 0 0;
  color: var(--ink-muted);
  font-size: var(--type-small);
  line-height: 1.7;
}
.gematria__history-list a { font-size: 0.8rem; }
.gematria__history-list h3 + p + a,
.gematria__history-links { display: block; margin-top: 0.8rem; }
.gematria__history-links { display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; }

@media (min-width: 760px) {
  .gematria__history-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .gematria__form { align-items: stretch; flex-direction: column; }
  .gematria__field { flex-basis: auto; }
  .gematria__submit { width: 100%; }
  .gematria__result-heading { align-items: end; }
  .gematria__definition { grid-template-columns: 1fr; }
}

/* --- source books ---------------------------------------------------------
   The books themselves. One GET form over one list; the tiers are badges with
   their words on them, so neither tier is ever carried by colour alone. */

.source-books__prose { max-width: 68ch; line-height: 1.7; color: var(--ink-muted); }
.source-books__definitions { margin: 1rem 0; }
.source-books__definitions > div {
  display: grid;
  grid-template-columns: 7.5rem 1fr;
  gap: 0.9rem;
  padding: 0.6rem 0;
  border-top: 1px solid var(--rule);
}
.source-books__definitions dt { margin: 0; }
.source-books__definitions dd { margin: 0; max-width: 62ch; line-height: 1.6; color: var(--ink-muted); }
.source-books__count { color: var(--ink-faint); }

.source-badge { white-space: nowrap; }
.source-badge--primary,
.source-badge--landmark { border-color: var(--history-event); color: var(--ink); }
.source-badge--unmeasured { border-style: dashed; }
a.source-badge { text-decoration: none; }

.book-filters {
  position: relative;
  margin: 1.5rem 0 0;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--rule);
  background: var(--ground-lift);
}
.book-filters__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 1rem;
}
.book-filters__trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.8rem;
  border: 1px solid var(--ink-faint);
  background: var(--ground);
  color: var(--ink);
  font: inherit;
  font-size: var(--type-small);
  cursor: pointer;
}
.book-filters__trigger:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.book-filters__badge {
  padding: 0 0.4rem;
  border: 1px solid var(--history-event);
  color: var(--ink);
  font-size: var(--type-label);
}
.book-filters__search { display: flex; align-items: baseline; gap: 0.5rem; }
.book-filters__label--inline { margin: 0; }
.book-filters__search .book-filters__input { width: 16rem; max-width: 100%; padding: 0.35rem 0.6rem; }
.book-filters__active { min-width: 0; margin: 0; color: var(--ink-muted); font-size: var(--type-small); }
.book-filters__clear { margin-left: auto; font-size: var(--type-small); }
/* The popout only becomes one once the script has taken over. With no
   JavaScript the panel is open and in the flow, where it cannot cover the
   books it filters. */
.book-filters__panel { padding: 0.9rem 0 0.2rem; }
.book-filters[data-source-books-ready] .book-filters__panel {
  position: absolute;
  z-index: 20;
  top: calc(100% + 0.4rem);
  right: -1px;
  left: -1px;
  max-height: 70vh;
  overflow-y: auto;
  padding: 1rem 1.1rem 1.1rem;
  border: 1px solid var(--ink-faint);
  background: var(--ground);
  box-shadow: 0 12px 32px var(--shadow-strong);
}
@media (max-width: 600px) {
  .book-filters[data-source-books-ready] .book-filters__panel {
    position: fixed;
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    max-height: 80vh;
  }
}
.book-filters__label {
  display: block;
  margin: 0 0 0.35rem;
  padding: 0;
  color: var(--ink-faint);
  font-size: var(--type-label);
  font-variant: small-caps;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.book-filters__input {
  box-sizing: border-box;
  width: 100%;
  max-width: 34rem;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--rule);
  background: var(--ground);
  color: var(--ink);
  font: inherit;
}
.book-filters__input:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.book-filters__traditions { min-width: 0; margin: 0.9rem 0 0; padding: 0; border: 0; }
.book-filters__chosen { color: var(--ink-muted); font-size: var(--type-small); }
.book-filters__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 0.15rem 1.25rem;
  margin: 0.6rem 0 0;
  padding: 0;
  border: 0;
}
.book-filters__row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1rem 2rem;
  margin: 1rem 0 0;
}
.book-filters__group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0.9rem;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.book-filters__group > legend { float: left; width: 100%; }
.book-filters__check,
.book-filters__option {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.25rem 0;
  color: var(--ink-muted);
  font-size: var(--type-small);
  cursor: pointer;
}
.book-filters__check input,
.book-filters__option input { accent-color: var(--history-event); margin: 0; }
.book-filters__check:has(input:checked),
.book-filters__option:has(input:checked) { color: var(--ink); }
/* A current choice is marked by the house underline, never by fill alone. */
.book-filters__option:has(input:checked) > span { box-shadow: inset 0 -2px 0 var(--history-event); }
.book-filters__total { color: var(--ink-faint); font-size: var(--type-label); }
.book-filters__actions { display: flex; align-items: center; gap: 1rem; margin-left: auto; }
.book-filters__apply {
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--ink-faint);
  background: var(--ground);
  color: var(--ink);
  font: inherit;
  font-size: var(--type-small);
  cursor: pointer;
}
.book-filters__apply:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.book-filters__clear { font-size: var(--type-small); }

.book-results__count { margin: 1.4rem 0 0.2rem; color: var(--ink-muted); font-size: var(--type-small); }
.book-results__empty { margin: 1.5rem 0; color: var(--ink-muted); }
.book-group__heading {
  margin: 2rem 0 0.2rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--rule);
  font-size: 1.15rem;
  font-weight: 400;
}
.book-group__count { color: var(--ink-faint); font-size: 0.8rem; }
.book-list { list-style: none; margin: 0; padding: 0; }
.book-row {
  display: grid;
  grid-template-columns: minmax(7rem, 11rem) 1fr;
  gap: 1rem;
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--rule);
}

/* Narrow, the row is still two columns and three children, so the meta block
   has to be told to stay under the BODY — left to itself it wrapped onto a new
   row beneath the date, in the column the year lives in. */
.book-row__meta { grid-column: 2; }

/* THE WIDTH IS THE DENSITY, NOT THE TYPE SIZE. A screen this wide was showing
   a 68ch blurb and 470px of nothing beside it, while the badges and the
   reading link went underneath and made the row 155px tall. They move into a
   third column here, which is the same information on half the page. */
@media (min-width: 1100px) {
  .book-row {
    grid-template-columns: minmax(6rem, 9rem) minmax(0, 1fr) minmax(13rem, 17rem);
    align-items: start;
  }
  .book-row__meta { grid-column: 3; padding-top: 0.15rem; }
  .book-row__tiers { margin-top: 0; }
}
/* Most of these are a year, but a good many are a clause — "Final redaction
   5th–6th century CE; Byzantine…" — so this column is prose and takes the
   sentence floor. */
.book-row__date { margin: 0; padding-top: 0.2rem; color: var(--ink-faint); font-size: var(--type-small); line-height: 1.4; }
.book-row__body { min-width: 0; }
.book-row__title { margin: 0; font-size: 1.02rem; font-weight: 400; }
.book-row__author { margin: 0.1rem 0 0; color: var(--ink-muted); font-size: var(--type-small); }
.book-row__blurb { max-width: 68ch; margin: 0.35rem 0 0; color: var(--ink-faint); font-size: var(--type-small); line-height: 1.55; }
.book-row__tiers {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
  margin: 0.4rem 0 0;
  font-size: var(--type-label);
}
.book-row__also { color: var(--ink-faint); }
.book-row__read { margin: 0.35rem 0 0; font-size: var(--type-small); }
.book-row__more { margin-left: 0.4rem; color: var(--ink-faint); }
.book-row__none { color: var(--ink-faint); font-style: italic; }

.book-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.6rem 1.2rem;
  margin: 1.6rem 0 0;
  font-size: var(--type-small);
}
.book-pager__step {
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--rule);
  text-decoration: none;
}
.book-pager__step:hover { border-color: var(--ink-faint); }
.book-pager__step:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
/* Page N of M sits between the steps, so Next is not beside Previous. */
.book-pager__where { order: -1; color: var(--ink-faint); }
.book-pager__step[rel="prev"] { order: -2; }

.source-book__original { margin: 0.3rem 0 0; color: var(--ink-muted); font-family: var(--serif); font-style: italic; }
.source-book__byline { margin: 0.4rem 0 0; color: var(--ink-muted); }
.source-book__facts { margin: 0; }
.source-book__facts > div {
  display: grid;
  grid-template-columns: 9rem 1fr;
  gap: 0.9rem;
  padding: 0.55rem 0;
  border-top: 1px solid var(--rule);
}
.source-book__facts > div:first-child { border-top: 0; }
.source-book__facts dt { color: var(--ink-faint); font-size: 0.8rem; }
.source-book__facts dd { margin: 0; line-height: 1.6; color: var(--ink-muted); }
.source-book__tradition {
  display: inline-block;
  margin: 0 0.35rem 0.35rem 0;
  padding: 0.1rem 0.5rem;
  border: 1px solid var(--rule);
  font-size: 0.82rem;
  text-decoration: none;
}
.source-book__editions { list-style: none; margin: 0; padding: 0; }
.source-book__editions li { padding: 0.5rem 0; border-top: 1px solid var(--rule); line-height: 1.5; }
.source-book__editions li:first-child { border-top: 0; }
.source-book__host { margin-left: 0.5rem; color: var(--ink-faint); font-size: 0.8rem; }
.source-book__checked { display: block; color: var(--ink-faint); font-size: var(--type-label); }
.source-book__extract {
  margin: 0;
  padding-left: 1rem;
  border-left: 2px solid var(--rule);
  color: var(--ink-muted);
  line-height: 1.7;
  max-width: 68ch;
}
.source-book__extract p { margin: 0; }
.source-book__attribution { margin: 0.7rem 0 0; color: var(--ink-faint); font-size: var(--type-label); line-height: 1.6; }

@media (max-width: 600px) {
  .book-row { grid-template-columns: 1fr; gap: 0.15rem; }
  .book-filters__actions { margin-left: 0; }
  .source-books__definitions > div,
  .source-book__facts > div { grid-template-columns: 1fr; gap: 0.25rem; }
}

/* --- Enochian -------------------------------------------------------------- */
.enochian__prose { max-width: 68ch; margin: 0.9rem 0 0; color: var(--ink-muted); line-height: 1.7; }
.enochian__credit { max-width: 68ch; margin: 1rem 0 0; color: var(--ink-faint); font-size: var(--type-small); line-height: 1.6; }
.enochian__ocr { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--ink-faint); }
.table-scroll { overflow-x: auto; }

/* The letterforms are black paths on NOTHING, exactly like the Goetia seals.
   So the ink is inverted and the ground goes on the frame around it: a CSS
   filter applies to an element's own background too, and invert(1) on a panel
   would turn it into a near-white block behind the letter. Frame unfiltered,
   image inverted, and box-sizing because padding meets a border here. */
.enochian-write__script {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  box-sizing: border-box;
  min-height: 4.5rem;
  margin: 1rem 0 0;
  padding: 0.9rem 1rem;
  border: 1px solid var(--rule);
  background: var(--seal-ground);
}
.enochian-write__letter { display: inline-flex; width: 2rem; height: 2rem; }
.enochian-write__letter img { width: 100%; height: 100%; filter: invert(1); }
/* A letter Dee's alphabet cannot write is drawn as an empty slot with the
   English letter in it, never as something that looks like a letterform. */
.enochian-write__gap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: 1px dashed var(--ink-faint);
  color: var(--ink-faint);
  font-size: var(--type-small);
}
.enochian-write__break { display: inline-block; width: 0.5rem; }

.enochian-write { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.6rem 1rem; margin: 1.2rem 0 0; }
.enochian-write__label {
  display: block;
  width: 100%;
  margin: 0 0 0.35rem;
  color: var(--ink-faint);
  font-size: var(--type-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.enochian-write__input {
  box-sizing: border-box;
  width: min(24rem, 100%);
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--rule);
  background: var(--ground);
  color: var(--ink);
  font: inherit;
}
.enochian-write__input:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.enochian-write__submit {
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--ink-faint);
  background: var(--ground);
  color: var(--ink);
  font: inherit;
  font-size: var(--type-small);
  cursor: pointer;
}
.enochian-write__submit:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.enochian-write__note { max-width: 68ch; margin: 0.6rem 0 0; color: var(--ink-faint); font-size: var(--type-small); line-height: 1.6; }

.enochian-letters { width: 100%; border-collapse: collapse; font-size: var(--type-small); }
.enochian-letters th,
.enochian-letters td { padding: 0.5rem 0.7rem; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: middle; }
.enochian-letters thead th {
  color: var(--ink-faint);
  font-size: var(--type-label);
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.enochian-letters tbody th { font-weight: 400; white-space: nowrap; }
.enochian-letters__form { width: 3.4rem; background: var(--seal-ground); }
.enochian-letters__form img { display: block; width: 2rem; height: 2rem; margin: 0 auto; filter: invert(1); }
.enochian-letters__sound { color: var(--ink-muted); font-size: var(--type-small); }

.enochian-words { display: grid; gap: 1.2rem; margin: 1.5rem 0 0; padding: 0; list-style: none; }
.enochian-word { padding-bottom: 1.1rem; border-bottom: 1px solid var(--rule); }
.enochian-word__script {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  box-sizing: border-box;
  width: max-content;
  max-width: 100%;
  margin: 0 0 0.6rem;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--rule);
  background: var(--seal-ground);
}
.enochian-word__letter { display: inline-flex; width: 1.5rem; height: 1.5rem; }
.enochian-word__letter img { width: 100%; height: 100%; filter: invert(1); }

/* THE SEALS AND THE LETTERFORMS ARE NOT INVERTED IN THE LIGHT THEME, AND THAT
   IS THE WHOLE OF THE FIX.
   Every one of them is potrace output — black paths on nothing at all — so on a
   near-black ground they have to be turned inside out or they are an invisible
   scribble, and the plate behind them has to be near-black for the white ink to
   land on. On cream, both halves of that reverse: the artwork is already black
   ink and the page is already paper, so the honest rendering is simply the file
   as it is. `--seal-ground` turns the plate to paper and these rules take the
   filter off.
   This could not be done by redefining a colour, which is why it is the one
   place the light theme owns a rule of its own rather than a value. Getting it
   wrong is not subtle: `.spirit__sigil` has no plate behind it at all — it sits
   straight on the page ground in the spirit list — so a light theme that kept
   the invert would have shown seventy-two white sigils on cream, which is to
   say nothing at all, on the one page where a seal is the content. */
:root[data-theme="light"] .spirit__sigil,
:root[data-theme="light"] .spirit-page__seal-image,
:root[data-theme="light"] .enochian-write__letter img,
:root[data-theme="light"] .enochian-letters__form img,
:root[data-theme="light"] .enochian-word__letter img {
  filter: none;
}
.enochian-word__head { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem; }
.enochian-word__word { font-size: 1.05rem; font-weight: 400; }
.enochian-word__gloss { color: var(--ink-muted); }
.enochian-word__locator { margin: 0.2rem 0 0; color: var(--ink-faint); font-size: 0.8rem; }
.enochian-word__note { max-width: 68ch; margin: 0.4rem 0 0; color: var(--ink-muted); font-size: var(--type-small); line-height: 1.6; }

/* The plates are paper and printer's ink, so they are NOT inverted: a scan
   with its tone flipped stops looking like the page it came from. */
.figure-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: 1.6rem;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}
.figure-gallery__link { display: block; text-decoration: none; }
.figure-gallery__frame { display: block; border: 1px solid var(--rule); background: var(--ground-lift); }
.figure-gallery__frame img { display: block; width: 100%; height: auto; }
.figure-gallery__name { display: block; margin: 0.5rem 0 0; color: var(--ink); }
.figure-gallery__summary { max-width: 52ch; margin: 0.35rem 0 0; color: var(--ink-muted); font-size: var(--type-small); line-height: 1.6; }
.figure-gallery__source { margin: 0.35rem 0 0; color: var(--ink-faint); font-size: var(--type-label); }

.figure-page__figure { margin: 1.5rem 0 0; }
.figure-page__frame { display: block; border: 1px solid var(--rule); background: var(--ground-lift); }
.figure-page__image { display: block; width: 100%; height: auto; }
.figure-page__caption { margin: 0.6rem 0 0; color: var(--ink-faint); font-size: var(--type-small); line-height: 1.6; }
.figure-page__others { margin: 2rem 0 0; }
.figure-page__others-heading { margin: 0 0 0.5rem; color: var(--ink-faint); font-size: var(--type-label); font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; }
.figure-page__others ul { display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem; margin: 0; padding: 0; list-style: none; }

.enochian__subheading { margin: 1.6rem 0 0.5rem; font-size: 1rem; font-weight: 400; color: var(--ink); }
.enochian-editions { margin: 0.6rem 0 0; padding: 0; list-style: none; display: grid; gap: 0.9rem; }
.enochian-editions > li { max-width: 68ch; color: var(--ink-muted); font-size: var(--type-small); line-height: 1.6; }
.enochian-editions__year { color: var(--ink-faint); }
.enochian-editions__restricted { color: var(--ink-faint); font-style: italic; }
.enochian-editions__note { margin: 0.25rem 0 0; color: var(--ink-faint); font-size: var(--type-small); }

.enochian-claims { margin: 1.2rem 0 0; padding: 0; list-style: none; display: grid; gap: 1.4rem; }
.enochian-claim { padding-bottom: 1.2rem; border-bottom: 1px solid var(--rule); }
.enochian-claim__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem; margin: 0; }
.enochian-claim__subject { color: var(--ink-faint); font-size: var(--type-small); }
.enochian-claim__notes { max-width: 68ch; margin: 0.4rem 0 0; color: var(--ink-muted); font-size: var(--type-small); line-height: 1.6; }
.enochian-claim__citations { margin: 0.7rem 0 0; }
.enochian-word__citations { margin: 0.6rem 0 0; }

/* The Watchtower camp, drawn from the transcription. Ink is currentColor so
   the figure follows the page rather than carrying a palette of its own. */
.watchtower { margin: 1.2rem 0 0; }
.watchtower__svg { display: block; width: 100%; max-width: 34rem; height: auto; color: var(--ink); }
.watchtower__circle { fill: none; stroke: var(--rule); stroke-width: 1.2; }
.watchtower__road { fill: var(--ground-lift); stroke: var(--ink-faint); stroke-width: 1; }
.watchtower__tally { fill: currentColor; }
.watchtower__crosses path { stroke: currentColor; stroke-width: 1.6; fill: none; }
.watchtower__tower { fill: none; stroke: currentColor; stroke-width: 1.2; }
.watchtower__merlon { fill: currentColor; }
.watchtower__ring line { stroke: currentColor; stroke-width: 1.4; }
.watchtower__label { fill: var(--ink-muted); font-size: 13px; font-family: var(--serif, serif); }
.watchtower__caption { max-width: 60ch; margin: 0.6rem 0 0; color: var(--ink-faint); font-size: 0.82rem; line-height: 1.6; }
.watchtower__legend { display: grid; gap: 1rem; margin: 1.4rem 0 0; }
.watchtower__legend > div { padding-bottom: 0.9rem; border-bottom: 1px solid var(--rule); }
.watchtower__legend dt { margin: 0 0 0.3rem; color: var(--ink); }
.watchtower__legend dd { margin: 0; display: grid; gap: 0.2rem; }
.watchtower__english { color: var(--ink-faint); font-size: var(--type-small); }
.watchtower__establishment { color: var(--ink-muted); font-size: var(--type-small); }
.watchtower__cloth { color: var(--ink-muted); font-size: var(--type-small); font-style: italic; }
.watchtower__uncertain { color: var(--ink-faint); font-size: 0.8rem; font-style: normal; }
.watchtower__dispositors { color: var(--ink-faint); font-size: 0.8rem; }
.watchtower__centre { max-width: 60ch; margin: 1rem 0 0; color: var(--ink-muted); font-family: var(--serif, serif); font-style: italic; }

/* --- Geomancy -------------------------------------------------------------- */
.geomancy-overview__hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 21.25rem);
  gap: 2rem;
  align-items: start;
  margin-top: 0.75rem;
}
.geomancy-overview__hero .section-index__introduction { max-width: none; }
.geomancy-overview__hero .section-index__lede:first-child { margin-top: 0; }
.geo-overview-diagram {
  margin: 0;
  padding: 0.7rem;
  border: 1px solid var(--rule);
  border-top-color: var(--accent);
  border-radius: 0.7rem;
  background: var(--ground-lift);
  color: var(--ink);
}
.geo-overview-diagram svg { display: block; width: 100%; height: auto; }
.geo-overview-diagram__panel rect { fill: var(--ground); stroke: var(--rule); }
.geo-overview-diagram__heading,
.geo-overview-diagram__label,
.geo-overview-diagram__tier-label,
.geo-overview-diagram__figure-name { font-family: var(--serif); }
.geo-overview-diagram__heading { fill: var(--ink); font-size: 12px; letter-spacing: 0.03em; }
.geo-overview-diagram__label { fill: var(--ink-muted); font-size: 10px; }
.geo-overview-diagram__tier-label { fill: var(--ink-faint); font-size: 9px; }
.geo-overview-diagram__figure-name { fill: var(--ink); font-size: 18px; }
.geo-overview-diagram__raw circle { fill: var(--ink-faint); }
.geo-overview-diagram__result circle,
.geo-overview-diagram__figure circle,
.geo-overview-diagram__nodes circle { fill: var(--ink); }
.geo-overview-diagram__nodes .geo-overview-diagram__node--cast,
.geo-overview-diagram__nodes .geo-overview-diagram__node--judge { fill: var(--accent); }
.geo-overview-diagram__arrow,
.geo-overview-diagram__rule,
.geo-overview-diagram__connections path {
  fill: none;
  stroke: var(--ink-faint);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.geo-overview-diagram__rule { stroke-dasharray: 2 3; }
.geo-overview-diagram figcaption {
  margin: 0.55rem 0.25rem 0.1rem;
  color: var(--ink-faint);
  font-size: var(--type-label);
  line-height: 1.5;
}
@media (max-width: 760px) {
  .geomancy-overview__hero { grid-template-columns: 1fr; }
  .geo-overview-diagram { width: min(100%, 21.25rem); box-sizing: border-box; }
}
.geomancy__prose { max-width: 68ch; margin: 0.9rem 0 0; color: var(--ink-muted); line-height: 1.7; }
.geomancy__unreadable { max-width: 68ch; margin: 1.2rem 0 0; padding: 0.8rem 1rem; border: 1px solid var(--rule); color: var(--ink-muted); }
/* The dots are the data; they take the page's ink rather than a colour. */
.geo-figure { display: block; }
.geo-figure circle { fill: currentColor; }

.geo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: 1.4rem; margin: 1.4rem 0 0; padding: 0; list-style: none; }
.geo-grid__item { text-align: center; }
.geo-grid__item a { display: grid; justify-items: center; gap: 0.4rem; text-decoration: none; color: var(--ink); }
.geo-grid__name { font-size: var(--type-small); }
.geo-grid__planet { display: block; margin: 0.2rem 0 0; color: var(--ink-faint); font-size: var(--type-label); }

.geo-figure-chooser {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.9rem;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}
.geo-figure-chooser__item { min-width: 0; }
.geo-figure-chooser__link {
  display: flex;
  box-sizing: border-box;
  aspect-ratio: 1;
  min-height: 13rem;
  padding: 1rem;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--rule);
  background: var(--ground-lift);
  color: var(--ink);
  text-align: center;
  text-decoration: none;
  transition: border-color 140ms ease, background-color 140ms ease, transform 140ms ease;
}
.geo-figure-chooser__link:hover,
.geo-figure-chooser__link:focus-visible {
  border-color: var(--accent);
  background: var(--surface-hover);
  outline: 1px solid var(--accent);
  outline-offset: -1px;
  transform: translateY(-2px);
}
.geo-figure-chooser__name { margin-top: 0.7rem; font-family: var(--serif); font-size: 1rem; line-height: 1.25; }
.geo-figure-chooser__planet { margin-top: 0.4rem; color: var(--accent); font-size: var(--type-label); }
.geo-figure-chooser__facts { margin-top: 0.25rem; color: var(--ink-faint); font-size: var(--type-label); line-height: 1.35; }

@media (max-width: 860px) {
  .geo-figure-chooser { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 580px) {
  .geo-figure-chooser { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.65rem; }
  .geo-figure-chooser__link { min-height: 10.5rem; padding: 0.65rem; }
  .geo-figure-chooser__link .geo-figure { width: 3.6rem; height: 3.6rem; }
  .geo-figure-chooser__name { margin-top: 0.45rem; font-size: var(--type-small); }
  .geo-figure-chooser__planet { font-size: var(--type-label); }
  .geo-figure-chooser__facts { font-size: var(--type-label); }
}
@media (prefers-reduced-motion: reduce) {
  .geo-figure-chooser__link { transition: none; }
  .geo-figure-chooser__link:hover,
  .geo-figure-chooser__link:focus-visible { transform: none; }
}

.geo-table { width: 100%; border-collapse: collapse; font-size: var(--type-small); }
.geo-table th, .geo-table td { padding: 0.55rem 0.7rem; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: middle; }
.geo-table thead th { color: var(--ink-faint); font-size: var(--type-label); font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; }
.geo-table tbody th { font-weight: 400; }
.geo-table__figure { width: 3.2rem; }
.geo-table__lines { color: var(--ink-muted); letter-spacing: 0.15em; }
.geo-table__even { color: var(--ink-faint); font-size: var(--type-label); }

.geo-detail { display: flex; flex-wrap: wrap; gap: 1.6rem 2.4rem; align-items: flex-start; margin: 1.4rem 0 0; }
.geo-detail__printed { color: var(--ink-faint); font-size: 0.8rem; }
.geo-detail__planet-symbol {
  display: inline-block;
  min-width: 1em;
  color: var(--accent);
  font-family: var(--symbol-font);
  font-size: 1.05em;
  line-height: 1;
  text-align: center;
  vertical-align: -0.06em;
}
.geo-detail .facts { flex: 1 1 32rem; align-items: flex-start; }
.geo-detail .facts > div { min-width: 8rem; margin-bottom: 0.75rem; }
.geo-detail .facts dt { color: var(--ink-faint); font-size: var(--type-label); font-variant: small-caps; letter-spacing: 0.07em; }
.geo-detail .facts dd { margin: 0.25rem 0 0; max-width: 38rem; line-height: 1.5; }
.geo-line-fact { flex: 1 1 100%; }
.geo-line-table {
  width: min(100%, 26rem);
  border-collapse: collapse;
  table-layout: fixed;
  text-align: center;
}
.geo-line-table th {
  padding: 0.3rem 0.55rem;
  border: 1px solid var(--rule);
  color: var(--ink-faint);
  font-size: var(--type-label);
  font-weight: 400;
  letter-spacing: 0.04em;
}
.geo-line-table td {
  height: 2.2rem;
  padding: 0.2rem 0.55rem;
  border: 1px solid var(--rule);
  background: var(--ground-lift);
  color: var(--ink);
  font-size: 1.05rem;
  letter-spacing: 0.16em;
}
.geo-house-topics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1rem;
  margin-top: 1.2rem;
}
.geo-house-topic { padding: 1rem; border: 1px solid var(--rule); background: var(--ground-lift); }
.geo-house-topic h3 { margin: 0; font-size: 1rem; font-weight: 500; }
.geo-house-topic h3 a { text-decoration: none; }
.geo-house-topic h3 span { display: inline-grid; width: 1.7rem; height: 1.7rem; margin-right: 0.3rem; place-items: center; border: 1px solid var(--rule); color: var(--accent); font-size: var(--type-label); }
.geo-house-topic blockquote { margin: 0.8rem 0 0; color: var(--ink-muted); font-family: var(--serif); font-size: var(--type-small); line-height: 1.65; }
.geo-house-topic__source { margin: 0.65rem 0 0; color: var(--ink-faint); font-size: var(--type-label); }
.geo-grid--meanings .geo-grid__item a { height: 100%; padding: 0.8rem 0.4rem; border: 1px solid var(--rule); }
.geo-source-notes { display: grid; grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr)); gap: 1rem 1.6rem; }
.geo-source-notes .geo-passage { max-width: none; }
.geo-attribution-table-wrap { margin-top: 1.3rem; overflow-x: auto; }
.geo-attribution-table { width: 100%; min-width: 42rem; border-collapse: collapse; }
.geo-attribution-table th, .geo-attribution-table td { padding: 0.65rem 0.8rem; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; }
.geo-attribution-table thead th { color: var(--ink-faint); font-size: var(--type-label); font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; }
.geo-attribution-table tbody th { font-weight: 500; }
.geo-attribution-table tbody tr:nth-child(even) { background: var(--history-band); }
.geo-attribution__unassigned { color: var(--ink-faint); font-style: italic; }
.geo-attribution-summary { max-width: 58rem; margin: 1.1rem 0 0; }
.geo-attribution-summary > div { display: grid; grid-template-columns: minmax(12rem, 1fr) minmax(12rem, 2fr); gap: 0.7rem 1.2rem; padding: 0.55rem 0; border-bottom: 1px solid var(--rule); }
.geo-attribution-summary dt { color: var(--ink-faint); font-size: 0.8rem; }
.geo-attribution-summary dd { margin: 0; }
.geo-house-judgments { display: grid; grid-template-columns: repeat(auto-fit, minmax(21rem, 1fr)); gap: 0.8rem; margin-top: 1.2rem; }
.geo-house-judgment { border: 1px solid var(--rule); background: var(--ground-lift); }
.geo-house-judgment summary { padding: 0.8rem 1rem; cursor: pointer; font-weight: 500; }
.geo-house-judgment summary span { margin-right: 0.35rem; color: var(--accent); font-size: var(--type-label); letter-spacing: 0.04em; text-transform: uppercase; }
.geo-house-judgment blockquote { margin: 0; padding: 0 1rem 0.8rem; color: var(--ink); font-family: var(--serif); line-height: 1.7; }
.geo-house-judgment p { margin: 0; padding: 0 1rem 0.9rem; color: var(--ink-faint); font-size: var(--type-label); }
.geo-house-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 0.6rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.geo-house-links a { display: grid; padding: 0.65rem 0.8rem; border: 1px solid var(--rule); text-decoration: none; }
.geo-house-links a span { color: var(--accent); font-size: var(--type-label); letter-spacing: 0.06em; text-transform: uppercase; }
.geo-others { margin: 2rem 0 0; }
.geo-others__heading { margin: 0 0 0.5rem; color: var(--ink-faint); font-size: var(--type-label); font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; }
.geo-others ul { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; margin: 0; padding: 0; list-style: none; font-size: var(--type-small); }

.geo-cast { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.6rem 1rem; margin: 1rem 0 0; }
.geo-cast__label { display: block; width: 100%; color: var(--ink-faint); font-size: var(--type-label); letter-spacing: 0.1em; text-transform: uppercase; }
.geo-cast__label span { text-transform: none; letter-spacing: 0; font-style: italic; }
.geo-cast__input { box-sizing: border-box; width: min(28rem, 100%); padding: 0.5rem 0.7rem; border: 1px solid var(--rule); background: var(--ground); color: var(--ink); font: inherit; }
.geo-cast__input:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.geo-cast__submit { padding: 0.45rem 0.9rem; border: 1px solid var(--ink-faint); background: var(--ground); color: var(--ink); font: inherit; cursor: pointer; }
.geo-cast__submit:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.geo-cast__note { width: 100%; max-width: 60ch; margin: 0.5rem 0 0; color: var(--ink-faint); font-size: 0.82rem; line-height: 1.6; }
.geo-question { font-family: var(--serif, serif); font-style: italic; }

.shield { display: grid; gap: 1.6rem; margin: 1.4rem 0 0; }
.shield__label { margin: 0 0 0.5rem; color: var(--ink-faint); font-size: var(--type-label); font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; }
.shield__row { display: flex; flex-wrap: wrap; gap: 1rem 1.4rem; margin: 0; padding: 0; list-style: none; }
/* The shield is read right to left, and the first Mother is the rightmost. */
.shield__row--rtl { flex-direction: row-reverse; justify-content: flex-end; }
.shield__cell { display: grid; justify-items: center; gap: 0.25rem; min-width: 5.5rem; }
.shield__cell--cast .geo-figure { outline: 1px solid var(--history-event); outline-offset: 4px; }
.shield__cell--judge { border: 1px solid var(--rule); padding: 0.8rem 1rem; }
.shield__name { font-size: 0.82rem; color: var(--ink); text-align: center; }
.shield__role { font-size: var(--type-label); color: var(--ink-faint); text-align: center; }

/* --- the planetary squares -------------------------------------------------- */
.square { margin: 2rem 0 0; padding-bottom: 1.6rem; border-bottom: 1px solid var(--rule); }
.square__heading { margin: 0 0 0.6rem; font-size: 1.15rem; font-weight: 400; }
.square__order { color: var(--ink-faint); font-size: 0.8rem; }
.square__grid { border-collapse: collapse; font-variant-numeric: tabular-nums; }
.square__grid td { min-width: 2.4rem; padding: 0.35rem 0.5rem; border: 1px solid var(--rule); text-align: center; }
/* The sums run down the side and along the foot: the check is the point of
   the table, so it is shown rather than described. */
.square__sum { color: var(--ink-faint); border-color: transparent !important; font-size: var(--type-label); }
.square__sum--corner { color: var(--history-event); }
.square__facts { margin: 0.9rem 0 0; }
.square__formula { color: var(--ink-faint); font-size: var(--type-label); }
.square__plate-note { max-width: 68ch; margin: 0.9rem 0 0; color: var(--ink-muted); font-size: var(--type-small); line-height: 1.6; }

.planetary-magic__chooser {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.8rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}
.planetary-magic__choice { min-width: 0; }
.planetary-magic__choice-link {
  display: flex;
  box-sizing: border-box;
  aspect-ratio: 1;
  min-height: 11rem;
  padding: 1rem;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--rule);
  background: var(--ground-lift);
  color: var(--ink);
  text-align: center;
  text-decoration: none;
  transition: border-color 140ms ease, background-color 140ms ease, transform 140ms ease;
}
.planetary-magic__choice-link:hover,
.planetary-magic__choice-link:focus-visible {
  border-color: var(--accent);
  background: var(--surface-hover);
  outline: 1px solid var(--accent);
  outline-offset: -1px;
  transform: translateY(-2px);
}
.planetary-magic__choice-symbol {
  display: block;
  min-height: 3.4rem;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 3.2rem;
  line-height: 1;
}
.planetary-magic__choice-name {
  margin-top: 0.45rem;
  font-size: 1.05rem;
  font-weight: 600;
}
.planetary-magic__choice-square {
  margin-top: 0.22rem;
  color: var(--accent);
  font-size: var(--type-label);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.planetary-magic__choice-nature {
  display: -webkit-box;
  margin-top: 0.7rem;
  overflow: hidden;
  color: var(--ink-muted);
  font-size: var(--type-label);
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.planetary-angels__table-wrap { margin-top: 1rem; }
.planetary-angels__table {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
}
.planetary-angels__table th,
.planetary-angels__table td {
  padding: 0.8rem 1rem;
  border-bottom: 1px solid var(--rule);
  text-align: left;
  vertical-align: middle;
}
.planetary-angels__table thead th {
  color: var(--ink-muted);
  font-size: var(--type-label);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.planetary-angels__table tbody th { width: 34%; font-weight: 500; }
.planetary-angels__table tbody tr:nth-child(even) { background: var(--history-band); }
.planetary-angels__planet {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  text-decoration: none;
}
.planetary-angels__planet:hover span:last-child { text-decoration: underline; text-decoration-color: var(--accent); }
.planetary-angels__symbol {
  width: 1.5rem;
  color: var(--accent);
  font-family: var(--serif);
  font-size: 1.45rem;
  line-height: 1;
  text-align: center;
}
.planetary-angels__note {
  max-width: 68ch;
  margin-top: 1rem;
  padding: 0.8rem 1rem;
  border-left: 2px solid var(--accent);
  background: var(--ground-lift);
}
.planetary-angels__note .lens-page__section-intro { margin: 0; }
@media (max-width: 760px) {
  .planetary-magic__chooser { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .square__grid td { min-width: 1.8rem; padding: 0.25rem; }
}
@media (max-width: 420px) {
  .planetary-magic__chooser { gap: 0.55rem; }
  .planetary-magic__choice-link { min-height: 9.5rem; padding: 0.75rem; }
  .planetary-magic__choice-symbol { min-height: 2.9rem; font-size: 2.7rem; }
  .planetary-magic__choice-nature { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .planetary-magic__choice-link { transition: none; }
  .planetary-magic__choice-link:hover,
  .planetary-magic__choice-link:focus-visible { transform: none; }
}

/* --- geomancy: the method, and the walk through a shield --------------------- */
/* A quoted passage and this study's reading of it. The two must never look
   like one voice, so the quote is set in the serif and the gloss carries a
   small label saying whose words it is. */
.geo-passage { max-width: 70ch; margin: 1.2rem 0 0; padding: 0 0 0 1rem; border-left: 2px solid var(--rule); }
.geo-passage__quote { margin: 0; font-family: var(--serif, serif); font-size: 0.98rem; line-height: 1.7; color: var(--ink); }
.geo-passage__source { margin: 0.5rem 0 0; color: var(--ink-faint); font-size: var(--type-label); line-height: 1.5; }
.geo-passage__gloss { margin: 0.7rem 0 0; color: var(--ink-muted); font-size: var(--type-small); line-height: 1.65; }
.geo-passage__gloss-label { display: block; color: var(--ink-faint); font-size: var(--type-label); letter-spacing: 0.1em; text-transform: uppercase; }

.geomancy__prose { max-width: 70ch; margin: 1rem 0 0; color: var(--ink-muted); line-height: 1.7; }
.geomancy__prose--lead { color: var(--ink); }
.geo-subheading { margin: 1.8rem 0 0; font-size: 1rem; font-weight: 400; }

/* The contents of the manual. A list of anchors, not a menu. */
.geo-contents { margin: 1.6rem 0 0; padding: 0.9rem 1.1rem; border: 1px solid var(--rule); }
.geo-contents ol { display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; margin: 0; padding: 0 0 0 1.1rem; font-size: var(--type-small); }

/* The six moves, on the overview. */
.geo-moves { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1.2rem 1.8rem; margin: 1.2rem 0 0; padding: 0 0 0 1.2rem; }
.geo-moves h3 { margin: 0 0 0.3rem; font-size: 0.95rem; font-weight: 400; }
.geo-moves p { margin: 0; max-width: 46ch; color: var(--ink-muted); font-size: var(--type-small); line-height: 1.6; }

/* Rows of points becoming one figure. The counts are an illustration and the
   caption says so, so the caption comes FIRST rather than under the picture. */
.geo-rows { margin: 1.4rem 0 0; padding: 1rem 1.1rem; border: 1px solid var(--rule); }
.geo-rows__caption { max-width: 70ch; margin: 0 0 0.9rem; color: var(--ink-faint); font-size: 0.8rem; line-height: 1.6; }
.geo-rows__body { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem 2rem; }
.geo-rows__list { flex: 1 1 18rem; margin: 0; padding: 0; list-style: none; }
.geo-rows__row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 0.9rem; padding: 0.35rem 0; border-bottom: 1px solid var(--rule); }
.geo-rows__points { flex: 1 1 8rem; letter-spacing: 0.22em; color: var(--ink); word-break: break-all; }
.geo-rows__count { color: var(--ink-faint); font-size: var(--type-label); }
.geo-rows__leaves { color: var(--ink-muted); font-size: var(--type-label); }
.geo-rows__figure { display: grid; justify-items: center; gap: 0.35rem; }
.geo-rows__name { color: var(--ink-faint); font-size: 0.8rem; }

/* The transposition: Mothers across, Daughters down. */
.geo-transpose { margin: 1.4rem 0 0; overflow-x: auto; }
.geo-transpose__caption { max-width: 70ch; margin: 0 0 0.8rem; color: var(--ink-faint); font-size: 0.8rem; line-height: 1.6; }
/* Sixteen columns of dots do not fit a phone, and a table that does not fit
   used to take the whole PAGE sideways with it — the one page on the site that
   scrolled horizontally. It scrolls inside its own box now, which is what the
   correspondence tables and the chronology already do. */
.geo-grid-table { border-collapse: collapse; font-size: var(--type-small); }
.geo-grid-table th, .geo-grid-table td { padding: 0.45rem 0.8rem; border: 1px solid var(--rule); text-align: center; vertical-align: middle; }
.geo-grid-table thead th, .geo-grid-table tbody th { font-weight: 400; color: var(--ink-faint); text-align: left; }
.geo-grid-table__name { display: block; color: var(--ink-muted); font-size: var(--type-label); }
.geo-grid-table__cell { letter-spacing: 0.15em; color: var(--ink); }
.geo-grid-table__daughter { padding: 0.6rem 0.8rem; }
.geo-grid-table__daughter span { display: block; color: var(--ink-faint); font-size: var(--type-label); }

/* The addition, with the arithmetic left in. */
.geo-add, .geo-rule { margin: 1rem 0 0; border-collapse: collapse; font-size: var(--type-small); }
.geo-add th, .geo-add td, .geo-rule th, .geo-rule td { padding: 0.4rem 0.9rem; border-bottom: 1px solid var(--rule); text-align: left; }
.geo-add thead th, .geo-rule thead th { color: var(--ink-faint); font-size: var(--type-label); font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; }
.geo-add__line { color: var(--ink-faint); font-weight: 400; }
.geo-add__dots { letter-spacing: 0.2em; color: var(--ink); font-size: 1.1rem; }
.geo-add__dots--result { color: var(--history-event); }
.geo-add__parity, .geo-add__result-word { color: var(--ink-faint); font-size: var(--type-label); }

.geo-proof { max-width: 70ch; margin: 1.1rem 0 0; padding-left: 1.2rem; color: var(--ink-muted); line-height: 1.7; }
.geo-proof li + li { margin-top: 0.7rem; }

/* --- the walk-through ------------------------------------------------------- */
.geo-walk { margin: 0; }
.geo-walk__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem 1rem; }
.geo-walk__count { margin: 0; color: var(--ink-faint); font-size: 0.8rem; }
.geo-walk__nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.8rem; margin: 0.9rem 0 0; }
.geo-walk__button { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.4rem 0.8rem; border: 1px solid var(--ink-faint); background: var(--ground); color: var(--ink); font: inherit; font-size: var(--type-small); cursor: pointer; }
.geo-walk__button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.geo-walk__button[disabled] { color: var(--ink-faint); border-color: var(--rule); cursor: default; }
.geo-walk__whole { font-size: var(--type-small); }
.geo-walk__start { margin: 1rem 0 0; }
.geo-walk__start-link { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.45rem 0.9rem; border: 1px solid var(--ink-faint); text-decoration: none; font-size: var(--type-small); }
.geo-walk__steps { margin: 1.2rem 0 0; }
.geo-walk__step-heading { margin: 0; font-size: 1.05rem; font-weight: 400; }
.geo-walk__summary { max-width: 70ch; margin: 0.5rem 0 0; color: var(--ink-muted); line-height: 1.7; }
.geo-walk__working { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; margin: 1.1rem 0 0; }
.geo-walk__sources { display: flex; flex-wrap: wrap; gap: 0.8rem 1.4rem; margin: 0; padding: 0; list-style: none; }
.geo-walk__sources li { display: grid; justify-items: center; gap: 0.2rem; }
.geo-walk__source-note { color: var(--ink-faint); font-size: var(--type-label); }
.geo-walk__source-name { color: var(--ink-muted); font-size: var(--type-label); }
.geo-walk__result { display: flex; gap: 1rem; }
.geo-walk__made { display: grid; justify-items: center; gap: 0.25rem; color: var(--history-event); }
.geo-walk__made-name { color: var(--ink); font-size: var(--type-small); }

/* WHILE THE WALK IS RUNNING, NOTHING VANISHES. A figure the walk has not
   reached is dimmed; the one it has just made is ringed. Opacity and a ring,
   never display — the same rule the Tree's traversals follow, and the reason
   the Judge stays legible from the first step to the last. */
.shield--walking .shield__cell { transition: opacity 240ms ease; }
.shield__cell--future { opacity: 0.28; }
.shield__cell--current .geo-figure { outline: 2px solid var(--history-event); outline-offset: 5px; }
.shield__cell--current .shield__name { color: var(--history-event); }
.shield__cell--arriving { animation: geo-arrive 420ms ease-out; }
@keyframes geo-arrive {
  from { opacity: 0.2; transform: translateY(0.5rem); }
  to { opacity: 1; transform: none; }
}

/* The arrival is the information; the movement is the decoration. */
@media (prefers-reduced-motion: reduce) {
  .shield--walking .shield__cell { transition: none; }
  .shield__cell--arriving { animation: none; }
}

/* --- the shield island ------------------------------------------------------ */
/* A place on the shield is a BUTTON, so the button has to stop looking like
   one: the grid that used to be on the cell moves onto the control, because
   the control is now the thing holding the figure and its two labels. */
.shield__cell { position: relative; }
.shield__pick {
  display: grid; justify-items: center; gap: 0.25rem;
  width: 100%; padding: 0.35rem 0.2rem;
  border: 0; border-bottom: 2px solid transparent; border-radius: 0;
  background: none; color: inherit; font: inherit; text-align: center; cursor: pointer;
}
.shield__pick:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
/* The current choice is never marked by fill alone — 2px of underline, the
   same answer the site nav and the deck switcher give. */
.shield__cell--selected .shield__pick { border-bottom-color: var(--history-event); }
.shield__cell--selected .shield__name { color: var(--history-event); }
.shield__role--note { max-width: 12rem; }

/* A figure arrives one line at a time, because that is how one is made. A line
   that has not landed is drawn faintly rather than left out: an empty space
   that later fills is a layout that moves, and a shield that resizes under the
   cursor is unusable. */
.geo-figure__line--waiting { opacity: 0.12; }
/* A dot LANDS: it falls the height of its own line and settles. Slow enough
   to be a thing that happened — the whole claim of the art is that four lines
   of one dot or two are all there is, and that does not land if four of them
   flick past in half a second. The second dot of a pair is delayed in the
   markup, so a pair reads as two arrivals. */
.geo-figure__dot--landing {
  animation: geo-land 440ms cubic-bezier(0.2, 0.9, 0.3, 1) both;
  transform-origin: center;
  transform-box: fill-box;
}
@keyframes geo-land {
  from { opacity: 0; transform: translateY(-14px) scale(0.35); }
  60%  { opacity: 1; transform: translateY(1px) scale(1.14); }
  to   { opacity: 1; transform: none; }
}
/* A line being READ OFF this figure to make another one. The band is what
   carries the eye from the figure supplying a line to the one receiving it. */
.geo-figure__band {
  fill: var(--history-event);
  opacity: 0.18;
  animation: geo-read 620ms ease-out both;
}
@keyframes geo-read {
  from { opacity: 0; }
  35%  { opacity: 0.3; }
  to   { opacity: 0.18; }
}
.geo-figure__line--source .geo-figure__dot { fill: var(--history-event); }
.shield__cell--reading .geo-figure { outline: 1px dashed var(--history-event); outline-offset: 4px; }

/* The assembly: a derived figure being built, one line at a time, with the
   line or lines it was read from beside it. */
.geo-assembly { margin: 1.3rem 0 0; padding: 0.9rem 1rem; border: 1px solid var(--rule); }
.geo-assembly__caption { margin: 0 0 0.7rem; color: var(--ink-faint); font-size: 0.8rem; }
.geo-assembly__rows { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.3rem; }
.geo-assembly__row {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem 0.7rem;
  padding: 0.3rem 0.5rem; border-radius: 2px;
  transition: opacity 220ms ease, background-color 220ms ease;
}
.geo-assembly__row--waiting { opacity: 0.22; }
.geo-assembly__row--active { background: var(--ground-lift); }
.geo-assembly__row--active .geo-assembly__dots--result { animation: geo-land 560ms ease-out both; }
.geo-assembly__index { min-width: 1.2rem; color: var(--ink-faint); font-size: var(--type-label); }
.geo-assembly__from { min-width: 9.5rem; color: var(--ink-faint); font-size: var(--type-label); }
.geo-assembly__dots { letter-spacing: 0.2em; color: var(--ink); font-size: 1.05rem; min-width: 1.6rem; }
.geo-assembly__dots--result { color: var(--history-event); }
.geo-assembly__op { color: var(--ink-faint); }
.geo-assembly__sum, .geo-assembly__parity, .geo-assembly__leaves { color: var(--ink-faint); font-size: var(--type-label); }
.geo-assembly__note { max-width: 70ch; margin: 0.8rem 0 0; color: var(--ink-muted); font-size: var(--type-small); line-height: 1.6; }

/* The card that opens when a figure is rested on or tabbed to. It reuses the
   site's `.hovercard` look and remains anchored to its own cell. The client
   measures only the available viewport room to choose above or below. */
.geo-card {
  position: absolute; z-index: 30; top: calc(100% + 6px); left: 50%;
  transform: translateX(-50%);
  box-sizing: border-box;
  width: min(31rem, calc(100vw - 2rem)); max-width: none;
  padding: 0.8rem 0.9rem;
  text-align: left; pointer-events: none;
}
.geo-card__meanings { margin-top: 0.65rem; border-top: 1px solid var(--rule); }
.geo-card__meaning { padding: 0.6rem 0; border-bottom: 1px solid var(--rule); }
.geo-card__meaning h4 {
  margin: 0 0 0.28rem;
  color: var(--accent);
  font-size: var(--type-label);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.geo-card__meaning p {
  margin: 0;
  color: var(--ink-muted);
  font-family: var(--serif, serif);
  font-size: 0.82rem;
  line-height: 1.48;
}
.geo-card__meaning .geo-card__subject {
  margin-bottom: 0.2rem;
  color: var(--ink);
  font-family: inherit;
  font-size: var(--type-label);
}
.geo-card__meaning .geo-card__note {
  margin-top: 0.32rem;
  color: var(--ink-faint);
  font-family: inherit;
  font-size: var(--type-label);
}
.geo-card__meaning--combined {
  margin: 0 -0.35rem;
  padding-right: 0.35rem;
  padding-left: 0.35rem;
  background: color-mix(in srgb, var(--accent) 6%, transparent);
}
.geo-card--align-left { left: 0; right: auto; transform: none; }
.geo-card--align-right { left: auto; right: 0; transform: none; }
.geo-card--above { top: auto; bottom: calc(100% + 6px); }
.geo-card--viewport { position: fixed; top: 1rem; bottom: auto; }

@media (max-width: 600px) {
  .geo-card {
    position: fixed;
    top: 1rem !important;
    right: 1rem !important;
    bottom: auto !important;
    left: 1rem !important;
    width: auto;
    max-height: calc(100dvh - 2rem);
    overflow: hidden;
    transform: none !important;
  }
  .geo-card__meaning { padding: 0.5rem 0; }
  .geo-card__meaning p { font-size: var(--type-label); line-height: 1.4; }
  .geo-card__meaning .geo-card__note { font-size: var(--type-label); }
}

/* What a chosen figure is, in full. It stays mounted once anything has been
   chosen: a panel that unmounted between selections would drop focus. */
.geo-detail-panel {
  margin: 1.6rem 0 0; padding: 1.1rem 1.2rem;
  border: 1px solid var(--rule); background: var(--ground-lift);
}
.geo-detail-panel--empty { color: var(--ink-faint); font-size: var(--type-small); }
.geo-detail-panel--empty p { margin: 0; }
.geo-detail-panel__head { display: flex; flex-wrap: wrap; gap: 1rem 1.6rem; align-items: flex-start; }
.geo-detail-panel__name { margin: 0; font-size: 1.15rem; font-weight: 400; }
.geo-detail-panel__role { margin: 0.2rem 0 0.7rem; color: var(--ink-faint); font-size: 0.82rem; }
.geo-detail-panel__facts { margin: 0; display: grid; gap: 0.35rem; }
.geo-detail-panel__facts > div { display: flex; flex-wrap: wrap; gap: 0.3rem 0.6rem; }
.geo-detail-panel__facts dt { min-width: 6.5rem; color: var(--ink-faint); font-size: var(--type-label); }
.geo-detail-panel__facts dd { margin: 0; max-width: 46ch; font-size: var(--type-small); color: var(--ink); }
.geo-detail-panel__made { margin: 1.2rem 0 0; }
.geo-detail-panel__made h4 { margin: 0 0 0.5rem; font-size: var(--type-label); font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); }
.geo-detail-panel__cast,
.geo-detail-panel__absent { max-width: 70ch; margin: 1.1rem 0 0; color: var(--ink-muted); font-size: var(--type-small); line-height: 1.65; }
.geo-detail-panel__more { margin: 1rem 0 0; font-size: var(--type-small); }
.geo-passage--nature { margin-top: 1.2rem; }
.geo-detail-panel__house { max-width: 70ch; margin: 1.2rem 0 0; padding-top: 1rem; border-top: 1px solid var(--rule); }
.geo-detail-panel__house h4 { margin: 0; font-size: 1rem; font-weight: 500; }
.geo-detail-panel__topic { margin: 0.55rem 0 0; color: var(--ink-muted); font-size: var(--type-small); line-height: 1.6; }
.geo-detail-panel__house blockquote { margin: 0.8rem 0 0; padding-left: 1rem; border-left: 2px solid var(--rule); font-family: var(--serif); line-height: 1.7; }
.geo-detail-panel__source { margin: 0.5rem 0 0; color: var(--ink-faint); font-size: var(--type-label); }
.geo-detail-panel__house-note { margin: 0.7rem 0 0; color: var(--ink-muted); font-size: var(--type-small); line-height: 1.6; }
.geo-detail-panel__house-links { margin: 0.7rem 0 0; font-size: 0.82rem; }

@media (max-width: 560px) {
  .geo-source-notes { grid-template-columns: 1fr; }
  .geo-attribution-summary > div { grid-template-columns: 1fr; gap: 0.2rem; }
  .geo-house-judgments { grid-template-columns: 1fr; }
}

/* React renders these two as buttons, because they change the page in place
   rather than fetching one. They must not read as buttons-that-post. */
.geo-walk__whole {
  border: 0; background: none; padding: 0; color: var(--link, var(--ink));
  font: inherit; font-size: var(--type-small); text-decoration: underline; cursor: pointer;
}
.geo-walk__whole:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
button.geo-walk__start-link { cursor: pointer; }

@media (prefers-reduced-motion: reduce) {
  .geo-figure__dot--here,
  .geo-figure__dot--landing,
  .geo-figure__band,
  .geo-assembly__row--active .geo-assembly__dots--result { animation: none; }
  .geo-assembly__row { transition: none; }
}

/* --- the stage: the move being made, drawn large ---------------------------- */
/* The shield is a map and stays a map. This is where the motion is: one move,
   the width of the page, with the dots actually crossing from the figure they
   were read off to the figure being built. Animating the map instead was the
   first attempt, and it was invisible — forty-pixel figures, a ten-pixel fall,
   fifteen other figures around it. */
.geo-stage { margin: 1rem 0 1.2rem; padding: 0.9rem 0.6rem; border: 1px solid var(--rule); background: var(--ground-lift); overflow-x: auto; }
.geo-stage__canvas { display: block; width: 100%; max-width: 46rem; height: auto; margin: 0 auto; }

.geo-stage__dot { fill: var(--ink); transform-box: fill-box; transform-origin: center; }
.geo-stage__dot--waiting { fill: var(--ink-faint); opacity: 0.22; }
.geo-stage__dot--arriving { animation: geo-stage-land 520ms cubic-bezier(0.2, 0.9, 0.3, 1) both; }
@keyframes geo-stage-land {
  from { opacity: 0; transform: scale(0.2); }
  62%  { opacity: 1; transform: scale(1.28); }
  to   { opacity: 1; transform: scale(1); }
}

/* A dot in flight. The distance is not known to the stylesheet — it is a
   different journey for every line of every move — so the renderer hands it
   over as two custom properties and the keyframes just use them. */
.geo-stage__travel {
  fill: var(--history-event);
  animation-name: geo-travel;
  animation-timing-function: cubic-bezier(0.45, 0, 0.2, 1);
  animation-fill-mode: both;
}
@keyframes geo-travel {
  from { transform: translate(0, 0); opacity: 0; }
  14%  { opacity: 1; }
  88%  { opacity: 1; }
  to   { transform: translate(var(--dx), var(--dy)); opacity: 0; }
}

/* The line being read, while its dots are in the air. */
.geo-stage__band { fill: var(--history-event); opacity: 0.16; animation: geo-stage-band 700ms ease-out both; }
@keyframes geo-stage-band {
  from { opacity: 0; }
  30%  { opacity: 0.28; }
  to   { opacity: 0.16; }
}

.geo-stage__label, .geo-stage__name, .geo-stage__operator {
  text-anchor: middle; fill: var(--ink-faint); font-family: inherit;
}
.geo-stage__label { font-size: 13px; }
.geo-stage__name { font-size: 12px; fill: var(--ink-muted); }
.geo-stage__operator { font-size: 22px; fill: var(--ink-faint); }

@media (prefers-reduced-motion: reduce) {
  .geo-stage__dot--arriving,
  .geo-stage__travel,
  .geo-stage__band { animation: none; }
  .geo-stage__travel { display: none; }
}

/* Reference glossary: compact controls, generous definitions. */
.glossary__filters {
  display: flex; align-items: end; flex-wrap: wrap; gap: 0.8rem;
  margin: 1.7rem 0 1rem; padding: 1rem; border: 1px solid var(--rule);
  background: var(--ground-lift);
}
.glossary__field { display: grid; gap: 0.35rem; min-width: 11rem; flex: 1 1 11rem; }
.glossary__field--search { flex: 2 1 18rem; }
.glossary__field label { font-size: 0.82rem; color: var(--ink-muted); }
.glossary__field input, .glossary__field select {
  width: 100%; min-height: 2.5rem; padding: 0.45rem 0.65rem;
  border: 1px solid var(--rule); border-radius: 0.25rem;
  background: var(--ground); color: var(--ink); font: inherit;
}
.glossary__filters button {
  min-height: 2.5rem; padding: 0.45rem 0.8rem; border: 1px solid var(--ink);
  border-radius: 0.25rem; background: var(--ink); color: var(--ground); font: inherit;
  cursor: pointer;
}
.glossary__filters > a { align-self: center; }
.glossary__alphabet { display: flex; flex-wrap: wrap; gap: 0.2rem; margin: 1rem 0; }
.glossary__alphabet a, .glossary__alphabet span {
  display: inline-grid; place-items: center; min-width: 2rem; min-height: 2rem;
  padding: 0 0.35rem; border-radius: 0.2rem; text-decoration: none;
}
.glossary__alphabet a { color: var(--ink); border: 1px solid var(--rule); }
.glossary__alphabet a:hover, .glossary__alphabet a[aria-current="page"] { background: var(--ink); color: var(--ground); }
.glossary__alphabet span { color: var(--ink-faint); }
.glossary__count { color: var(--ink-muted); font-size: var(--type-small); }
.glossary__entries { border-top: 1px solid var(--rule); }
.glossary__entry { padding: 1.4rem 0; border-bottom: 1px solid var(--rule); }
.glossary__entry h2 { margin: 0 0 0.45rem; font-size: 1.4rem; line-height: 1.25; }
.glossary__aliases { margin: 0 0 0.55rem; color: var(--ink-muted); font-size: var(--type-small); }
.glossary__definition { max-width: 75ch; margin: 0 0 0.65rem; line-height: 1.6; }
.glossary__related { margin: 0 0 0.55rem; font-size: var(--type-small); }
.glossary__meta { display: flex; flex-wrap: wrap; gap: 0.2rem 1rem; margin: 0; color: var(--ink-muted); font-size: var(--type-label); }
.glossary__pagination { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; margin: 1.4rem 0 2rem; }
.glossary__pagination a { padding: 0.4rem 0.7rem; border: 1px solid var(--rule); border-radius: 0.2rem; }
.glossary__pagination a[aria-current="page"] { color: var(--ground); background: var(--ink); border-color: var(--ink); text-decoration: none; }
.glossary__empty { padding: 1.5rem 0; }

/* Source-specific ritual tools. */
.magical-tools__table { width: 100%; border-collapse: collapse; min-width: 40rem; }
.magical-tools__table th, .magical-tools__table td {
  padding: 0.8rem 0.7rem; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--rule);
}
.magical-tools__table thead th { font-size: 0.82rem; color: var(--ink-muted); border-bottom-width: 2px; }
.magical-tools__table tbody th { width: 13rem; font-weight: 600; }
.magical-tools__table tbody th small { display: block; margin-top: 0.2rem; font-size: var(--type-label); font-weight: 400; color: var(--ink-muted); }
.magical-tools__table .magical-tools__element { width: 9rem; white-space: nowrap; }
.magical-tools__table tbody td:last-child { max-width: 58ch; line-height: 1.5; }
.magical-tools__visual { width: 4.5rem; }
.magical-tool-drawing { margin: 1.5rem 0; padding: 1rem; border: 1px solid var(--rule); background: var(--ground-lift); }
.magical-tool-drawing svg { display: block; width: min(100%, 28rem); height: auto; margin: 0 auto; }
.magical-tool-drawing__lines { fill: none; stroke: var(--ink); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.magical-tool-drawing__dash { stroke-dasharray: 5 6; }
.magical-tool-drawing .tool-fill { stroke: var(--ink); }
.magical-tool-drawing .tool-fill--scarlet { fill: #c92d32; }
.magical-tool-drawing .tool-fill--blue { fill: #246bb2; }
.magical-tool-drawing .tool-fill--yellow { fill: #f2cf34; }
.magical-tool-drawing .tool-fill--white { fill: #fffdf6; }
.magical-tool-drawing .tool-fill--black { fill: #171717; }
.magical-tool-drawing .tool-fill--olive { fill: #71833c; }
.magical-tool-drawing .tool-fill--orange { fill: #f07d22; }
.magical-tool-drawing .tool-fill--rose { fill: #c43f68; }
.magical-tool-drawing .tool-fill--citrine { fill: #d8c84c; }
.magical-tool-drawing .tool-fill--russet { fill: #8d482f; }
.magical-tool-drawing .tool-fill--steel { fill: #c8ced2; }
.magical-tool-drawing .tool-fill--copper { fill: #b96c43; }
.magical-tool-drawing .tool-fill--gold { fill: #d9aa2b; }
.magical-tool-drawing .tool-fill--gold-pale { fill: #eadc9c; }
.magical-tool-drawing .tool-fill--deep-blue { fill: #223f78; }
.magical-tool-drawing .tool-fill--crimson { fill: #8c1e38; }
.magical-tool-drawing .tool-stroke { fill: none; stroke-width: 3.2; }
.magical-tool-drawing .tool-stroke--wide { stroke-width: 6; }
.magical-tool-drawing .tool-stroke--scarlet { stroke: #c92d32; }
.magical-tool-drawing .tool-stroke--yellow { stroke: #f2cf34; }
.magical-tool-drawing .tool-stroke--emerald { stroke: #168258; }
.magical-tool-drawing .tool-stroke--orange { stroke: #f07d22; }
.magical-tool-drawing .tool-stroke--violet { stroke: #6f3a91; }
.magical-tool-drawing .tool-stroke--white { stroke: #fffdf6; }
.magical-tool-drawing .tool-stroke--gold { stroke: #d9aa2b; }
.magical-tool-drawing .tool-stroke--steel { stroke: #6f777d; }
.magical-tool-drawing .tool-stroke--copper { stroke: #b96c43; }
.magical-tool-drawing .tool-stroke--air { stroke: #5a8ea8; }
.magical-tool-drawing figcaption { max-width: 28rem; margin: 0.65rem auto 0; color: var(--ink-muted); font-size: var(--type-label); text-align: center; }
.magical-tool-drawing--compact { width: 4rem; margin: 0; padding: 0.2rem; border: 0; background: transparent; }
.magical-tool-drawing--compact svg { width: 100%; }
.magical-tool-drawing--compact .magical-tool-drawing__lines { stroke-width: 5; }
.magical-tools__references { display: grid; gap: 0.75rem; max-width: 75ch; padding-left: 1.2rem; }
.magical-tools__references li span { display: block; margin-top: 0.15rem; color: var(--ink-muted); font-size: var(--type-small); line-height: 1.45; }
.magical-tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: 0.9rem;
  margin: 1.4rem 0;
  padding: 0;
  list-style: none;
}
.magical-tools-grid__item { min-width: 0; }
.magical-tools-grid__link {
  display: grid;
  grid-template-rows: 10rem 1fr;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--rule);
  border-radius: 0.35rem;
  background: var(--ground-lift);
  color: var(--ink);
  text-decoration: none;
  transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}
.magical-tools-grid__link:hover,
.magical-tools-grid__link:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 0.65rem 1.6rem rgba(30, 24, 15, 0.12);
  transform: translateY(-2px);
}
.magical-tools-grid__link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.magical-tools-grid__art {
  display: grid;
  place-items: center;
  padding: 0.8rem 1rem;
  border-bottom: 1px solid var(--rule);
  background:
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 62%),
    var(--ground);
}
.magical-tools-grid .magical-tool-drawing--compact {
  width: 100%;
  max-width: 8.75rem;
}
.magical-tools-grid .magical-tool-drawing--compact svg {
  width: 100%;
  max-height: 8rem;
}
.magical-tools-grid .magical-tool-drawing--compact .magical-tool-drawing__lines { stroke-width: 3; }
.magical-tools-grid__body {
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: 1rem;
}
.magical-tools-grid__context {
  margin-bottom: 0.35rem;
  color: var(--ink-muted);
  font-size: var(--type-label);
  font-weight: 650;
  letter-spacing: 0.055em;
  line-height: 1.3;
  text-transform: uppercase;
}
.magical-tools-grid__name {
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 650;
  line-height: 1.15;
}
.magical-tools-grid__summary {
  margin-top: 0.55rem;
  color: var(--ink-muted);
  font-size: var(--type-small);
  line-height: 1.48;
}
.magical-tools-grid__action {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: auto;
  padding-top: 0.9rem;
  color: var(--accent);
  font-size: var(--type-label);
  font-weight: 700;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}
.magical-tools-grid__link:hover .magical-tools-grid__action span,
.magical-tools-grid__link:focus-visible .magical-tools-grid__action span { transform: translateX(0.2rem); }
.magical-tools-grid__action span { transition: transform 150ms ease; }
@media (max-width: 40rem) {
  .magical-tools-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.65rem; }
  .magical-tools-grid__link { grid-template-rows: 8rem 1fr; }
  .magical-tools-grid__art { padding: 0.65rem; }
  .magical-tools-grid .magical-tool-drawing--compact { max-width: 6.75rem; }
  .magical-tools-grid .magical-tool-drawing--compact svg { max-height: 6.5rem; }
  .magical-tools-grid__body { padding: 0.8rem; }
  .magical-tools-grid__name { font-size: 1.05rem; }
  .magical-tools-grid__summary { font-size: 0.8rem; line-height: 1.4; }
}

/* --- Alphabets: the Hebrew letters ---------------------------------------
   Every fact on these cards is read from elsewhere in the study (see
   HebrewAlphabet). The glyph is the point of a card, so it is the largest
   thing on it; a final form sits beside it, smaller, because it is the same
   letter at the end of a word. */

.alphabets [lang="he"] {
  font-family: "SBL Hebrew", "Ezra SIL", "Noto Serif Hebrew", "Frank Ruehl CLM", "Times New Roman", serif;
}
.hebrew__note { font-size: var(--type-small); color: var(--ink-muted); }
.hebrew__prose { max-width: 64ch; margin: 0 0 1rem; color: var(--ink-muted); font-size: var(--type-small); line-height: 1.6; }

.hebrew__summary { max-width: 70ch; font-size: 0.95rem; }
.hebrew__summary strong { color: var(--ink); font-weight: normal; }

/* One kind of letter per block, full width: its letters on the left, the
   book's account of it on the right. Three narrow panels could not hold a
   passage and its reading side by side. */
.hebrew-classes { display: grid; gap: 1rem; }
.hebrew-class {
  display: grid;
  gap: 0.5rem 2rem;
  padding: 1rem 1.1rem 1.1rem;
  border: 1px solid var(--rule);
  background: var(--ground-lift);
  scroll-margin-top: 5rem;
}
@media (min-width: 800px) {
  .hebrew-class { grid-template-columns: minmax(10rem, 14rem) minmax(0, 1fr); }
}
.hebrew-class__name { margin: 0; font-size: 1.15rem; font-weight: normal; }
.hebrew-class__letters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0.55rem;
  margin: 0.5rem 0 0;
  font-size: 1.7rem;
  line-height: 1.3;
}
.hebrew-class__letters a { text-decoration: none; }
.hebrew-class__letters a:hover { text-decoration: underline; }
.hebrew-class__passages .sy-passage:first-child { margin-top: 0; }

/* A passage of Sefer Yetzirah and this study's reading of it. The two must
   never look like one thing: ours is labelled, the book's is set as a quote
   with its chapter and section under it. */
.sy-passage { max-width: 70ch; margin: 1.1rem 0 0; }
.sy-passage__gloss { margin: 0; color: var(--ink); font-size: 0.95rem; line-height: 1.6; }
.sy-passage__gloss-label {
  display: block;
  color: var(--ink-faint);
  font-size: var(--type-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.sy-passage__quote {
  margin: 0.5rem 0 0;
  padding: 0 0 0 1rem;
  border-left: 2px solid var(--rule);
  color: var(--ink-muted);
  font-size: var(--type-small);
  font-style: italic;
  line-height: 1.65;
}
.sy-passage__source { margin: 0.35rem 0 0 1rem; color: var(--ink-faint); font-size: var(--type-label); }

/* Borders on the cards, not a gap over a coloured grid, so a last row that
   is not full ends in blank space. */
.hebrew-letters {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
}
.hebrew-letter {
  display: flex;
  flex-direction: column;
  padding: 0.9rem 1rem 1rem;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background: var(--ground);
  /* Clear of the sticky "On this page" bar, which on a phone sits over the
     top of whatever a jump lands on — here, the glyph. */
  scroll-margin-top: 5rem;
}
.hebrew-letter:target { box-shadow: inset 0 -2px 0 var(--history-event); }
.hebrew-letter__glyphs {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  margin: 0;
  line-height: 1.1;
}
.hebrew-letter__glyph { font-size: 3.4rem; color: var(--ink); }
.hebrew-letter__final { font-size: 1.9rem; color: var(--ink-muted); }
.hebrew-letter__name { margin: 0.35rem 0 0; font-size: 1.1rem; font-weight: normal; }
.hebrew-letter__meaning { margin: 0.1rem 0 0; color: var(--ink-muted); font-size: var(--type-small); font-style: italic; }
.hebrew-letter__facts {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.15rem 0.75rem;
  margin: 0.7rem 0 0;
  font-size: 0.8rem;
}
.hebrew-letter__facts > div { display: contents; }
.hebrew-letter__facts dt { color: var(--ink-faint); }
.hebrew-letter__facts dd { margin: 0; font-variant-numeric: tabular-nums; }
.hebrew-letter__links {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin: auto 0 0;
  padding-top: 0.7rem;
  font-size: var(--type-label);
}

.hebrew-sources { display: grid; gap: 0.8rem; max-width: 70ch; margin: 0; }
.hebrew-sources dt { color: var(--ink); font-size: var(--type-small); }
.hebrew-sources dd { margin: 0.15rem 0 0; color: var(--ink-muted); font-size: var(--type-small); line-height: 1.6; }

/* --- Glossary: symbols ---------------------------------------------------
   Every drawing is a Unicode character's outline in currentColor (or a
   geomantic figure drawn from its own data), so it takes the text colour in
   either theme. The drawing leads each card; what Unicode calls it and where
   the study says more follow it. */

.symbols__note { font-size: var(--type-small); color: var(--ink-muted); }
.symbols__group { margin: 3rem 0 0; }
.symbols__group-heading { margin-bottom: 0.25rem; }
.symbols__subgroup-heading {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin: 1.6rem 0 0.6rem;
  font-size: 1.05rem;
  font-weight: normal;
}
.symbols__count { color: var(--ink-faint); font-size: var(--type-label); font-variant-numeric: tabular-nums; }
/* Borders on the cards rather than a 1px gap over a coloured grid: a row that
   is not full must end in blank space, not in a block of rule colour. */
.symbols__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
}
.symbol-card {
  display: grid;
  grid-template-columns: 3.6rem minmax(0, 1fr);
  gap: 0.85rem;
  align-items: start;
  padding: 0.85rem 0.9rem;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background: var(--ground);
  scroll-margin-top: 5rem;
}
/* Clear of the sticky "On this page" bar, which on a phone sits over the top
   of whatever a jump lands on. */
.symbols__group, .symbols__subgroup-heading { scroll-margin-top: 5rem; }
.symbol-card:target { box-shadow: inset 0 -2px 0 var(--history-event); }
.symbol-card__glyph { display: grid; place-items: center; width: 3.6rem; height: 3.6rem; color: var(--ink); }
.symbol-glyph { width: 3.2rem; height: 3.2rem; fill: currentColor; }
.symbol-glyph--small { width: 1.25rem; height: 1.25rem; vertical-align: -0.3em; }
.symbol-card__glyph--figure .geo-figure { width: auto; height: 3.2rem; }
.symbol-card__name { margin: 0; font-size: 1rem; font-weight: normal; }
.symbol-card__unicode { margin: 0.15rem 0 0; color: var(--ink-faint); font-size: var(--type-label); line-height: 1.4; }
.symbol-card__codepoint { font-variant-numeric: tabular-nums; margin-right: 0.35rem; }
.symbol-card__official { letter-spacing: 0.02em; }
.symbol-card__variants { margin: 0.35rem 0 0; color: var(--ink-faint); font-size: var(--type-label); }
.symbol-card__variant { display: inline-block; margin-left: 0.2rem; color: var(--ink-muted); }
.symbol-card__said { margin: 0.35rem 0 0; color: var(--ink-muted); font-size: var(--type-label); line-height: 1.45; }
.symbol-card__links { margin: 0.4rem 0 0; padding: 0; list-style: none; font-size: var(--type-label); line-height: 1.5; }
.symbols__undrawn { max-width: 70ch; margin: 0; padding-left: 1.1rem; color: var(--ink-muted); font-size: var(--type-small); line-height: 1.6; }
.symbols__undrawn strong { color: var(--ink); font-weight: normal; }

/* The way into the Symbols tab from the glossary's own page. */
.glossary__symbols-link { max-width: 62ch; margin: 0.75rem 0 0; color: var(--ink-muted); font-size: var(--type-small); line-height: 1.6; }
.glossary__symbols-link a { color: var(--ink); }

/* A few of each tradition's symbols beside its link on the Symbols overview. */
.symbols__sample { display: inline-flex; align-items: center; gap: 0.45rem; margin-left: 0.6rem; color: var(--ink-muted); vertical-align: middle; }
.symbols__sample .geo-figure { display: inline-block; }

/* --- Alchemy -------------------------------------------------------------
   A quoted passage and this study's reading of it must never look like one
   thing: the book's words are set as a quote with its locator, ours are
   labelled. Same shape as the geomancy method page. */

.alchemy__prose { max-width: 68ch; margin: 1rem 0 0; line-height: 1.7; }
.alchemy__note { color: var(--ink-muted); font-size: var(--type-small); }
.alch-passage { max-width: 70ch; margin: 1.3rem 0 0; padding: 0 0 0 1rem; border-left: 2px solid var(--rule); }
.alch-passage__quote { margin: 0; font-family: var(--serif, serif); font-size: 1rem; line-height: 1.75; color: var(--ink); }
.alch-passage__source { margin: 0.5rem 0 0; color: var(--ink-faint); font-size: var(--type-label); line-height: 1.5; }
.alch-passage__gloss { margin: 0.7rem 0 0; color: var(--ink-muted); font-size: var(--type-small); line-height: 1.65; }
.alch-passage__gloss-label {
  display: block;
  color: var(--ink-faint);
  font-size: var(--type-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.alch-stages, .alch-gates, .alch-principles { margin: 1.2rem 0 0; padding: 0; list-style: none; }
.alch-stage, .alch-gate {
  display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr);
  gap: 0.9rem;
  padding: 0.9rem 0;
  border-top: 1px solid var(--rule);
}
.alch-stage__colour { margin: 0.2rem 0 0; }
/* The swatch is a reading aid, not a claim about a pigment: the colours are
   named by the source and drawn here as ink, lift and rule tones. */
.alch-stage__swatch { display: block; width: 1.6rem; height: 1.6rem; border: 1px solid var(--ink-faint); border-radius: 50%; }
.alch-stage__swatch--black { background: #0b0b0d; }
.alch-stage__swatch--white { background: #ece7dc; }
.alch-stage__swatch--citrine { background: #c8a53c; }
.alch-stage__swatch--red { background: #8f2d21; }
.alch-stage--contested .alch-stage__swatch { border-style: dashed; }
.alch-stage__name, .alch-gate__name, .alch-principle__name {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
  margin: 0;
  font-size: 1.05rem;
  font-weight: normal;
}
.alch-stage__summary, .alch-gate__summary, .alch-principle__summary { margin: 0.25rem 0 0; max-width: 66ch; line-height: 1.6; }
.alch-stage__note { margin: 0.3rem 0 0; max-width: 66ch; color: var(--ink-muted); font-size: var(--type-small); line-height: 1.6; }
.alch-stage__source, .alch-principle__source { margin: 0.3rem 0 0; color: var(--ink-faint); font-size: var(--type-label); }
.alch-gate__number {
  margin: 0.15rem 0 0;
  color: var(--ink-faint);
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.alch-gate__glossary { font-size: var(--type-label); }
.badge--contested { border-color: var(--ink-faint); color: var(--ink-muted); }
.alch-metals { display: flex; flex-wrap: wrap; gap: 0.35rem 1.1rem; margin: 0.8rem 0 0; padding: 0; list-style: none; font-size: var(--type-small); }
.alch-principle { padding: 0.8rem 0; border-top: 1px solid var(--rule); }
.alchemy__stance { max-width: 70ch; margin: 1rem 0 0; padding-left: 1.1rem; line-height: 1.7; }
.alchemy__stance li { margin: 0.5rem 0; }
.alchemy__stance strong { color: var(--ink); font-weight: normal; }

/* ---------------------------------------------------------------- Orders
   The initiatory bodies. Three things carry meaning here and all three are
   TEXT rather than colour: the continuity verdict, the "joined up by this
   study" badge, and the source line under every statement. A status shown by
   fill alone would be invisible at --ground-lift's 1.05:1, which is the rule
   the site nav's underline already answers. */
.orders__prose { max-width: 68ch; margin: 1rem 0 0; line-height: 1.7; }

.ord-tiers { margin: 1.2rem 0 0; padding: 0 0 0 1.4rem; }
.ord-tier { margin: 0 0 1.1rem; max-width: 70ch; }
.ord-tier__name { margin: 0; font-size: 1rem; font-weight: 600; }
.ord-tier__body { margin: 0.35rem 0 0; line-height: 1.65; color: var(--ink-muted); }

/* A definition list, NOT `.facts` — that is a flex-wrapped list of label/value
   `li`s, and a `dl` dropped into it puts every dt beside a dd of a different
   pair. Same rail as .ord-row so the section keeps one rhythm. */
.ord-facts {
  display: grid; grid-template-columns: 13rem 1fr; gap: 0.1rem 1.2rem;
  margin: 1.1rem 0 0; padding: 0.85rem 0 0; border-top: 1px solid var(--rule);
}
.ord-facts dt { font-weight: 600; line-height: 1.65; }
.ord-facts dd { margin: 0 0 0.7rem; max-width: 62ch; line-height: 1.65; color: var(--ink-muted); }

/* The listing. Dates run down a fixed rail so the eye can scan centuries. */
.ord-list { margin: 1.2rem 0 0; padding: 0; list-style: none; }
.ord-row {
  display: grid; grid-template-columns: 8.5rem 1fr; gap: 0 1.2rem;
  padding: 1.1rem 0; border-top: 1px solid var(--rule);
}
.ord-row__dates { margin: 0.15rem 0 0; color: var(--ink-faint); font-size: 0.82rem; line-height: 1.5; }
.ord-row__body { min-width: 0; }
.ord-row__name { margin: 0; font-size: 1.05rem; }
.ord-row__abbr { margin-left: 0.4rem; color: var(--ink-faint); font-size: 0.8rem; font-weight: 400; }
.ord-row__summary { margin: 0.35rem 0 0; max-width: 66ch; line-height: 1.65; }
.ord-row__gleaning, .ord-row__continuity { margin: 0.6rem 0 0; max-width: 66ch; line-height: 1.6; font-size: var(--type-small); color: var(--ink-muted); }
.ord-row__label, .ord-row__status {
  display: block; font-size: var(--type-label); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-faint); margin: 0 0 0.15rem;
}
/* The verdict is the one thing on the row a reader must not skim past, so it
   gets the weight rather than a colour that would have to be explained. */
.ord-row__status { color: var(--ink); font-weight: 600; }
.ord-row--unverified .ord-row__status, .ord-row--name-in-use .ord-row__status { color: var(--accent, #c9a227); }
.ord-row__self { margin: 0.5rem 0 0; font-size: 0.82rem; color: var(--ink-faint); }

/* Evolution. */
.ord-descent { margin: 1.2rem 0 0; padding: 0; list-style: none; }
.ord-descent__item {
  display: grid; grid-template-columns: 8.5rem 1fr; gap: 0 1.2rem;
  padding: 1rem 0; border-top: 1px solid var(--rule);
}
.ord-descent__year { margin: 0.15rem 0 0; color: var(--ink-faint); font-size: 0.82rem; }
.ord-descent__body { min-width: 0; }
.ord-descent__name { margin: 0; font-size: 1rem; }
.ord-descent__from { margin: 0.35rem 0 0; line-height: 1.6; }
.ord-descent__from--none { color: var(--ink-faint); font-size: var(--type-small); }
.ord-descent__how { color: var(--ink-muted); font-size: var(--type-small); }
.ord-descent__note { margin: 0.25rem 0 0; max-width: 64ch; color: var(--ink-muted); font-size: var(--type-small); line-height: 1.6; }
.ord-descent__source { margin: 0.25rem 0 0; color: var(--ink-faint); font-size: var(--type-label); line-height: 1.5; }
.ord-descent__children { margin: 0.5rem 0 0; font-size: var(--type-small); color: var(--ink-muted); }

/* A quoted passage, matching the alchemy and geomancy treatment exactly: the
   document's words, then a labelled gloss that is ours. */
.ord-passage { max-width: 70ch; margin: 1.3rem 0 0; padding: 0 0 0 1rem; border-left: 2px solid var(--rule); }
.ord-passage__quote { margin: 0; font-family: var(--serif, serif); font-size: 1rem; line-height: 1.75; color: var(--ink); }
.ord-passage__source { margin: 0.5rem 0 0; color: var(--ink-faint); font-size: var(--type-label); line-height: 1.5; }
.ord-passage__gloss { margin: 0.7rem 0 0; color: var(--ink-muted); font-size: var(--type-small); line-height: 1.65; }
.ord-passage__gloss-label {
  display: block; font-size: var(--type-label); letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--ink-faint); margin: 0 0 0.2rem;
}
.ord-quoted { margin: 1.6rem 0 0; }
.ord-quoted__name { margin: 0; font-size: 1rem; }
.ord-quoted__year { color: var(--ink-faint); font-weight: 400; font-size: var(--type-small); }

/* A cited statement. */
.ord-claims { margin: 1rem 0 0; padding: 0; list-style: none; }
.ord-claim { padding: 0.8rem 0; border-top: 1px solid var(--rule); max-width: 70ch; }
.ord-claim__head { margin: 0; line-height: 1.6; }
.ord-claim__predicate {
  display: block; font-size: var(--type-label); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-faint); margin: 0 0 0.15rem;
}
.ord-claim__value { font-weight: 600; }
.ord-claim__note { margin: 0.35rem 0 0; color: var(--ink-muted); font-size: var(--type-small); line-height: 1.65; }
.ord-claim__sources { margin: 0.45rem 0 0; padding: 0 0 0 1.1rem; color: var(--ink-faint); font-size: var(--type-label); line-height: 1.6; }
.ord-claim__restricted, .ord-claim__cite-note { display: block; font-style: italic; }

.ord-restricted { margin: 1rem 0 0; padding: 0 0 0 1.2rem; max-width: 70ch; line-height: 1.65; }
.ord-restricted li { margin: 0 0 0.7rem; }
.ord-restricted__why { display: block; color: var(--ink-muted); font-size: var(--type-small); }
.ord-garble { font-family: var(--mono, monospace); font-size: 0.86em; color: var(--ink-muted); }

.ord-page__dates { margin: 0.3rem 0 0; color: var(--ink-faint); font-size: var(--type-small); }
.ord-page__verdict { margin: 0.8rem 0 0; font-size: 1.05rem; font-weight: 600; }
.ord-page__verdict--unverified, .ord-page__verdict--name-in-use { color: var(--accent, #c9a227); }
.ord-page__self, .ord-page__descent-note { color: var(--ink-muted); font-size: var(--type-small); }

/* A phone gets one column: an 8.5rem rail leaves 24 characters for a name. */
@media (max-width: 640px) {
  .ord-row, .ord-descent__item, .ord-facts { grid-template-columns: 1fr; gap: 0.25rem; }
  .ord-facts dd { margin: 0 0 0.9rem; }
  .ord-row__dates, .ord-descent__year { order: -1; }
}
.ord-shelf { margin: 0.6rem 0 0; font-size: var(--type-small); color: var(--ink-muted); }