/* CHROME — The furniture every page wears: the top bar and section bar, search, the front door and section indexes, icons, panels, badges, folds and contents.

   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. */

/* --- site nav: category buckets, with sections in disclosure menus ------- */

.sitenav {
  position: relative;
  display: flex;
  /* WRAPS AT EVERY WIDTH, not only below 1180px where the search box takes its
     own row. The row is a name, four buckets, Interactive, About, the search
     box and the theme switch, and the last of those was enough to push the bar
     18-42px past a 1440px viewport once a reader applies the WCAG 1.4.12 text
     spacing override — caught by density.spec.mjs on /source-books and
     /correspondences/squares. Nothing wraps at this width normally, because
     nothing needs to; this is what happens INSTEAD of taking the page
     sideways, which is the answer the bar already gave one breakpoint down. */
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem;
  padding: 0.5rem clamp(0.75rem, 3vw, 2rem);
  border-bottom: 1px solid var(--rule);
  background: var(--ground-lift);
}

.sitenav__mark {
  font-family: var(--serif);
  font-size: 0.95rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  text-decoration: none;
  flex: none;
}

.sitenav__mark:hover { color: var(--ink-muted); }
.sitenav__mark:focus-visible { color: var(--ink); }

.sitenav__buckets {
  display: flex;
  align-items: stretch;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.sitenav__bucket { position: relative; }

.sitenav__trigger {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.75rem;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  font-family: var(--serif);
  font-size: 1rem;
  color: var(--ink-muted);
  cursor: pointer;
}

.sitenav__trigger:hover,
.sitenav__trigger[aria-expanded="true"] { color: var(--ink); }

/* A fine brass rule marks place without turning the navigation into tabs. */
.sitenav__trigger--on {
  color: var(--ink);
  border-bottom-color: var(--accent);
}
.sitenav__trigger--on .sitenav__chevron { color: var(--accent); }

.sitenav__trigger:focus-visible,
.sitenav__mobile-toggle:focus-visible,
.sitenav__section:focus-visible,
.sitenav__drawer-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.sitenav__chevron {
  width: 0.38rem;
  height: 0.38rem;
  margin-top: -0.2rem;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg);
  transition: transform 120ms ease;
}
.sitenav__trigger[aria-expanded="true"] .sitenav__chevron {
  margin-top: 0.15rem;
  transform: rotate(225deg);
}
@media (prefers-reduced-motion: reduce) {
  .sitenav__chevron { transition: none; }
}

.sitenav__menu {
  position: absolute;
  z-index: 80;
  top: calc(100% + 0.5rem);
  left: 0;
  min-width: 13rem;
  margin: 0;
  padding: 0.35rem;
  border: 1px solid var(--rule);
  background: var(--ground-lift);
  box-shadow: 0 0.75rem 2rem var(--shadow-soft);
  list-style: none;
}

.sitenav__section {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.62rem 0.75rem;
  border-left: 2px solid transparent;
  color: var(--ink-muted);
  font-family: var(--serif);
  font-size: 0.94rem;
  text-decoration: none;
}
.sitenav__section:hover { color: var(--ink); background: var(--history-band); }
.sitenav__section--on {
  border-left-color: var(--history-event);
  background: var(--history-band);
  color: var(--ink);
  font-weight: 600;
}
/* Every row has the slot; only the current one has a check in it, so the
   labels stay aligned. */
.sitenav__check {
  display: inline-flex;
  flex: none;
  width: 14px;
}
/* The check is part of the highlighted row, so it takes the row's ink rather
   than `.icon`'s faint default. */
.sitenav__check .icon { color: inherit; }

.sitenav__mobile-toggle,
.sitenav__drawer { display: none; }

/* --- section nav: the current collection --------------------------------
   The global navigation says which body of material is active. This quieter
   second level says what can be done inside it. It is intentionally a bar,
   not another card competing with the page header. */

.sectionbar {
  border-bottom: 1px solid var(--rule);
  background: color-mix(in srgb, var(--ground-lift), var(--ground) 35%);
}
.sectionbar__inner {
  display: flex;
  align-items: stretch;
  min-height: 46px;
  max-width: 100rem;
  margin: 0 auto;
  padding: 0 clamp(0.75rem, 3vw, 2rem);
}
/* The section itself, at the head of its own row. It sits OUTSIDE the
   scrolling nav, so it stays pinned while the tabs scroll beside it, and so
   its menu is not clipped by the nav's overflow. */
.sectionbar__switch {
  position: relative;
  display: flex;
  align-items: center;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 45%;
}
/* Inset from the bar's edges: a divider, not a column. */
.sectionbar__switch::after {
  content: "";
  flex: none;
  width: 1px;
  height: 1.4rem;
  margin-inline: 0.2rem;
  background: var(--rule);
}
/* Set as the row's heading: the serif, larger and brighter than the tabs. */
.sectionbar__heading {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
  padding: 0 0.6rem;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 0.98rem;
  font-weight: 600;
}
.sectionbar__switcher {
  align-self: stretch;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.sectionbar__switcher:hover,
.sectionbar__switcher[aria-expanded="true"] { background: var(--history-band); }
.sectionbar__switcher:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: -2px;
}
/* A long name truncates rather than wrapping the bar onto two lines. */
.sectionbar__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Two classes deep, because `.icon` comes later in this file and would
   otherwise paint it --ink-faint. */
.sectionbar__switcher .sectionbar__chevrons { color: var(--ink-muted); }
.sectionbar__switcher:hover .sectionbar__chevrons,
.sectionbar__switcher[aria-expanded="true"] .sectionbar__chevrons { color: var(--ink); }
/* Opens at the bar's bottom edge; the bucket menus sit inside the top bar's
   padding and need the 0.5rem this one does not. */
