/* The way back from a side quest: a slim bar at the top of each quest page, and a "where next" block at its end.
   Shared by the three quest pages, which otherwise each carry their own look, so it brings its own colours and fonts
   and names everything qbar- / qend- to keep clear of theirs. The bar scrolls away as you read down and slides back
   in, pinned to the top, as soon as you scroll up (questbar.js). */
.qbar, .qend {
  --qb-bg: rgba(9, 12, 11, 0.9);
  --qb-ink: #ede6d3;
  --qb-ink-2: #c9c1ac;
  --qb-muted: #8f978f;
  --qb-hair: rgba(237, 230, 211, 0.14);
  --qb-gold: #e2bd6b;
  box-sizing: border-box;
  font-family: "IBM Plex Sans Condensed", "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.qbar *, .qend * { box-sizing: border-box; }

.qbar {
  position: sticky; top: 0; z-index: 45;
  display: flex; align-items: center; gap: 6px 14px;
  min-height: 46px; margin: 0 0 8px;
  padding: max(6px, env(safe-area-inset-top, 0px)) max(14px, env(safe-area-inset-right, 0px)) 6px max(14px, env(safe-area-inset-left, 0px));
  background: var(--qb-bg); color: var(--qb-ink-2);
  border-bottom: 1px solid var(--qb-hair);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  font-size: 14px; line-height: 1.2;
  transition: transform 0.28s ease;
}
/* scrolled down and away; it comes back when the reader scrolls up */
.qbar.qbar-away { transform: translateY(calc(-100% - 2px)); }
.qbar.qbar-quiet { transition: none; }
@media (prefers-reduced-motion: reduce) { .qbar { transition: none; } }

.qbar a { display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 4px 8px; border-radius: 8px; color: inherit; text-decoration: none; white-space: nowrap; }
.qbar a:hover { color: var(--qb-ink); background: rgba(237, 230, 211, 0.07); }
.qbar a:focus-visible, .qend a:focus-visible { outline: 2px solid var(--qb-gold); outline-offset: 2px; }
.qbar svg { flex: none; width: 16px; height: 16px; }
.qbar-home { color: var(--qb-ink) !important; font-family: "Cinzel", Georgia, serif; font-weight: 600; letter-spacing: 0.06em; }
.qbar-home svg { width: 22px; height: 22px; }
.qbar-home .m-sun { fill: #e2bd6b; } .qbar-home .m-shade { fill: #0b0f0e; } .qbar-home .m-ridge { fill: none; stroke: #86b896; stroke-width: 4; stroke-linejoin: round; }
.qbar-sep { width: 1px; height: 20px; background: var(--qb-hair); }
.qbar-pos { margin-left: auto; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--qb-gold); white-space: nowrap; }
.qbar-step { color: var(--qb-muted) !important; }
.qbar-step b { font-weight: 500; color: var(--qb-ink-2); }
.qbar-step.off { visibility: hidden; }

.qbar-short { display: none; }
/* a page that pads its body (Wu Wei) sets --qbar-bleed, so the bar still runs edge to edge */
.qbar:not(.qbar-inline) { margin-left: calc(-1 * var(--qbar-bleed-l, 0px)); margin-right: calc(-1 * var(--qbar-bleed-r, 0px)); }

/* a phone: the mark, the way back, and arrows between the quests */
@media (max-width: 720px) {
  .qbar { gap: 2px; padding-left: max(8px, env(safe-area-inset-left, 0px)); padding-right: max(8px, env(safe-area-inset-right, 0px)); }
  .qbar-home span, .qbar-step span, .qbar-sep, .qbar-long { display: none; }
  .qbar-short { display: inline; }
  .qbar-pos { font-size: 10px; letter-spacing: 0.1em; }
  .qbar-step { padding: 4px 6px; }
}

/* on the essay page the site's own header is already pinned above, so the bar sits in the essay's heading instead */
.qbar.qbar-inline {
  position: static; z-index: auto; min-height: 0; margin: 0 0 22px; padding: 0;
  background: none; border: 0; -webkit-backdrop-filter: none; backdrop-filter: none; color: var(--ink-2, #c9c1ac);
}
.qbar.qbar-inline a { margin-left: -8px; }
.qbar.qbar-inline a:hover { color: var(--ink, #ede6d3); background: none; }
.qbar.qbar-inline .qbar-step { color: var(--ink-2, #c9c1ac) !important; }
.qbar.qbar-inline .qbar-step b { color: var(--gold-ink, #e2bd6b); }
.qbar.qbar-inline a + .qbar-pos { margin-left: 8px; }
.qbar.qbar-inline .qbar-pos { margin-left: auto; }
:root[data-theme="light"] .qbar-inline .qbar-pos { color: var(--gold-ink, #8a6a1f); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .qbar-inline .qbar-pos { color: var(--gold-ink, #8a6a1f); } }

/* the end of a quest */
.qend {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px;
  margin: 56px 0 28px;   /* as wide as the page's own column */
}
/* on the essay page it sits outside the page's column, so it takes the column's measure itself */
main > .qend {
  box-sizing: content-box; max-width: var(--maxw, 1200px); margin-left: auto; margin-right: auto;
  padding-left: var(--gutter, 20px); padding-right: var(--gutter, 20px);
}
.qend a {
  display: grid; gap: 4px; padding: 16px 18px;
  border: 1px solid var(--qb-hair); border-radius: 12px;
  background: rgba(9, 12, 11, 0.55); color: var(--qb-ink);
  text-decoration: none; transition: border-color 0.2s, background-color 0.2s;
}
.qend a:hover { border-color: var(--qb-gold); background: rgba(9, 12, 11, 0.8); }
.qend .k { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--qb-gold); }
.qend .t { font-family: "Cinzel", Georgia, serif; font-size: 18px; font-weight: 600; letter-spacing: 0.02em; }
.qend .home .k { color: #86b896; }