/* Bach listening companions (the B minor Mass and the St Matthew Passion, both
   under Klemperer). One stylesheet for both pages, which share bach.js and
   differ only in their data.

   The look is that of a printed libretto of Bach's time: one serif (EB
   Garamond, with true small caps and old-style figures), black ink on
   paper, rules and fleurons instead of boxes, and one colour, the red of
   rubrication. Bach's fair copy of the St Matthew Passion (1736) writes the
   Gospel in red ink; here the red marks headings and the words of Jesus, as
   in a red-letter Bible. */

@font-face {
    font-family: 'EB Garamond';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('fonts/eb-garamond.woff2') format('woff2');
}
@font-face {
    font-family: 'EB Garamond';
    font-style: italic;
    font-weight: 400 800;
    font-display: swap;
    src: url('fonts/eb-garamond-italic.woff2') format('woff2');
}

:root {
    --serif: 'EB Garamond', Garamond, Georgia, serif;
    --sans:  var(--serif);       /* one face throughout */
    --mono:  var(--serif);
    --bg:    #F5F0E6;            /* paper */
    --ink:   #1D1A16;
    --title: #1D1A16;
    --body:  #3D3830;
    --faint: #8E877B;
    --rule:  #CDC3B1;
    --line:  #DDD5C6;
    --red:   #A3221B;            /* rubrication */
    --accent: var(--red);
    --gloss: #6F685D;
    /* Harmonic tension, levels 0–4: ink tints, from a wash to full black */
    --t0: #E6DECF; --t1: #CDBFA6; --t2: #A6957A; --t3: #6F604B; --t4: #2C251C;
    /* Text layers of the Passion, kept to the printer's few inks */
    --l-gospel: #3D3830;
    --l-turba:  #A3221B;
    --l-chorale:#8C7A55;
    --l-poetry: #B9AE98;
    --christ:   #A3221B;
    --deck:     #D9D1C2;         /* behind the cube turn on phones */
}
@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;
        --bg:    #17140F;
        --ink:   #EAE3D6; --title: #EAE3D6; --body: #C3BBAC; --faint: #7F786C;
        --rule:  #3A342B; --line: #2C2721;
        --red:   #E0705F;
        --gloss: #A39B8C;
        --t0: #2A251E; --t1: #463D31; --t2: #6E604D; --t3: #A69378; --t4: #E3D5BC;
        --l-gospel: #C3BBAC; --l-turba: #E0705F; --l-chorale: #C2A877; --l-poetry: #5E564A;
        --christ: #E0705F;
        --deck: #070605;
    }
}

body {
    background: var(--bg); color: var(--body);
    font-family: var(--serif);
    font-variant-numeric: oldstyle-nums proportional-nums;
    font-kerning: normal;
}
.sc, .eyebrow, .sec > h2 small, .notes dt, .no, .who, .pmeta, .toc .sc, .lit .tag, .vnav .pos, .legend, .rec h3, .meta h4 {
    font-variant-caps: all-small-caps; letter-spacing: .06em;
}

.wrap {
    max-width: 980px;
    margin: 0 auto;
    padding-block: 40px 16vh;
    padding-left: max(18px, env(safe-area-inset-left, 0px));
    padding-right: max(18px, env(safe-area-inset-right, 0px));
    font-size: 19px;
}
.back { font-family: var(--serif); font-style: italic; font-size: 16px; color: var(--body); }
a { color: inherit; }