.sectionbar__menu { top: calc(100% + 1px); }

.sectionbar__nav {
  flex: 1 1 0;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: thin;
}
.sectionbar__list {
  display: flex;
  align-items: stretch;
  height: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
}
.sectionbar__link {
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
  box-sizing: border-box;
  padding: 0.65rem 0.8rem;
  color: var(--ink-muted);
  font-size: 0.82rem;
  text-decoration: none;
  white-space: nowrap;
}
.sectionbar__link:hover { color: var(--ink); background: var(--history-band); }
.sectionbar__link--on {
  color: var(--ink);
  background: var(--history-band);
  box-shadow: inset 0 -2px 0 var(--history-event);
}
.sectionbar__link:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: -2px;
}
.sectionbar__current {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0.65rem 0.8rem;
  border-left: 1px solid var(--rule);
  color: var(--ink-muted);
  font-size: 0.82rem;
}

/* A path only on descendants: section landing pages already have enough
   navigation. Separators are visual CSS, so screen readers hear the ordered
   list without a repeated "slash" between every item. */
.breadcrumbs {
  box-sizing: border-box;
  width: 100%;
  max-width: 100rem;
  margin: 0 auto;
  padding: 0.65rem clamp(0.75rem, 3vw, 2rem) 0;
}
.breadcrumbs__list {
  display: flex;
  align-items: baseline;
  gap: 0;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--ink-faint);
  font-size: var(--type-label);
  white-space: nowrap;
}
.breadcrumbs__list li {
  display: flex;
  min-width: 0;
  align-items: baseline;
}
.breadcrumbs__list li + li::before {
  content: "/";
  flex: none;
  margin: 0 0.5rem;
  color: var(--rule);
}
.breadcrumbs__list a { color: var(--ink-muted); text-decoration: none; }
.breadcrumbs__list a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 0.18em; }
.breadcrumbs__current {
  overflow: hidden;
  color: var(--ink);
  text-overflow: ellipsis;
}

@media (max-width: 600px) {
  .sitenav {
    justify-content: space-between;
    gap: 1rem;
  }
  .sitenav__buckets { display: none; }
  .sitenav__mobile-toggle {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.35rem 0.15rem 0.35rem 0.55rem;
    border: 0;
    background: transparent;
    color: var(--ink-muted);
    font-family: var(--serif);
    font-size: var(--type-small);
    cursor: pointer;
  }
  .sitenav__toggle-mark,
  .sitenav__toggle-mark::before,
  .sitenav__toggle-mark::after {
    display: block;
    width: 1rem;
    height: 1px;
    background: currentColor;
    content: "";
  }
  .sitenav__toggle-mark { position: relative; }
  .sitenav__toggle-mark::before { position: absolute; top: -0.3rem; }
  .sitenav__toggle-mark::after { position: absolute; top: 0.3rem; }
  .sitenav__mobile-toggle[aria-expanded="true"] .sitenav__toggle-mark { background: transparent; }
  .sitenav__mobile-toggle[aria-expanded="true"] .sitenav__toggle-mark::before {
    top: 0;
    transform: rotate(45deg);
  }
  .sitenav__mobile-toggle[aria-expanded="true"] .sitenav__toggle-mark::after {
    top: 0;
    transform: rotate(-45deg);
  }
  .sitenav__drawer:not([hidden]) {
    position: absolute;
    z-index: 80;
    top: 100%;
    right: 0;
    left: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem 1.5rem;
    max-height: calc(100vh - 3rem);
    overflow-y: auto;
    padding: 1rem clamp(0.75rem, 4vw, 1.25rem) 1.25rem;
    border-bottom: 1px solid var(--rule);
    background: var(--ground-lift);
    box-shadow: 0 0.75rem 2rem var(--shadow-strong);
  }
  .sitenav__drawer-group { min-width: 0; }
  .sitenav__drawer-heading {
    margin: 0 0 0.3rem;
    color: var(--ink-faint);
    font-family: var(--serif);
    font-size: var(--type-label);
    font-variant: small-caps;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }
  .sitenav__drawer-list { margin: 0; padding: 0; list-style: none; }
  .sitenav__drawer-link {
    display: block;
    padding: 0.42rem 0.5rem;
    border-left: 2px solid transparent;
    color: var(--ink-muted);
    font-family: var(--serif);
    font-size: var(--type-small);
    text-decoration: none;
  }
  .sitenav__drawer-link:hover { color: var(--ink); background: var(--history-band); }
  .sitenav__drawer-link--on {
    border-left-color: var(--history-event);
    background: var(--history-band);
    color: var(--ink);
    font-weight: 600;
  }
  .sectionbar__inner { padding-inline: 0; }
  .sectionbar__link { padding-inline: 0.7rem; }
  .sectionbar__heading { padding-inline: 0.7rem 0.5rem; font-size: var(--type-small); }
  /* Tabs scrolled under the pinned switcher fade into its divider instead of
     leaving a sliver of a word against it. Narrower than a tab's padding, so
     an unscrolled first tab's text is untouched. */
  .sectionbar__nav { mask-image: linear-gradient(to right, transparent, black 0.6rem); }
}

/* --- the front door, and the section indexes ---------------------------- */

.home {
  max-width: 76rem;
  margin: 0 auto;
  padding: 2.5rem 1.25rem 4rem;
}

.section-index {
  max-width: 62rem;
  margin: 0 auto;
  padding: 2.5rem 1.25rem 4rem;
}

