/* ---------- The journey: one path through the study, with Ariadne along it ----------
   Top: where you are (the site's places, the running head, the pager). Bottom: where to go (the chapter's end,
   the pager cards, then the footer with your progress and every page). The path is drawn as Ariadne's thread:
   a gold line with a knot at every stop, filled when done, ringed where you are. */

/* Top bar: the site's places beside the wordmark */
.topbar { grid-template-columns: auto auto minmax(0, 1fr) auto auto; }
.site-nav { display: flex; gap: 18px; align-items: baseline; padding-left: 16px; border-left: 1px solid var(--hairline); }
.site-nav a { font-family: var(--font-serif); font-size: 16px; font-variant: small-caps; text-transform: lowercase; letter-spacing: 0.1em; color: var(--ink-2); text-decoration: none; border-bottom: 1px solid transparent; padding-bottom: 1px; }
.site-nav a:hover { color: var(--ink); border-bottom-color: var(--ink-3); }
.site-nav a[aria-current="page"] { color: var(--thread); border-bottom-color: var(--thread); }
@media (max-width: 1000px) {
  .site-nav { display: none; }  /* the contents sheet and the footer carry them */
  .topbar { grid-template-columns: auto minmax(0, 1fr) auto auto; }
}
@media (max-width: 760px) { .topbar { grid-template-columns: minmax(0, 1fr) auto auto; } }

/* Phones: the pager moves to the foot of the screen, where a thumb reaches it */
@media (max-width: 640px) {
  .topbar .pager {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 6;
    justify-content: space-between; gap: 0;
    padding: 4px 12px calc(4px + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--void) 97%, transparent); border-top: 1px solid var(--ink);
  }
  .topbar .pager .icon-btn { min-width: 64px; font-size: 20px; }
  /* with the pager below, the site's places fit in the bar again */
  .topbar { grid-template-columns: minmax(0, 1fr) auto auto; }
  .site-nav { display: flex; gap: 14px; padding-left: 0; border-left: 0; }
  .site-nav a { display: inline-flex; align-items: center; min-height: 40px; font-size: 15px; }
  body { padding-bottom: calc(56px + env(safe-area-inset-bottom)); }
}

/* The contents sheet: the site's places and your progress first */
.ct-site { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 16px 24px 0; }
.ct-site a { font-family: var(--font-serif); font-size: 17px; font-variant: small-caps; text-transform: lowercase; letter-spacing: 0.08em; color: var(--ink-2); text-decoration: none; }
.ct-site a:hover { color: var(--thread); }
.ct-prog { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 12px 24px 16px; border-bottom: 1px solid var(--hairline); }
.ct-prog > a { font-family: var(--font-serif); font-style: italic; font-size: 16px; color: var(--thread); text-decoration: none; }
.ct-prog > a:hover { text-decoration: underline; text-underline-offset: 3px; }
.ct-done { margin-left: 8px; color: var(--thread); font-size: 13px; }

/* Progress: a thread that fills */
.jn-bar { display: inline-block; width: 140px; height: 3px; background: var(--hairline); vertical-align: middle; }
.jn-bar > span { display: block; height: 100%; background: var(--thread); }
.jn-count { font-family: var(--font-serif); font-style: italic; font-size: 16px; color: var(--ink-2); font-variant-numeric: oldstyle-nums; }