/* ─── Title page ─── */
.head { text-align: center; margin: 30px auto 10px; max-width: 760px; padding-bottom: 34px; border-bottom: 1px solid var(--rule); }
.eyebrow { font-size: 17px; color: var(--red); }
.head h1 { font-weight: 500; font-size: clamp(42px, 8vw, 70px); line-height: 1; color: var(--title); margin: 14px 0 0; text-wrap: balance; }
.head h1 span { display: block; font-size: .31em; font-style: italic; font-weight: 400; color: var(--body); margin-top: 16px; line-height: 1.35; }
.head .fleuron { color: var(--red); font-size: 24px; margin: 18px 0 14px; }
.lede { font-size: 20px; line-height: 1.5; color: var(--body); font-style: italic; text-wrap: pretty; max-width: 40em; margin: 0 auto; }
.sibling { font-size: 16px; color: var(--body); margin-top: 16px; }
.sibling a { color: var(--red); text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* ─── Sections of prose ─── */
.sec { margin: 0 auto; padding-top: 44px; max-width: 760px; }
.sec + .sec::before, .numbers + .sec::before {
    content: "❦\FE0E"; display: block; text-align: center; color: var(--red); font-size: 20px; margin: 0 0 30px;
}
.sec > h2 { font-weight: 500; font-size: 32px; line-height: 1.15; color: var(--title); margin-bottom: 16px; text-align: center; scroll-margin-top: 64px; }
.sec > h2 small { display: block; font-size: 17px; font-weight: 400; color: var(--red); margin-bottom: 6px; }
.prose { font-size: 19px; line-height: 1.6; color: var(--ink); hyphens: auto; }
.prose p { text-align: justify; text-wrap: pretty; }
.prose p + p { margin-top: 0; text-indent: 1.4em; }
.prose h3 { font-weight: 500; font-size: 22px; font-style: italic; margin: 1.4em 0 .4em; color: var(--title); }
.prose h3 + p { text-indent: 0; }
.prose a, .card a, .lit a { color: var(--red); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.prose em, .card em { font-style: italic; }
.prose blockquote { margin: 1.1em 2em; color: var(--body); font-size: 17.5px; }
.prose blockquote p { text-align: left; }
.prose blockquote cite { display: block; font-size: 15px; font-style: italic; color: var(--faint); margin-top: 6px; }
.prose ul, .prose ol { padding-left: 1.4em; margin: .6em 0; }
.prose li + li { margin-top: .3em; }
.prose ul { list-style: none; }
.prose ul > li::before { content: "–"; color: var(--red); margin: 0 .55em 0 -1em; }
.prose ul li, .prose ol li { text-align: left; }
.note { font-size: 16px; font-style: italic; color: var(--body); line-height: 1.5; text-align: center; max-width: 40em; margin: 0 auto; }

/* ─── The recording, as the cast list of a libretto ─── */
.rec { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 44px; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 20px 0; }
.rec h3 { font-weight: 400; font-size: 17px; color: var(--red); margin-bottom: 8px; text-align: center; }
.rec dl { display: grid; grid-template-columns: 1fr auto 1fr; gap: 2px 10px; font-size: 17px; line-height: 1.45; }
.rec dt { text-align: right; font-style: italic; color: var(--body); }
.rec dt::after { content: ""; }
.rec dd { color: var(--ink); grid-column: 3; }
.rec dl > dt { grid-column: 1; }
.rec dl::before { content: none; }
.rec .facts { font-size: 17px; line-height: 1.55; color: var(--body); text-align: justify; hyphens: auto; }
.rec .facts b { color: var(--ink); font-weight: 500; }
.links { display: flex; flex-wrap: wrap; gap: 0; margin-top: 12px; font-size: 16px; }
.links a { color: var(--red); text-decoration: none; font-style: italic; }
.links a + a::before { content: "|"; color: var(--rule); margin: 0 .6em; font-style: normal; }
@media (max-width: 720px) { .rec { grid-template-columns: 1fr; } .rec dl { grid-template-columns: 1fr 1fr; } .rec dd { grid-column: 2; } }

/* ─── Liturgy map, as an order of service ─── */
.lit { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-top: 22px; }
.lit h3 { font-weight: 500; font-size: 22px; color: var(--title); text-align: center; }
.lit h3 small { display: block; font-size: 16px; font-style: italic; font-weight: 400; color: var(--faint); margin-top: 3px; }
.lit { counter-reset: lit; }
.lit ol { list-style: none; margin-top: 12px; }
.lit li { padding: 8px 0 9px; border-bottom: 1px solid var(--line); counter-increment: lit; }
.lit li .nm { font-size: 19px; color: var(--ink); }
.lit li .nm::before { content: counter(lit, upper-roman) ". "; color: var(--faint); font-size: 15px; }
.lit li.ord .nm { color: var(--red); }
.lit li .nm i { font-style: italic; }
.lit li .tag { font-size: 15px; margin-left: 8px; color: var(--faint); white-space: nowrap; }
.lit li p { font-size: 16px; line-height: 1.45; color: var(--body); margin-top: 2px; }
.lit .bach { font-size: 16px; font-style: italic; margin-top: 3px; }
.litkey { text-align: center; font-size: 16px; font-style: italic; color: var(--body); margin-top: 10px; }
.litkey span + span::before { content: "·"; margin: 0 .6em; color: var(--faint); font-style: normal; }
.litkey i { display: none; }
.litkey span:first-child { color: var(--red); }
@media (max-width: 720px) { .lit { grid-template-columns: 1fr; } }

/* ─── Figures ─── */
.figure { margin: 22px 0 4px; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 18px 0; overflow-x: auto; }
.figure svg { display: block; width: 100%; min-width: 560px; height: auto; }
.figure svg text { font-family: var(--serif); }
.figcap { font-size: 16px; font-style: italic; color: var(--body); margin-top: 10px; line-height: 1.45; text-align: center; }

/* ─── Overview (timeline strip) ─── */
.ov { margin-top: 18px; }
.ov svg { display: block; width: 100%; height: auto; overflow: visible; }
.ov svg text { font-family: var(--serif); font-size: 13px; }
.ov .seg { cursor: pointer; }
.ov .seg:hover rect.b, .ov .seg:focus rect.b { stroke: var(--red); stroke-width: 1.5; }
.ov .seg:focus { outline: none; }
.ovtip {
    position: fixed; pointer-events: none; z-index: 80; background: var(--bg); border: 1px solid var(--rule);
    padding: 8px 12px; font-size: 16px; line-height: 1.35; max-width: 280px;
}
.ovtip .t { font-size: 14px; font-style: italic; color: var(--faint); }
.ovtip .n { font-size: 18px; color: var(--ink); }
.legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 20px; align-items: center; font-size: 15px; color: var(--body); margin-top: 12px; }
.legend .sw { display: inline-flex; gap: 2px; margin-right: 8px; vertical-align: middle; }
.legend .sw i { width: 14px; height: 9px; display: inline-block; }
.legend span { display: inline-flex; align-items: center; }

/* ─── Controls, as plain words between rules ─── */
.pills { display: flex; flex-wrap: wrap; align-items: baseline; }
.pills button, .tog {
    font: italic 400 17px/1.2 var(--serif); color: var(--body); background: none; border: 0; padding: 4px 0; cursor: pointer; white-space: nowrap;
}
.pills button + button::before { content: "|"; color: var(--rule); margin: 0 .55em; font-style: normal; }
.pills button:hover, .tog:hover { color: var(--ink); }
.pills button[aria-pressed="true"], .tog[aria-pressed="true"] { color: var(--red); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
button:focus-visible, a:focus-visible { outline: 1px solid var(--red); outline-offset: 3px; }

/* ─── The viewer ───
   One slide per part opening and per track, in a horizontally snapping
   deck (bach.js). It is a stage (assets/stage.css/.js): inset and locked on
   desktop, full screen and locked on phones, where swiping sideways turns
   the slides like the faces of a cube. */
.numbers { margin-top: 30px; }
.viewer { display: flex; flex-direction: column; background: transparent; }
.numbers .stage-bg { background: transparent; border-radius: 0 !important; box-shadow: none !important; border-left: 0; border-right: 0; }
.stage-toast { color: var(--bg); font-family: var(--serif); }
.stage-hint { font-family: var(--serif); font-style: italic; font-size: 14px; }
.viewer > .fig-label { display: none; }               /* stage.js numbers figures; not this one */
.viewer.is-stage { height: calc(100vh - 72px); height: calc(100svh - 72px); padding: 0 26px; }
.viewer.is-swipe.stage-card { --card-w: 100vw; padding: 0; height: 100vh; height: 100svh; }
.vbar {
    flex: none; display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 4px 26px;
    padding: 12px 0 10px; border-bottom: 1px solid var(--rule);
}
.is-swipe .vbar {
    flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; gap: 22px;
    padding: calc(8px + env(safe-area-inset-top, 0px)) 16px 8px;
}
.is-swipe .vbar::-webkit-scrollbar { display: none; }
.is-swipe .vbar .pills { flex-wrap: nowrap; }
.vnav { display: inline-flex; align-items: baseline; gap: 10px; flex: none; }
.vnav .arrow { font: 400 20px/1 var(--serif); color: var(--red); background: none; border: 0; cursor: pointer; padding: 2px 4px; }
.vnav .arrow:disabled { color: var(--rule); cursor: default; }
.vnav .pos { font-size: 17px; color: var(--ink); min-width: 70px; text-align: center; white-space: nowrap; }
.vprog { flex: none; height: 1px; background: transparent; }
.vprog i { display: block; height: 1px; width: 0; background: var(--red); transition: width .25s ease-out; }
.deck {
    flex: 1; min-height: 0; display: flex;
    overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    scrollbar-width: none; isolation: isolate;
}
.deck::-webkit-scrollbar { display: none; }
.slide { flex: 0 0 100%; height: 100%; position: relative; overflow: hidden; scroll-snap-align: start; scroll-snap-stop: always; }
.slide[hidden] { display: none; }
.plate { position: absolute; inset: 0; background: transparent; }
.scroll { position: absolute; inset: 0; overflow-y: auto; }
.inner { padding: 24px 2px 48px; }
.is-swipe .inner { padding: 22px 20px calc(64px + env(safe-area-inset-bottom, 0px)); }
/* Desktop: commentary left, sung text right, each column scrolling on its own */
.is-stage .card .scroll { overflow: hidden; }
.is-stage .card .inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 48px; height: 100%; padding: 0 2px; }
.is-stage .card .meta, .is-stage .card .text { min-height: 0; overflow-y: auto; padding: 26px 8px 48px 0; scrollbar-width: thin; scrollbar-color: var(--rule) transparent; }
.is-stage .card .text { margin-top: 0; padding-left: 30px; border-top: 0; border-left: 1px solid var(--line); }

/* Part openings, as the half-title of a part, with its contents */
.partslide .inner { text-align: center; }
.partslide .eyebrow { margin-bottom: 4px; }
.partslide h2 { font-weight: 500; font-size: clamp(34px, 5vw, 48px); line-height: 1.05; color: var(--title); }
.partslide .pmeta { font-size: 16px; color: var(--faint); margin: 10px 0 16px; }
.partslide .prose { font-size: 18px; text-align: justify; }
.partslide .prose p { text-indent: 0; }
.toc { list-style: none; margin-top: 18px; font-size: 17px; text-align: left; }
.toc a { display: flex; align-items: baseline; gap: 8px; padding: 3px 0; color: var(--ink); text-decoration: none; }
.toc a .t { order: 2; }
.toc a .l { order: 1; flex: none; min-width: 3.6em; color: var(--red); font-size: 15px; }
.toc a .d { order: 4; flex: none; color: var(--faint); }
.toc a::after { content: ""; order: 3; flex: 1; border-bottom: 1px dotted var(--faint); transform: translateY(-4px); min-width: 1em; }
.toc a:hover .t { color: var(--red); }
.toc .sc { font-size: 15px; color: var(--faint); margin: 14px 0 2px; text-align: center; }
.partslide .keys { font-size: 16px; font-style: italic; color: var(--faint); margin-top: 18px; }
.is-stage .partslide .inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 54px; align-items: start; }
.is-stage .partslide .inner > * { grid-column: 1; }
.is-stage .partslide .toc { grid-column: 2; grid-row: 1 / span 6; margin-top: 0; }

