/* ══════════════════════════════════════════════════════════════════
   FOLIO — where am I on a long page? (2026-09-26)

   Shared by Selected Case Profiles and Testimonials, the two pages that run
   twenty-odd screens and may not be cut. assets/js/folio.js builds it from
   the rail; without JavaScript none of this is on the page.

   The idea is a printed dossier's running head and folio: a quiet line that
   says which Part (or letter) you are in and how far through the whole you
   are, noticed when looked for, never competing with his prose.
   ══════════════════════════════════════════════════════════════════ */

.folio {
  --folio-head-h: 44px;
  position: fixed; left: 0; right: 0; top: var(--folio-top, 76px);
  z-index: 99;                       /* under the masthead (100) and its menu */
  pointer-events: none;
}
body:has(#site-nav.menu-open) .folio { visibility: hidden; }
/* the running head starts where the page's text column starts */
body:has(.letters) .folio { --folio-measure: 868px; }

/* ─── The folio rule ───
   One segment per Part or letter, each as long as the section it stands
   for (flex-grow = its height, set by folio.js). Read segments are solid,
   the current one fills, the rest wait. It sits on the masthead's lower
   edge, and drops under the running head when that is showing. */
.folio-rule {
  position: absolute; left: 0; right: 0; top: 0;
  display: flex; gap: 2px; height: 2px;
  opacity: 0;
  transition: opacity .3s ease, transform .28s cubic-bezier(0.23, 1, 0.32, 1);
}
.folio.is-past .folio-rule { opacity: 1; }
.folio-rule i { position: relative; flex: 1 1 0; min-width: 1px; overflow: hidden; background: rgba(117,38,31,0.14); }
.folio-rule b {
  position: absolute; inset: 0; background: var(--crimson);
  transform: scaleX(var(--p, 0)); transform-origin: left center;
}

/* ─── The running head (below 1180px, where there is no rail) ─── */
.folio-head {
  position: relative;
  height: var(--folio-head-h);
  background: rgba(248,245,240,0.96);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 rgba(117,38,31,0.10), 0 10px 24px -18px rgba(20,13,11,0.28);
  /* hidden by sliding up under the masthead, so it arrives from the page's edge */
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform .28s cubic-bezier(0.23, 1, 0.32, 1), visibility 0s linear .28s;
}
.folio.is-on .folio-head {
  transform: none; visibility: visible; pointer-events: auto;
  transition: transform .32s cubic-bezier(0.23, 1, 0.32, 1), visibility 0s;
}
@media (max-width: 1179px) {
  .folio.is-on .folio-rule { transform: translateY(var(--folio-head-h)); }
}
@media (min-width: 1180px) { .folio-head { display: none; } }

.folio-toggle {
  display: flex; align-items: center; gap: 14px;
  width: 100%; height: 100%;
  max-width: var(--folio-measure, 1268px); margin: 0 auto; padding: 0 24px;
  background: none; border: 0; cursor: pointer;
  color: var(--charcoal); text-align: left;
}
.folio-toggle:focus-visible { outline-offset: -3px; }
.folio-where { display: flex; align-items: baseline; gap: 12px; flex: 1 1 auto; min-width: 0; }
.folio-num {
  flex: none; min-width: 2.2em;
  font-family: 'Cinzel', serif; font-size: 12.5px; letter-spacing: 0.06em; color: var(--crimson);
}
.folio-label {
  min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  font-family: 'Josefin Sans', sans-serif; font-weight: 600; font-size: 11.5px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--charcoal);
  padding-top: 2px;                  /* Josefin sits high against Cinzel */
}
.folio-count {
  flex: none;
  font-family: 'Cinzel', serif; font-size: 12px; letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums lining-nums; color: #6b615b;   /* AA on the bar */
}
.folio-count:empty { display: none; }
.folio-t { display: inline-block; }
.folio-caret { flex: none; color: var(--crimson); transition: transform .28s cubic-bezier(0.23, 1, 0.32, 1); }
.folio.is-open .folio-caret { transform: rotate(180deg); }
@media (hover: hover) { .folio-toggle:hover .folio-label { color: var(--crimson); } }