.home__title {
  margin: 0;
  font-size: 2.4rem;
  letter-spacing: 0.01em;
}

.home__lede,
.section-index__lede {
  max-width: 58ch;
  margin: 0.9rem 0 0;
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--ink-muted);
}

.section-index__introduction {
  max-width: 66ch;
}

.section-index__introduction > p {
  max-width: none;
}

.section-index__introduction > p + p {
  margin-top: 0.7rem;
}

/* Four groups instead of one wall of seventeen. The heading carries the
   bucket's name — the same word the top bar uses — so the front page and the
   bar agree about what kind of thing each section is. */
.home__bucket { margin: 2.25rem 0 0; }
.home__bucket-heading {
  margin: 0 0 0.6rem;
  font-size: var(--type-label);
  font-variant: small-caps;
  letter-spacing: 0.1em;
  font-weight: 400;
  color: var(--ink-faint);
}

.home__sections {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
}
.home__section {
  min-width: 0;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background: var(--ground-lift);
}
.home__section-link {
  display: block;
  box-sizing: border-box;
  min-height: 100%;
  padding: 1.4rem 1.25rem;
  font-size: 1.25rem;
  color: var(--ink);
  text-decoration: none;
  transition: background-color 160ms ease, outline-color 160ms ease,
    transform 160ms ease;
}
.home__section-link:hover,
.home__section-link:focus-visible {
  position: relative;
  z-index: 1;
  background: var(--surface-hover);
  outline: 1px solid var(--accent);
  outline-offset: -1px;
  transform: translateY(-1px);
}
.home__section-link:focus-visible {
  outline-width: 2px;
  outline-offset: -2px;
}
.home__section-heading {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
.home__section-title {
  text-decoration: underline 1px transparent;
  text-underline-offset: 0.18em;
}
.home__section-link:hover .home__section-title,
.home__section-link:focus-visible .home__section-title { text-decoration-color: var(--accent); }
.home__section-tagline {
  display: block;
  margin-top: 0.55rem;
  font-size: var(--type-small);
  line-height: 1.55;
  color: var(--ink-muted);
}

@media (min-width: 600px) {
  .home__sections { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
}
@media (min-width: 900px) {
  .home__sections { grid-template-columns: repeat(auto-fit, minmax(11.5rem, 1fr)); }
}
@media (min-width: 1100px) {
  .home__sections { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
}
@media (min-width: 1380px) {
  .home__sections { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .home__section-link { transition: none; }
  .home__section-link:hover,
  .home__section-link:focus-visible { transform: none; }
}

.home__about {
  max-width: 62ch;
  margin: 3.5rem 0 0;
  padding: 1.5rem 1.6rem;
  border: 1px solid var(--rule);
  border-top-color: var(--accent);
  background: var(--ground-lift);
}
.home__method-kicker {
  margin: 0 0 0.25rem !important;
  color: var(--accent);
  font-size: var(--type-label);
  font-variant: small-caps;
  letter-spacing: 0.1em;
}
.home__heading,
.section-index__heading {
  margin: 0 0 0.9rem;
  font-size: 0.82rem;
  font-variant: small-caps;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
}
.home__about .home__heading {
  margin-bottom: 1rem;
  color: var(--ink);
  font-size: 1.08rem;
  font-variant: normal;
  letter-spacing: 0.02em;
}
.home__about .home__heading .icon { color: var(--accent); }
.home__about p { margin: 0 0 0.9rem; line-height: 1.7; }
.home__steps { margin: 0 0 1.4rem; padding: 0; list-style: none; counter-reset: home-step; }
.home__steps li {
  display: grid;
  grid-template-columns: 1.75rem 1fr;
  gap: 0.15rem 0.7rem;
  padding: 0.7rem 0;
  border-top: 1px solid var(--rule);
  counter-increment: home-step;
}
.home__steps li:last-child { border-bottom: 1px solid var(--rule); }
.home__steps li::before {
  content: counter(home-step);
  grid-row: 1 / span 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border: 1px solid var(--rule);
  border-radius: 50%;
  color: var(--ink-faint);
  font-size: var(--type-label);
}
.home__steps strong { font-weight: 500; }
.home__steps span { grid-column: 2; color: var(--ink-muted); font-size: var(--type-small); line-height: 1.55; }
.home__figures {
  margin: 1.5rem 0 0;
  font-size: var(--type-small);
  color: var(--ink-faint);
}
.home__legend-heading {
  margin: 1.35rem 0 0;
  color: var(--ink);
  font-size: var(--type-small);
  font-weight: 500;
  letter-spacing: 0.02em;
}

.section-index__kicker {
  margin: 0;
  font-size: 0.8rem;
  font-variant: small-caps;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
}
.section-index__title { margin: 0.2rem 0 0; font-size: 2rem; }
.section-index__block { margin: 2.75rem 0 0; }

.section-index__feature {
  margin: 1.75rem 0 0;
  border: 1px solid var(--rule);
  background: var(--ground-lift);
}
.section-index__feature-link {
  display: flex;
  gap: 1rem;
  padding: 1.2rem;
  color: var(--ink);
  text-decoration: none;
}
.section-index__feature-link:hover,
.section-index__feature-link:focus-visible { background: var(--ground); }
.section-index__feature-link:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.section-index__feature-icon {
  display: grid;
  flex: 0 0 3rem;
  width: 3rem;
  height: 3rem;
  place-items: center;
  border: 1px solid var(--rule);
  color: var(--ink-muted);
}
.section-index__feature-copy { min-width: 0; }
.section-index__feature-kicker,
.section-index__feature-summary,
.section-index__feature-action { display: block; }
.section-index__feature-kicker {
  color: var(--ink-faint);
  font-size: var(--type-label);
  font-variant: small-caps;
  letter-spacing: 0.08em;
}
.section-index__feature-title { margin: 0.1rem 0 0; font-size: 1.25rem; font-weight: 400; }
.section-index__feature-summary {
  max-width: 64ch;
  margin-top: 0.45rem;
  color: var(--ink-muted);
  font-size: var(--type-small);
  line-height: 1.6;
}
.section-index__feature-action { margin-top: 0.65rem; font-size: 0.82rem; text-decoration: underline; }

.tree-cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.25rem;
}
@media (min-width: 760px) {
  .tree-cards { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
}

.tree-card {
  border: 1px solid var(--rule);
  padding: 1.1rem 1.1rem 1.25rem;
}
.tree-card__link { text-decoration: none; display: block; }
.tree-card__family {
  display: block;
  font-size: var(--type-label);
  font-variant: small-caps;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
}
.tree-card__name {
  display: block;
  margin-top: 0.15rem;
  font-size: 1.2rem;
  color: var(--ink);
}
.tree-card__link:hover .tree-card__name,
.tree-card__link:focus-visible .tree-card__name { text-decoration: underline; }
.tree-card__summary {
  margin: 0.7rem 0 0;
  font-size: var(--type-small);
  line-height: 1.6;
  color: var(--ink-muted);
}
.tree-card__facts {
  list-style: none;
  margin: 0.9rem 0 0;
  padding: 0.8rem 0 0;
  border-top: 1px solid var(--rule);
  /* Mostly counts — "22 lettered paths" — but one of them is a sentence:
     "No paths — Jewish Kabbalah declines to pick an arrangement". */
  font-size: var(--type-small);
  color: var(--ink-faint);
}
.tree-card__facts li { margin: 0 0 0.25rem; }

.section-index__links { list-style: none; margin: 0; padding: 0; }
.section-index__links li {
  padding: 0.9rem 0;
  border-top: 1px solid var(--rule);
}
.section-index__links li:last-child { border-bottom: 1px solid var(--rule); }
.section-index__links a { font-size: 1rem; }
.section-index__links span {
  display: block;
  margin-top: 0.25rem;
  max-width: 62ch;
  font-size: var(--type-small);
  line-height: 1.6;
  color: var(--ink-muted);
}

@media (max-width: 520px) {
  .section-index__feature-link { gap: 0.75rem; padding: 1rem; }
  .section-index__feature-icon { flex-basis: 2.5rem; width: 2.5rem; height: 2.5rem; }
}

/* --- icons --------------------------------------------------------------- */

.icon {
  flex: none;
  vertical-align: -0.15em;
  color: var(--ink-faint);
}
/* An icon in a heading takes the heading's colour, because there it is part of
   the label rather than a marker beside it. */
h1 .icon, h2 .icon, h3 .icon { color: inherit; }

/* --- panels, badges and fact strips --------------------------------------
   The shadcn component anatomy — a card with a header and a body, a badge, a
   separator — in this site's own palette. What was wanted from shadcn is the
   STRUCTURE: a page made of bounded things instead of one column of prose. */

.panel {
  border: 1px solid var(--rule);
  background: var(--ground-lift);
  padding: 1.1rem 1.2rem 1.25rem;
  margin: 0 0 1.25rem;
}
.panel__head {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0 0 0.7rem;
}
.panel__title { margin: 0; font-size: 1.02rem; }
.panel__body { margin: 0; max-width: 68ch; line-height: 1.7; }
.panel__body p { margin: 0 0 0.8rem; }
.panel__body p:last-child { margin-bottom: 0; }

.panel-grid {
  display: grid;
  gap: 1.25rem;
  margin: 0 0 1.5rem;
}
@media (min-width: 820px) {
  .panel-grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .panel-grid--two > .panel { margin: 0; }
}

/* A TABLE THAT DOES NOT FIT SCROLLS INSIDE ITS OWN BOX, never by taking the
   page sideways. `/geomancy/method` was the one page on the site that scrolled
   horizontally on a phone, and raising the type floor made it worse — sixteen
   columns of dots is simply wider than 375px. Focusable, because a region that
   scrolls and cannot be focused is one a keyboard user cannot see the right of. */
.table-scroll { overflow-x: auto; }
.table-scroll:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.12rem 0.5rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-size: var(--type-label);
  letter-spacing: 0.02em;
  color: var(--ink-muted);
  white-space: nowrap;
}
.badge--quiet { border-color: transparent; padding-left: 0; }

/* A row of short facts, so the numbers stop being sentences. */
.facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.6rem;
  margin: 1rem 0 0;
  padding: 0.85rem 0 0;
  border-top: 1px solid var(--rule);
  list-style: none;
}
.facts li { margin: 0 0 0.5rem; }
.facts__label {
  display: block;
  font-size: var(--type-label);
  font-variant: small-caps;
  letter-spacing: 0.07em;
  color: var(--ink-faint);
}
.facts__value { display: block; font-size: 0.95rem; }

/* --- folds and timelines -------------------------------------------------- */

.fold { margin: 0.7rem 0 0; border-top: 1px solid var(--rule); padding-top: 0.6rem; }
.fold__summary {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 24px;
  font-size: 0.82rem;
  color: var(--ink-muted);
  cursor: pointer;
}
.fold__summary:hover { color: var(--ink); }
.fold[open] .fold__summary { color: var(--ink); margin-bottom: 0.5rem; }
.fold__body {
  margin: 0;
  max-width: 66ch;
  font-size: var(--type-small);
  line-height: 1.65;
  color: var(--ink-muted);
}

.timeline {
  margin: 0 0 2.5rem;
  padding: 1rem 0.5rem;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.timeline__svg { width: 100%; height: auto; }
.timeline__rule { stroke: var(--rule); stroke-width: 0.4; }
.timeline__tick { stroke: var(--rule); stroke-width: 0.3; }
.timeline__dot { fill: var(--ground); stroke: var(--ink-faint); stroke-width: 0.5; }
/* The one stretch of the line nobody can account for. */
.timeline__gap {
  stroke: var(--ink-faint);
  stroke-width: 0.8;
  stroke-dasharray: 1.5 1.5;
  fill: none;
}
.timeline__label { font-size: 3.2px; fill: var(--ink); }
.timeline__when { font-size: 2.6px; fill: var(--ink-faint); }
.timeline figcaption {
  margin: 0.6rem 0 0;
  max-width: 62ch;
  font-size: 0.82rem;
  color: var(--ink-faint);
}

.home__section-icon { color: var(--ink-faint); }
.home__section-link:hover .home__section-icon,
.home__section-link:focus-visible .home__section-icon { color: var(--accent); }
.home__heading .icon,
.section-index__heading .icon { margin-right: 0.3rem; }

.statuses { margin: 0.65rem 0 0; }
.statuses > div {
  display: grid;
  gap: 0.35rem 1rem;
  padding: 0.72rem 0;
  border-top: 1px solid var(--rule);
}
@media (min-width: 520px) {
  .statuses > div { grid-template-columns: 9.5rem minmax(0, 1fr); align-items: center; }
}
.statuses > div:last-child { border-bottom: 1px solid var(--rule); }
.statuses dt { margin: 0; }
.statuses dd { margin: 0; font-size: var(--type-small); line-height: 1.55; color: var(--ink-muted); }
.home-status {
  min-width: 7.6rem;
  justify-content: flex-start;
  border-color: var(--rule);
  border-radius: 2px;
  background: var(--ground);
  color: var(--ink);
}
.home-status .icon { color: var(--accent); }

/* --- on this page --------------------------------------------------------
   The shadcn sidebar pattern, adapted to a server-rendered reading site: one
   quiet rail with a grouped menu on wide screens, one disclosure trigger on
   narrow ones. It is navigation, never a second copy of the page. */

.onpage__disclosure { position: relative; }
.onpage__trigger {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 44px;
  padding: 0.55rem 0.75rem;
  list-style: none;
  border: 1px solid var(--rule);
  border-radius: 0.5rem;
  background: color-mix(in srgb, var(--ground-lift), transparent 4%);
  cursor: pointer;
}
.onpage__trigger::-webkit-details-marker { display: none; }
.onpage__label,
.onpage__desktop-label {
  display: block;
  margin: 0;
  color: var(--ink-faint);
  font-size: var(--type-label);
  font-variant: small-caps;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.onpage__current { display: block; margin-top: 0.05rem; color: var(--ink); font-size: var(--type-small); }
.onpage__chevron {
  width: 0.45rem;
  height: 0.45rem;
  border-right: 1.5px solid var(--ink-muted);
  border-bottom: 1.5px solid var(--ink-muted);
  transform: rotate(45deg) translateY(-0.15rem);
  transition: transform 150ms ease;
}
.onpage__disclosure[open] .onpage__chevron { transform: rotate(225deg) translate(-0.1rem, -0.05rem); }
.onpage__content {
  padding: 0.8rem;
  border: 1px solid var(--rule);
  border-radius: 0.65rem;
  background: var(--ground-lift);
  box-shadow: 0 1rem 2rem var(--shadow-soft);
}
.onpage__desktop-label { margin: 0 0.45rem 0.55rem; }
.onpage__groups { display: grid; gap: 0.25rem; }
.onpage__group {
  border-top: 1px solid color-mix(in srgb, var(--rule), transparent 30%);
}
.onpage__group:first-child { border-top: 0; }
.onpage__group > summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 34px;
  padding: 0.4rem 0.5rem;
  color: var(--ink-muted);
  cursor: pointer;
  font-size: var(--type-label);
  font-weight: 600;
  letter-spacing: 0.025em;
  list-style: none;
}
.onpage__group > summary::-webkit-details-marker { display: none; }
.onpage__group > summary::before {
  content: "";
  width: 0.35rem;
  height: 0.35rem;
  flex: none;
  border-right: 1.5px solid var(--ink-faint);
  border-bottom: 1.5px solid var(--ink-faint);
  transform: rotate(-45deg);
  transition: transform 150ms ease;
}
.onpage__group[open] > summary::before { transform: rotate(45deg); }
.onpage__group > summary:hover { color: var(--ink); }
.onpage__group-count {
  margin-left: auto;
  color: var(--ink-faint);
  font-size: var(--type-label);
  font-variant-numeric: tabular-nums;
}
.onpage__group .onpage__list { padding: 0 0 0.3rem 0.35rem; }
.onpage__list { list-style: none; margin: 0; padding: 0; }
.onpage__list li + li { margin-top: 0.12rem; }
.onpage__list a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.65rem;
  min-height: 32px;
  padding: 0.34rem 0.55rem;
  border-radius: 0.4rem;
  color: var(--ink-muted);
  font-size: var(--type-small);
  line-height: 1.35;
  text-decoration: none;
}
.onpage__list a:hover { color: var(--ink); background: var(--history-band); }
.onpage__link--here {
  color: var(--ink) !important;
  background: var(--history-band);
  box-shadow: inset 2px 0 0 var(--history-event);
}
.onpage__count { flex: none; color: var(--ink-faint); font-size: var(--type-label); font-variant-numeric: tabular-nums; }

@media (min-width: 1180px) {
  main.has-onpage {
    box-sizing: border-box;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 14rem;
    column-gap: clamp(2rem, 4vw, 4rem);
    max-width: 88rem;
  }
  main.has-onpage > :not(.onpage) { grid-column: 1; }
  main.has-onpage > .onpage {
    position: sticky;
    top: 1rem;
    z-index: 8;
    grid-column: 2;
    grid-row: 2 / span 999;
    align-self: start;
    min-width: 0;
  }
  .onpage__content {
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    box-shadow: none;
    scrollbar-width: thin;
  }
  .onpage__disclosure:not([open]) > .onpage__content { display: block; }
}

@media (max-width: 1179px) {
  .onpage {
    position: sticky;
    top: 0.5rem;
    z-index: 30;
    margin: 1rem 0 1.5rem;
  }
  .onpage__trigger { display: flex; }
  .onpage__content {
    position: absolute;
    inset: calc(100% + 0.4rem) 0 auto;
    max-height: min(65vh, 28rem);
    overflow-y: auto;
  }
  .onpage__desktop-label { display: none; }
}

/* A section a contents bar can land on has to clear the bar when it does. */
[id] { scroll-margin-top: 3.5rem; }
/* And so does the map: scrolled flush to the top, its first forty pixels sat
   under the bar, where a drag to choose a region was landing on the bar
   instead of on the canvas. */
.atlas__canvas, .atlas { scroll-margin-top: 4.5rem; }

/* --- folded sections -----------------------------------------------------
   Fold ASIDES, never the thing the page is about. A summary says what is
   inside and how much of it, so folding hides the prose and not the fact
   that the prose exists. */

.fold--section {
  border: 1px solid var(--rule);
  border-radius: 0.65rem;
  background: var(--ground-lift);
  margin: 0 0 0.85rem;
  overflow: clip;
}
.fold--section > summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.8rem 1rem;
  min-height: 44px;
  cursor: pointer;
  list-style: none;
}
.fold--section > summary::-webkit-details-marker { display: none; }
.fold--section > summary::before {
  content: "";
  flex: none;
  width: 0.42rem;
  height: 0.42rem;
  margin: 0 0.15rem 0.15rem 0;
  border-right: 1.5px solid var(--ink-faint);
  border-bottom: 1.5px solid var(--ink-faint);
  transform: rotate(-45deg);
  transition: transform 150ms ease;
}
.fold--section[open] > summary::before { transform: rotate(45deg); border-color: var(--ink); }
.fold--section > summary:hover { background: var(--history-band); }
.fold--section[open] > summary { border-bottom: 1px solid var(--rule); }
.fold--section__title { flex: 1; font-weight: 600; }
.fold--section__note { color: var(--ink-faint); font-size: var(--type-small); text-align: right; }
.fold--section__body { padding: 1rem; }

@media (max-width: 560px) {
  .fold--section > summary { align-items: flex-start; flex-wrap: wrap; gap: 0.35rem 0.55rem; }
  .fold--section__note { flex-basis: calc(100% - 1rem); margin-left: 1rem; text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  .onpage__chevron,
  .fold--section > summary::before { transition: none; }
}

/* ---------------------------------------------------------------- Search
   The box sits at the right-hand end of the top bar on every page. `margin-
   left: auto` rather than a grid: the bar is a flex row whose items vary in
   number, and pushing the last one right is the whole requirement. */
.sitesearch {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-left: auto;
}
.sitesearch__field { position: relative; display: flex; align-items: center; }
.sitesearch__icon {
  position: absolute;
  left: 0.5rem;
  display: inline-flex;
  color: var(--ink-faint);
  pointer-events: none;
}
.sitesearch__icon .icon { width: 15px; height: 15px; }
.sitesearch__input {
  width: 11rem;
  padding: 0.3rem 0.5rem 0.3rem 1.85rem;
  border: 1px solid var(--rule);
  border-radius: 3px;
  background: var(--ground);
  color: var(--ink);
  font-family: inherit;
  font-size: var(--type-small);
  transition: width 0.18s ease, border-color 0.18s ease;
}
.sitesearch__input::placeholder { color: var(--ink-faint); }
.sitesearch__input:focus {
  width: 14rem;
  border-color: var(--ink-muted);
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.sitesearch__input:focus-visible { border-color: var(--ink); }
.sitesearch__scope {
  padding: 0.3rem 0.35rem;
  border: 1px solid var(--rule);
  border-radius: 3px;
  background: var(--ground);
  color: var(--ink-muted);
  font-family: inherit;
  font-size: 0.8rem;
  max-width: 11rem;
}
.sitesearch__submit {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.45rem;
  border: 1px solid var(--rule);
  border-radius: 3px;
  background: transparent;
  color: var(--ink-muted);
  cursor: pointer;
}
.sitesearch__submit:hover { color: var(--ink); border-color: var(--ink-muted); }

/* On the results page the same partial runs wide, under the heading. */
.sitesearch--page { margin: 1rem 0 0; flex-wrap: wrap; }
.sitesearch--page .sitesearch__input { width: min(26rem, 100%); font-size: 1rem; padding: 0.55rem 0.7rem 0.55rem 2.2rem; }
.sitesearch--page .sitesearch__input:focus { width: min(26rem, 100%); }
.sitesearch--page .sitesearch__icon { left: 0.7rem; }
.sitesearch--page .sitesearch__icon .icon { width: 18px; height: 18px; }
.sitesearch--page .sitesearch__scope { padding: 0.55rem 0.5rem; font-size: var(--type-small); }
.sitesearch--page .sitesearch__submit { padding: 0.55rem 0.7rem; }

.search-page__summary { margin: 0.9rem 0 0; max-width: 68ch; line-height: 1.65; color: var(--ink-muted); }
.search-page__prose { margin: 1rem 0 0; max-width: 68ch; line-height: 1.7; }

/* Where the matches are. Not a menu and not tabs — a list of links that each
   narrow the same search, so the current one is marked by an underline and
   aria-current rather than by fill, which at --ground-lift is invisible. */
.search-facets { margin: 1.4rem 0 0; padding: 0.9rem 0 0; border-top: 1px solid var(--rule); }
.search-facets__label {
  margin: 0 0 0.5rem; font-size: var(--type-label); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-faint);
}
.search-facets__list { display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem; margin: 0; padding: 0; list-style: none; }
.search-facets__item {
  display: inline-flex; align-items: baseline; gap: 0.35rem;
  padding: 0.15rem 0; border-bottom: 2px solid transparent;
  font-size: var(--type-small); text-decoration: none;
}
.search-facets__item--on { border-bottom-color: var(--accent, #c9a227); color: var(--ink); }
.search-facets__count { color: var(--ink-faint); font-size: var(--type-label); }

.search-results { margin: 1.6rem 0 0; padding: 0; list-style: none; }
.search-result { padding: 1.1rem 0; border-top: 1px solid var(--rule); max-width: 72ch; }
.search-result__where {
  margin: 0 0 0.2rem; display: flex; flex-wrap: wrap; gap: 0.5rem;
  font-size: var(--type-label); letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-faint);
}
.search-result__kind { color: var(--ink-muted); }
.search-result__title { margin: 0; font-size: 1.05rem; }
.search-result__subtitle { margin: 0.2rem 0 0; color: var(--ink-muted); font-size: var(--type-small); }
.search-result__snippet { margin: 0.4rem 0 0; line-height: 1.65; color: var(--ink-muted); }
/* The match itself. A wash that faint is about as visible as the lift, which
   is 1.05:1 against the ground, so the mark carries weight and ink too. */
.search-result__snippet mark {
  background: color-mix(in srgb, var(--accent, #c9a227) 22%, transparent);
  color: var(--ink);
  font-weight: 600;
  padding: 0 0.1em;
  border-radius: 2px;
}
.search-result__path { margin: 0.35rem 0 0; font-size: var(--type-label); color: var(--ink-faint); word-break: break-word; }

.search-pager {
  display: flex; align-items: center; gap: 1.2rem;
  margin: 1.8rem 0 0; padding: 1rem 0 0; border-top: 1px solid var(--rule);
}
.search-pager__where { color: var(--ink-faint); font-size: var(--type-small); }

/* A phone has room for the field or the scope, not both. The scope stays in
   the form as a select the reader can still reach on the results page, where
   there is room for it; in the bar it would squeeze the field to nothing. */
/* ------------------------------------------------------- the theme switch
   Two pillars and a thumb, at the right-hand end of the bar. The reader is
   choosing between a black page and a white one, so the control shows them
   both and marks which is in force — a switch whose two states are a colour
   each has no business describing itself in words.

   THE PILLARS KEEP THEIR OWN COLOURS IN BOTH THEMES. They are a legend for
   what the switch chooses between, not chrome that follows the palette: a
   white pillar that went cream in the light theme would stop naming the thing
   it selects. That is why they are written out here rather than taken from a
   token — the same reason `.card-zoom__close` in tarot.css keeps its white
   ink, which sits on a scrim that is dark in both themes. A black or white
   literal is right exactly when what it sits on does not change.

   The thumb is placed from `html[data-theme]` and never from `aria-checked`,
   so it is already in the right place when the inline script in the head has
   run and before theme.js exists — the control cannot flash the wrong state
   on a cold load. */
.themeswitch {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 2.5.8: the padding is what carries this to a 24px target, since the track
     itself is 22px high. density.spec.mjs measures the button, not the track. */
  min-width: 28px;
  min-height: 28px;
  padding: 0.2rem;
  margin-left: 0.9rem;
  border: 0;
  border-radius: 3px;
  background: none;
  cursor: pointer;
}
.themeswitch:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.themeswitch__track {
  position: relative;
  display: flex;
  gap: 2px;
  width: 44px;
  height: 22px;
  padding: 2px;
  border: 1px solid var(--rule);
  border-radius: 3px;
  background: var(--ground);
}

.themeswitch__pillar {
  flex: 1 1 50%;
  border-radius: 1px;
}
.themeswitch__pillar--dark { background: #000; }
.themeswitch__pillar--light { background: #fff; }

/* THE MARKER IS A RING AND NOT A BLOCK, so that both pillars stay visible.
   Filled, it covered the pillar it was marking, and the control then read as a
   black square beside a gold one — which names neither of the things it is
   choosing between. The whole point is to show the reader the pair.
   The accent clears the 3:1 a non-text indicator owes against both halves of a
   21:1 pair, in both themes: 6.48:1 on black and 3.24:1 on white in the dark
   theme, 3.45:1 and 6.09:1 in the light one, where the darker gold trades the
   two around. */
.themeswitch__thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 21px;
  height: 22px;
  /* This stylesheet is content-box, so without this the 2px ring would make the
     marker 4px wider than the pillar it is drawn around. */
  box-sizing: border-box;
  border: 2px solid var(--accent);
  border-radius: 2px;
  transition: transform 140ms ease;
}

/* No attribute, or an explicit dark one, leaves the thumb over the black
   pillar; this is the only rule that moves it. */
:root[data-theme="light"] .themeswitch__thumb { transform: translateX(23px); }

/* The house rule: jump rather than animate. The thumb's position is the
   information and the slide is only the decoration. */
@media (prefers-reduced-motion: reduce) {
  .themeswitch__thumb { transition: none; }
}

/* Between the phone and a wide desktop the bar holds a longer name, four
   buckets, the Interactive menu AND the search box, which together ran 233px
   past a 768px viewport. It WRAPS instead of squeezing: the navigation keeps
   the first row and the search takes the second, which is what the phone
   already does one breakpoint down. Squeezing the field would have given a
   search box too narrow to read what you had typed into it. */
@media (max-width: 1180px) {
  .sitenav { flex-wrap: wrap; row-gap: 0.45rem; }
  .sitenav .sitesearch { order: 3; flex: 1 1 100%; margin-left: 0; }
  .sitenav .sitesearch__field { flex: 1 1 auto; }
  .sitenav .sitesearch__input { width: 100%; }
  .sitenav .sitesearch__input:focus { width: 100%; }
}

@media (max-width: 860px) {
  .sitenav .sitesearch__scope { display: none; }
}
@media (max-width: 600px) {
  /* The drawer carries the same nine, so the trigger here would be a third
     row of chrome above the content for a list already one tap away. Hidden
     exactly as `.sitenav__buckets` is, and for the same reason. */
  .sitenav__interactive { display: none; }
  /* Same reason, same breakpoint: the drawer carries About too. */
  .sitenav__standalone { display: none; }
  /* With the buckets, Interactive and About all gone from this row and the
     search on its own below, the switch is the only thing left to sit at the
     right-hand end, and there is no longer an auto margin ahead of it. */
  .sitenav .themeswitch { margin-left: auto; }
  .sitenav .sitesearch { margin-left: 0; order: 3; flex: 1 1 100%; }
  .sitenav .sitesearch__input { width: 100%; }
  .sitenav .sitesearch__input:focus { width: 100%; }
  .sitenav { flex-wrap: wrap; row-gap: 0.5rem; }
  .sitesearch--page { flex-wrap: wrap; }
  /* The field takes the first row; the scope and the submit share the second.
     `1 1 100%` on the scope pushed the button onto a third row of its own. */
  .sitesearch--page .sitesearch__field { flex: 1 1 100%; }
  .sitesearch--page .sitesearch__scope { flex: 1 1 auto; max-width: none; }
}

/* ------------------------------------------------- Interactive: the top bar
   A fifth trigger beside the four buckets, set apart by a rule rather than by
   a colour, because it is a different KIND of thing — those four are where
   the material is filed, this is what you can do with it. */
.sitenav__interactive {
  position: relative;
  padding-left: 0.75rem;
  margin-left: 0.25rem;
  border-left: 1px solid var(--rule);
}
.sitenav__menu--interactive { min-width: 15rem; }

/* -------------------------------------------------- Standalone: the top bar
   Sections with no bucket, at the far right beside the search. The list takes
   the free space so the search sits against it rather than drifting away from
   it, which means the auto margin moves here and the search gives its up. A
   quiet link, not a trigger: it leads to one page and opens nothing. */
.sitenav__standalone {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin: 0 0 0 auto;
  padding: 0;
  list-style: none;
}
.sitenav__standalone + .sitesearch { margin-left: 0.9rem; }
.sitenav__standalone-link {
  color: var(--ink-muted);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  text-decoration: none;
  padding: 0.3rem 0;
  border-bottom: 2px solid transparent;
}
.sitenav__standalone-link:hover { color: var(--ink); }
/* The house rule: a current choice is never marked by fill alone. */
.sitenav__standalone-link[aria-current] {
  color: var(--ink);
  border-bottom-color: var(--accent);
}

/* ----------------------------------------------- Interactive: the front page */
.home__interactive { margin: 2.6rem 0 0; padding: 1.6rem 0 0; border-top: 1px solid var(--rule); }
.home__interactive-lede { margin: 0.6rem 0 0; max-width: 62ch; line-height: 1.7; color: var(--ink-muted); }
.home__interactive-group { margin: 1.6rem 0 0; }
.home__interactive-kind {
  margin: 0 0 0.7rem; font-size: var(--type-label); letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--ink-faint); font-weight: 400;
}
.home__interactive-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 0.6rem;
  margin: 0; padding: 0; list-style: none;
}
.home__interactive-link {
  display: block; height: 100%;
  padding: 0.9rem 1rem;
  border: 1px solid var(--rule);
  border-radius: 4px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.home__interactive-link:hover,
.home__interactive-link:focus-visible { border-color: var(--ink-muted); background: var(--ground-lift); }
.home__interactive-heading { display: flex; align-items: center; gap: 0.55rem; }
.home__interactive-icon { color: var(--ink-faint); flex: none; }
.home__interactive-link:hover .home__interactive-icon { color: var(--ink-muted); }
.home__interactive-title { font-family: var(--serif); font-size: 1rem; }
/* The title is the link; the underline goes on it rather than on the whole
   card, which would draw a rule under three lines of description. */
.home__interactive-link:hover .home__interactive-title,
.home__interactive-link:focus-visible .home__interactive-title { text-decoration: underline; }
.home__interactive-does {
  display: block; margin: 0.35rem 0 0;
  font-size: var(--type-small); line-height: 1.6; color: var(--ink-muted);
}