/* On phones every step between slides is a cube turn, as on kim/. Driven
   by the scroll position itself (view timelines), so it runs in step with
   the finger; without support, or with reduced motion, a plain slide. On
   desktop a step is a very quick fade (bach.js). */
@media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) {
        .is-swipe .deck { background: var(--deck); }
        /* Only the card in view and its two neighbours (.near, set by bach.js)
           are faces of the cube: each face is a full-screen GPU layer, and all
           eighty cards of the Passion at once made iOS Safari kill the tab.
           scroll-snap-stop: always keeps a swipe to one step at a time. */
        .is-swipe .near .plate { background: var(--bg); -webkit-backface-visibility: hidden; backface-visibility: hidden; }
        .is-swipe .slide.near { view-timeline: --slide inline; overflow: visible; }
        .is-swipe .near .plate { animation: bach-cube 1ms linear both; animation-timeline: --slide; animation-range: cover 0% cover 100%; }
    }
}
@keyframes bach-cube {
    0%     { transform: translateX(-50%) perspective(240vw) rotateY(90deg) translateX(50%); }
    50%    { transform: translateX(-50%) perspective(240vw) rotateY(0deg) translateX(50%); }
    50.01% { transform: translateX(50%) perspective(240vw) rotateY(0deg) translateX(-50%); }
    100%   { transform: translateX(50%) perspective(240vw) rotateY(-90deg) translateX(-50%); }
}