/* ---------- Ariadne's knots ---------- */
.knot { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; align-items: start; margin: 24px 0; padding: 14px 0 14px 18px; border-left: 2px solid var(--thread); max-width: 50em; }
.knot .portrait { width: 44px; height: 44px; }
.knot-who { margin: 0 0 2px; font-family: var(--font-serif); font-size: 15px; font-variant: small-caps; text-transform: lowercase; letter-spacing: 0.1em; color: var(--thread); }
.knot-say { margin: 0; font-family: var(--font-serif); font-size: 18.5px; line-height: 1.5; color: var(--ink); }
.knot-ask { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 8px; margin-top: 12px; }
.knot-ask-k { font-family: var(--font-serif); font-size: 14.5px; font-variant: small-caps; text-transform: lowercase; letter-spacing: 0.1em; color: var(--ink-3); margin-right: 2px; }
.knot-q { padding: 5px 12px; border: 1px solid var(--hairline); background: transparent; cursor: pointer; font-family: var(--font-serif); font-style: italic; font-size: 16px; line-height: 1.35; color: var(--ink-2); text-align: left; }
.knot-q:hover { color: var(--ink); border-color: var(--thread); }
.knot-q[aria-pressed="true"] { color: var(--ink); border-color: var(--thread); background: var(--thread-glow); }
.knot-reply { margin: 10px 0 0; font-family: var(--font-serif); font-size: 16px; line-height: 1.45; color: var(--ink-2); }
.knot-reply:empty { display: none; }
.knot-reply::before { content: "Ariadne: "; font-variant: small-caps; text-transform: lowercase; letter-spacing: 0.08em; color: var(--thread); }
.knot-wide { max-width: 46em; margin-left: auto; margin-right: auto; }
.knot-reflect { margin: 0 0 8px; border-left-style: double; border-left-width: 3px; }
.knot-reflect .knot-say { font-style: italic; }
.chapter-knot .knot { margin: 22px 0 6px; }
.chapter-knot[hidden] { display: none; }
.pk-station > .knot { margin: 26px 0 8px; }

/* ---------- Home: the way in ---------- */
.begin-box { margin-top: 30px; text-align: center; }
.begin-box .begin, .begin.jn-go { margin-top: 0; padding: 11px 26px 12px; border: 1px solid var(--thread); font-size: 21px; color: var(--ink); transition: background .2s var(--ease); }
.begin-box .begin:hover, .begin.jn-go:hover { background: var(--thread-glow); }
.begin-box .begin span, .begin.jn-go span { color: var(--thread); }
.begin-sub { margin: 10px 0 0; font-family: var(--font-serif); font-size: 16px; color: var(--ink-2); font-variant-numeric: oldstyle-nums; }
.begin-alt { margin: 6px 0 0; font-family: var(--font-serif); font-size: 16px; color: var(--ink-3); }
.begin-alt a { color: var(--ink-2); text-decoration-color: var(--hairline); text-underline-offset: 3px; }
.begin-alt a:hover { color: var(--thread); text-decoration-color: var(--thread); }
.jn-meet { margin-top: 48px; }
.jn-brief { margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--ink); }
.jn-brief ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
.jn-brief li + li { border-left: 1px solid var(--hairline); }
.jn-brief ol a { display: grid; gap: 6px; height: 100%; padding: 8px 24px 20px; color: inherit; text-decoration: none; }
.jn-brief ol li:first-child a { padding-left: 0; }
.jn-brief ol a:hover .jn-bt { color: var(--thread); }
.jn-bn { font-family: var(--font-serif); font-size: 30px; line-height: 1; color: var(--thread); font-variant-numeric: lining-nums; }
.jn-bt { font-family: var(--font-serif); font-size: 23px; line-height: 1.2; }
.jn-bx { font-family: var(--font-serif); font-size: 16px; line-height: 1.45; color: var(--ink-2); }
.jn-brief-more { margin: 8px 0 0; text-align: right; font-family: var(--font-serif); font-style: italic; font-size: 17px; }
.jn-brief-more a { color: var(--thread); text-decoration: none; border-bottom: 1px solid currentColor; }
@container page (max-width: 699px) {
  .jn-brief ol { grid-template-columns: minmax(0, 1fr); }
  .jn-brief li + li { border-left: 0; border-top: 1px solid var(--hairline); }
  .jn-brief ol a { padding: 14px 0; }
}

