/* The header trail: Wayfinder, the volume, then the book. The directory and the reader share it. */
.crumbs{flex:1;min-width:0}
.crumbs ol{display:flex;flex-wrap:wrap;align-items:center;margin:0;padding:0;list-style:none;color:var(--muted);font:700 17px/1.2 var(--serif);letter-spacing:1.2px;text-transform:uppercase}
.crumbs>ol>li{display:flex;align-items:center;min-width:0}
.crumbs>ol>li[hidden]{display:none}
/* A crumb with a later crumb in view carries the separator. */
.crumbs>ol>li:has(~li:not([hidden]))::after{content:"›";margin:0 10px;font-weight:400}
.crumbs a{padding:8px 0;color:inherit;text-decoration:none;border-radius:4px}
.crumbs a:hover{color:var(--cyan)}
.crumbs a:focus-visible,.crumbs .crumb-trigger:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
.crumbs>ol>li>[aria-current=page]{padding:8px 0;color:#fff}
/* The book crumb opens the list of the other books. */
.crumbs .crumb-trigger{display:flex;align-items:center;gap:6px;min-width:0;min-height:36px;margin-left:-8px;padding:4px 8px;color:#fff;background:transparent;border:1px solid transparent;border-radius:7px;font:inherit;letter-spacing:inherit;text-transform:inherit;white-space:nowrap;cursor:pointer}
.crumbs .crumb-trigger:hover,.crumbs .crumb-trigger[aria-expanded=true]{background:#062441;border-color:#37617e}
.crumb-trigger svg{flex:none}
.crumb-menu{position:fixed;letter-spacing:0;text-transform:none;inset:auto;min-width:200px;margin:0;padding:6px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#37617e #062441;list-style:none;border:1px solid #37617e;border-radius:10px;background:#062441;color:var(--ink);box-shadow:0 12px 32px #0008}
.crumb-menu a{display:block;padding:9px 12px;color:inherit;text-decoration:none;border:1px solid transparent;border-radius:5px;font:15px/20px var(--sans)}
.crumb-menu a:hover{background:#103b59}
.crumb-menu a[aria-current=page]{background:#124766;color:#b9f1ff}
.crumb-menu a:focus{outline:none;border-color:var(--cyan);background:#124766}
/* On a narrow screen the last crumb takes its own line below the smaller parent crumbs. */
@media(max-width:650px){.crumbs ol{font-size:11px;letter-spacing:1px}.crumbs>ol>li:has(~li:not([hidden]))::after{margin:0 7px}.crumbs>ol>li>a,.crumbs>ol>li>[aria-current=page]{padding:3px 0}.crumbs>ol>li:not(:has(~li:not([hidden]))){flex-basis:100%;font-size:16px}.crumbs .crumb-trigger{min-height:30px;padding:2px 6px;margin-left:-7px}}