/* ─── A number ─── */
.card header { text-align: center; padding-bottom: 16px; margin-bottom: 18px; position: relative; border-bottom: 1px solid var(--rule); }
.card header::after {
    content: "❦\FE0E"; position: absolute; left: 50%; bottom: -13px; transform: translateX(-50%);
    background: var(--bg); padding: 0 10px; color: var(--red); font-size: 17px; line-height: 1;
}
.card .no { font-size: 16px; color: var(--red); }
.card h3 { font-weight: 500; font-size: 32px; line-height: 1.12; color: var(--title); margin-top: 4px; text-wrap: balance; }
.card .form { font-size: 17px; font-style: italic; color: var(--body); margin-top: 4px; }
.comm { font-size: 18px; line-height: 1.55; color: var(--ink); hyphens: auto; }
.comm p { text-align: justify; }
.comm p + p { text-indent: 1.4em; }
.comm .init { float: left; font-size: 3.15em; line-height: .8; padding: 6px 7px 0 0; color: var(--red); }
.comm .init .q { font-size: .4em; vertical-align: .9em; margin-right: .05em; }
.meta h4 { font-weight: 400; font-size: 17px; color: var(--red); margin: 16px 0 3px; }
.meta h4 + .comm p { text-indent: 0; }
.notes { margin-top: 20px; border-top: 1px solid var(--rule); padding-top: 10px; font-size: 16.5px; line-height: 1.45; }
.notes > div { display: grid; grid-template-columns: 82px 1fr; gap: 0 14px; padding: 4px 0; }
.notes dt { color: var(--red); font-size: 16px; }
.notes dd { color: var(--body); }
.notes dd b { font-weight: 400; color: var(--ink); }
.notes dd i { font-style: italic; }
@media (max-width: 720px) { .card h3 { font-size: 28px; } }