/* The last page: only what carries forward, with Ariadne's send-off */
#track-view.is-carry > :not(#carry) { display: none; }
#track-view.is-carry #carry { margin-top: 48px; border-top: 3px double var(--ink); }
#track-view:not(.is-carry) #carry { display: none; }
.carry-more { grid-column: 1 / -1; }
.carry-more:empty { display: none; }

/* ---------- The journey's pages ---------- */
.jn-sigil::before, .jn-sigil::after { content: "—"; }
.jn-sigil .clew { vertical-align: -6px; }
.jn-page { max-width: 880px; margin: 0 auto; padding: 28px 0 40px; }
.jn-now { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding: 6px 0 4px; }
.jn-prog { display: flex; align-items: center; gap: 14px; }
.jn-go { margin-top: 0; }

/* The path: stages, parts and a thread with a knot per stop */
.jn-stage { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--ink); }
.jn-stage-n { margin: 0; font-family: var(--font-serif); font-size: 15px; font-variant: small-caps; text-transform: lowercase; letter-spacing: 0.12em; color: var(--thread); }
.jn-stage-head h3 { margin: 2px 0 4px; font-family: var(--font-serif); font-size: 30px; font-weight: 400; }
.jn-stage-head p { margin: 0; font-family: var(--font-serif); font-size: 17px; color: var(--ink-2); max-width: 42em; }
.jn-stage-head .jn-stage-meta { margin-top: 6px; font-style: italic; font-size: 15.5px; color: var(--ink-3); font-variant-numeric: oldstyle-nums; }
.jn-part { margin-top: 26px; }
.jn-part-n { margin: 0; font-family: var(--font-serif); font-size: 14px; font-variant: small-caps; text-transform: lowercase; letter-spacing: 0.12em; color: var(--ink-3); }
.jn-part h4 { margin: 0; font-family: var(--font-serif); font-style: italic; font-size: 22px; font-weight: 400; }
.jn-part-i { margin: 2px 0 0; font-family: var(--font-serif); font-size: 16px; color: var(--ink-2); max-width: 44em; }

.jn-thread { list-style: none; margin: 14px 0 0; padding: 0; position: relative; }
.jn-thread::before { content: ""; position: absolute; left: 9px; top: 14px; bottom: 14px; width: 2px; background: var(--hairline); }
.jn-stop { position: relative; }
.jn-stop > a, .jn-stop > .jn-row { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 16px; align-items: start; padding: 10px 0; color: inherit; text-decoration: none; }
.jn-stop > a:hover .jn-t { color: var(--thread); }
.jn-knot { position: relative; z-index: 1; width: 20px; height: 20px; margin-top: 3px; border-radius: 50%; border: 2px solid var(--hairline); background: var(--void); box-sizing: border-box; }
.jn-stop.is-done .jn-knot { border-color: var(--thread); background: var(--thread); }
.jn-stop.is-done .jn-knot::after { content: "✓"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 11px; line-height: 1; color: var(--void); }
.jn-stop.is-next .jn-knot { border-color: var(--thread); box-shadow: 0 0 0 4px var(--thread-glow); }
.jn-stop.is-done::before { content: ""; position: absolute; left: 9px; top: -14px; height: calc(100% + 14px); width: 2px; background: var(--thread); }  /* the walked thread is gold */
.jn-stop.is-done:first-child::before { top: 14px; height: 100%; }
.jn-main { display: grid; gap: 2px; min-width: 0; }
.jn-label { font-family: var(--font-serif); font-size: 14.5px; font-variant: small-caps; text-transform: lowercase; letter-spacing: 0.1em; color: var(--ink-3); }
.jn-flag { color: var(--thread); }
.jn-t { font-family: var(--font-serif); font-size: 21px; line-height: 1.25; }
.jn-i { font-family: var(--font-serif); font-size: 16px; line-height: 1.45; color: var(--ink-2); }
.jn-m { font-family: var(--font-serif); font-style: italic; font-size: 15px; color: var(--ink-3); white-space: nowrap; font-variant-numeric: oldstyle-nums; padding-top: 4px; }
.jn-stop.is-next .jn-t { color: var(--thread); }
.jn-peek { margin: -4px 0 8px 36px; }
.jn-peek summary { cursor: pointer; font-family: var(--font-serif); font-style: italic; font-size: 15px; color: var(--ink-3); width: max-content; max-width: 100%; }
.jn-peek summary:hover { color: var(--ink-2); }
.jn-peek p { margin: 6px 0 0; font-family: var(--font-serif); font-size: 16px; line-height: 1.45; color: var(--ink-2); max-width: 44em; }
.jn-refs { margin: 16px 0 0 36px; font-family: var(--font-serif); font-size: 16px; color: var(--ink-2); }
.jn-refs .pk-k { display: inline; margin-right: 8px; }
.jn-refs a { color: var(--ink); text-decoration-color: var(--hairline); text-underline-offset: 3px; }
.jn-refs a:hover { color: var(--thread); text-decoration-color: var(--thread); }