/* ─── The list it opens ─── */
.folio-panel {
  position: absolute; left: 0; right: 0; top: calc(100% + 2px);
  max-height: calc(100dvh - var(--folio-top, 76px) - var(--folio-head-h) - 28px);
  overflow-y: auto; overscroll-behavior: contain;
  background: var(--off-white);
  box-shadow: 0 1px 0 rgba(117,38,31,0.12), 0 28px 56px -28px rgba(20,13,11,0.42);
  pointer-events: auto;
}
.folio-panel ol { list-style: none; margin: 0 auto; padding: 6px 24px 14px; max-width: var(--folio-measure, 1268px); }
.folio-panel li + li { border-top: 1px solid rgba(117,38,31,0.12); }
.folio-panel a {
  display: grid; grid-template-columns: 2.2em minmax(0, 1fr); gap: 0 12px; align-items: baseline;
  padding: 14px 0 12px; min-height: 44px; box-sizing: border-box;
  text-decoration: none; color: #3a3a3a;
}
.folio-panel .fp-num { font-family: 'Cinzel', serif; font-size: 12.5px; letter-spacing: 0.06em; color: #6b615b; }
.folio-panel .fp-label {
  font-family: 'Josefin Sans', sans-serif; font-weight: 400; font-size: 12px;
  letter-spacing: 0.12em; text-transform: uppercase; line-height: 1.4;
}
.folio-panel a:hover, .folio-panel a:focus-visible { color: var(--crimson); }
.folio-panel a[aria-current] { color: var(--crimson); }
.folio-panel a[aria-current] .fp-num { color: var(--crimson); }
.folio-panel a[aria-current] .fp-label { font-weight: 600; }
.folio-panel a:focus-visible { outline-offset: 2px; }

@media (max-width: 600px) {
  .folio-toggle { padding: 0 22px; gap: 12px; }
  .folio-panel ol { padding: 4px 22px 12px; }
}
@media (max-width: 360px) {
  .folio-toggle { padding: 0 16px; }
  .folio-panel ol { padding: 4px 16px 12px; }
}

/* ─── The rail's spine fills as each section is read (>=1180px) ───
   The lit entry's crimson line was a fixed 2px bar; now it grows with the
   reading, and the sections already read keep a quieter line. */
@media (min-width: 1180px) {
  .case-rail li, .letters-rail li { position: relative; }
  .case-rail li::before, .letters-rail li::before {
    content: ''; position: absolute; left: -1px; top: 0; bottom: 0; width: 2px;
    background: var(--crimson);
    transform: scaleY(var(--p, 0)); transform-origin: top center;
    pointer-events: none;
  }
  .case-rail li:has(> a.is-read)::before, .letters-rail li:has(> a.is-read)::before { background: rgba(117,38,31,0.34); }
  .case-rail li a.is-active, .letters-rail li a.is-active { border-left-color: transparent; }
  /* the rail's numerals were 9.5–10px; 11px is the floor for a label an
     older reader has to use; untracked, "VIII"/"XVIII" still fit their columns */
  .case-rail li a .r-num, .letters-rail li a .r-num { font-size: 11px; letter-spacing: 0; }

  /* Case Profiles: the lit Part names the matter being read */
  .case-rail .rail-now {
    display: block; padding: 0 0 12px 46px; margin-top: -4px;
    font-family: 'Inter', sans-serif; font-style: italic; font-weight: 400;
    font-size: 13px; line-height: 1.45; color: #5c5c5c; text-wrap: pretty;
  }
  .case-rail .rail-now b {
    display: block; margin-bottom: 3px;
    font-family: 'Cinzel', serif; font-style: normal; font-weight: 400;
    font-size: 10.5px; letter-spacing: 0.08em; color: var(--crimson);
    font-variant-numeric: tabular-nums lining-nums;
  }
}

/* ─── "You were here" — the Contents entry the reader came back from ─── */
.case-toc a.is-here, .letters-toc a.is-here { color: var(--crimson); background: rgba(117,38,31,0.05); }
.case-toc a.is-here .toc-title, .letters-toc a.is-here .toc-title {
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.3em;
  text-decoration-color: rgba(117,38,31,0.45);
}

@media (prefers-reduced-motion: reduce) {
  .folio-rule, .folio-head, .folio.is-on .folio-head, .folio-caret { transition: none; }
}
@media print { .folio { display: none !important; } }