/* ─── Sung text, set as in a libretto ─── */
.text { margin-top: 26px; border-top: 1px solid var(--rule); padding-top: 18px; display: grid; gap: 16px; align-content: start; }
.blk .who { text-align: center; font-size: 16px; color: var(--red); line-height: 1.3; margin-bottom: 4px; }
.blk .who small { display: inline; font-variant-caps: normal; letter-spacing: 0; font-style: italic; color: var(--faint); font-size: 15px; margin-left: .4em; }
.blk .who small::before { content: "– "; }
.blk .lines { font-size: 20px; line-height: 1.5; color: var(--ink); text-align: center; }
.blk .lines > span { display: block; }
.blk .lines .g { display: none; font-size: 15px; color: var(--gloss); font-style: italic; line-height: 1.35; margin: 0 0 6px; }
body.gloss .blk .lines .g { display: block; }
/* Gospel narrative runs on as prose */
.blk.prose-t .lines { font-size: 19px; line-height: 1.55; text-align: justify; hyphens: auto; }
.blk.prose-t .lines > span { display: inline; }
.blk.l-chorale .lines { font-style: italic; }
.blk.l-christ .lines { color: var(--christ); }
.blk .lines i { font-style: italic; color: var(--body); }

.totop { position: fixed; right: calc(16px + env(safe-area-inset-right)); bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 50; }
.in-viewer .totop { display: none; }
.totop a { font: italic 400 16px/1 var(--serif); color: var(--red); text-decoration: none; background: var(--bg); padding: 4px 6px; }
.sources { font-size: 16px; color: var(--body); line-height: 1.5; list-style: none; }
.sources li { margin-top: 6px; text-align: left; }

/* ─── Highlights: a printer's hand ─── */
.hl { color: var(--red); font-style: normal; }
.ov .star { fill: var(--red); font-size: 15px; pointer-events: none; }
.pills button.hlpill { color: var(--red); }

/* ─── Archaic words: a quiet gloss in small italic after the word ─── */
.arch .mg {
    display: inline-block; vertical-align: .3em; margin: 0 .1em 0 .25em;
    font: italic 400 12px/1 var(--serif); color: var(--faint); white-space: nowrap; letter-spacing: 0;
}

/* ─── The listening map's link to the full-screen viewer ─── */
.fslink {
    display: block; margin-top: 4px; font-size: 16px; font-weight: 400; font-style: italic;
    color: var(--red); text-decoration: none; font-variant-caps: normal; letter-spacing: 0;
}
.fslink:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Narrow measures: ragged right instead of justified, so no rivers open up */
@media (max-width: 560px) {
    .prose p, .comm p, .blk.prose-t .lines, .rec .facts, .partslide .prose { text-align: left; }
}
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* EB Garamond's Latin forms set u as v (“Crvcifixvs”): keep modern spelling */
[lang="la"], [lang="la"] * { font-feature-settings: "locl" 0; }