/* Words: find, jump, then read */
.jn-tools { position: sticky; top: var(--bar-h, 46px); z-index: 2; display: grid; gap: 10px; padding: 12px 0; background: var(--void); border-bottom: 1px solid var(--hairline); }
.jn-filter { display: flex; align-items: baseline; gap: 12px; }
.jn-filter .pk-k { margin: 0; white-space: nowrap; }
.jn-filter input { flex: 1; min-width: 0; padding: 8px 10px; border: 1px solid var(--hairline); background: var(--surface); color: var(--ink); font-family: var(--font-serif); font-size: 17px; border-radius: 0; }
.jn-filter input:focus { border-color: var(--thread); outline: none; }
.jn-az { display: flex; flex-wrap: wrap; gap: 2px; }
.jn-az button { min-width: 28px; min-height: 28px; padding: 0 4px; border: 0; background: none; cursor: pointer; font-family: var(--font-serif); font-size: 16px; color: var(--ink-2); }
.jn-az button:hover:not(:disabled) { color: var(--thread); text-decoration: underline; text-underline-offset: 3px; }
.jn-az button:disabled { color: var(--hairline); cursor: default; }
.jn-count-w { margin: 12px 0 4px; font-family: var(--font-serif); font-style: italic; font-size: 15px; color: var(--ink-3); }
.jn-gloss > div { scroll-margin-top: 170px; }
.jn-gloss > div[hidden] { display: none; }
.jn-none { font-family: var(--font-serif); font-style: italic; color: var(--ink-2); }
.jn-refcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: 36px; border-top: 1px solid var(--ink); }
.jn-refcards a { display: grid; gap: 4px; padding: 16px 20px 18px 0; color: inherit; text-decoration: none; }
.jn-refcards a + a { padding-left: 20px; border-left: 1px solid var(--hairline); }
.jn-refcards a:hover .jn-rt { color: var(--thread); }
.jn-rt { font-family: var(--font-serif); font-size: 20px; }
.jn-rx { font-family: var(--font-serif); font-size: 15.5px; line-height: 1.45; color: var(--ink-2); }
@media (max-width: 760px) {
  .jn-refcards { grid-template-columns: minmax(0, 1fr); }
  .jn-refcards a + a { padding-left: 0; border-left: 0; border-top: 1px solid var(--hairline); }
}

/* About: prose in one measure, the journey as a thread, the rules as a numbered list */
.jn-about { max-width: 42em; }
.jn-sec { margin-top: 36px; }
.jn-sec h3 { margin: 0 0 10px; font-family: var(--font-serif); font-size: 28px; font-weight: 400; }
.jn-sec > p { margin: 0 0 14px; font-family: var(--font-serif); font-size: 19px; line-height: 1.6; color: var(--ink); }
.jn-about > .jn-sec:first-child > p:first-of-type::first-letter { float: left; font-size: 3.6em; line-height: 0.8; padding: 6px 10px 0 0; color: var(--thread); font-family: var(--font-serif); }
.jn-principles { list-style: none; margin: 18px 0 0; padding: 0; counter-reset: pr; border-top: 1px solid var(--hairline); }
.jn-principles li { display: grid; grid-template-columns: 2.2em minmax(0, 1fr); padding: 12px 0; border-bottom: 1px solid var(--hairline); counter-increment: pr; }
.jn-principles li::before { content: counter(pr, lower-roman) "."; grid-row: span 2; font-family: var(--font-serif); font-style: italic; font-size: 19px; color: var(--thread); }
.jn-principles h4 { margin: 0; font-family: var(--font-serif); font-size: 20px; font-weight: 400; }
.jn-principles p { margin: 2px 0 0; font-family: var(--font-serif); font-size: 16.5px; line-height: 1.45; color: var(--ink-2); }
.jn-timeline .jn-i { color: var(--ink); font-size: 17px; }
.jn-timeline .jn-stop > .jn-row { grid-template-columns: 20px minmax(0, 1fr); }
.jn-about-go { margin-top: 36px; text-align: center; }

.jn-empty { font-family: var(--font-serif); font-style: italic; font-size: 17px; color: var(--ink-2); }

/* ---------- The end of a chapter: a question to take away, and a place to stop ---------- */
.ch-end { grid-column: 1 / -1; padding-bottom: 12px; border-bottom: 1px solid var(--hairline); }
.ch-end .pk-end { margin-top: 12px; border-top: 0; padding-top: 4px; }
.ch-end .pk-end a { color: var(--ink); text-decoration-color: var(--hairline); text-underline-offset: 3px; }

/* ---------- The footer on every page ---------- */
.site-foot { position: relative; z-index: 1; margin-top: 24px; border-top: 3px double var(--ink); background: var(--substrate); }
.sf-inner { max-width: 1180px; margin: 0 auto; padding: 32px clamp(16px, 4vw, 40px) 36px; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 2fr); gap: 28px 56px; }
.sf-brand { display: flex; align-items: center; gap: 8px; margin: 0; font-family: var(--font-serif); font-size: 18px; font-variant: small-caps; text-transform: lowercase; letter-spacing: 0.14em; }
.sf-tag { margin: 6px 0 16px; font-family: var(--font-serif); font-style: italic; font-size: 17px; line-height: 1.4; color: var(--ink-2); }
.sf-prog { display: flex; align-items: center; gap: 12px; }
.sf-next { display: inline-block; margin-top: 12px; font-family: var(--font-serif); font-size: 17px; line-height: 1.4; color: var(--thread); text-decoration: none; border-bottom: 1px solid currentColor; }
.sf-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.sf-cols h2 { margin: 0 0 8px; font-family: var(--font-serif); font-size: 15px; font-weight: 400; font-variant: small-caps; text-transform: lowercase; letter-spacing: 0.12em; color: var(--ink-3); }
.sf-cols ul { list-style: none; margin: 0; padding: 0; }
.sf-cols li { margin: 0 0 6px; font-family: var(--font-serif); font-size: 16.5px; line-height: 1.35; }
.sf-cols a { color: var(--ink-2); text-decoration: none; }
.sf-cols a:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--thread); text-underline-offset: 3px; }
.sf-keys { margin: 14px 0 0; font-family: var(--font-serif); font-size: 14.5px; color: var(--ink-3); }
.sf-colo { grid-column: 1 / -1; margin: 0; padding-top: 16px; border-top: 1px solid var(--hairline); font-family: var(--font-serif); font-style: italic; font-size: 15px; color: var(--ink-3); }
@media (max-width: 860px) {
  .sf-inner { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .sf-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .sf-cols section:last-child { grid-column: 1 / -1; }
}
@media (pointer: coarse) {
  .sf-cols li { margin-bottom: 0; }
  .sf-cols a { display: inline-block; padding: 8px 0; }
}