/* SaxoBrain. Ported from the October 2026 prototype: one search column, quiet rows, level colors.
   Light and dark follow the visitor's system setting. */
:root {
  --bg: #f5f6f8; --surface: #ffffff; --fg: #1b2029; --muted: #5d6676; --line: #dde1e8;
  --accent: #9a6514; --accent-soft: #f3e7d2; --chip: #eceff3;
  --lv-pre: #7c8594; --lv-1: #2f8a4c; --lv-2: #b58a0e; --lv-3: #2f6fb8; --lv-4: #c0453a; --lv-adv: #7a4fb5; --lv-none: #a3abb8;
  --sx-soprano: #e8751a; --sx-alto: #d9b20f; --sx-tenor: #7a4fb5; --sx-baritone: #2f6fb8; --sx-bass: #c0453a;
  --notice-bg: #fbf6e4; --notice-line: #b08900; --shadow: 0 10px 40px rgba(20, 26, 36, .16);
  --font-display: "Bricolage Grotesque", "Avenir Next", "Segoe UI", sans-serif;
  --font-body: "Public Sans", -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #12151b; --surface: #1a1e26; --fg: #e7eaf0; --muted: #9aa3b2; --line: #2b313c;
    --accent: #e0a64a; --accent-soft: #3a2e1c; --chip: #242a34;
    --lv-pre: #9aa3b2; --lv-1: #5cc27c; --lv-2: #e3bb45; --lv-3: #6aa6ea; --lv-4: #ee7b70; --lv-adv: #ad8ae6; --lv-none: #6b7382;
    --sx-soprano: #f29a4a; --sx-alto: #ecd04e; --sx-tenor: #ad8ae6; --sx-baritone: #6aa6ea; --sx-bass: #ee7b70;
    --notice-bg: #2d2614; --notice-line: #c9a227; --shadow: 0 10px 40px rgba(0, 0, 0, .5);
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-padding-top: 5rem; }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font-body); font-size: 15px; line-height: 1.5; }
a { color: var(--accent); }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.skip { position: absolute; left: -999px; top: 0; background: var(--surface); padding: 8px 12px; z-index: 30; }
.skip:focus { left: 8px; top: 8px; }

/* header and navigation */
.site-head, main, .site-foot { max-width: 980px; margin: 0 auto; padding-inline: 20px; }
.site-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; padding-block: 28px 0; }
.brand { font-family: var(--font-display); font-weight: 700; font-size: 34px; letter-spacing: -.02em; line-height: 1.1; color: var(--fg); text-decoration: none; }
.brand span { color: var(--accent); }
.site-head nav { flex-basis: 100%; display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--line); margin-top: 8px; }
.site-head nav a { text-decoration: none; color: var(--muted); padding: 10px 14px; border-bottom: 2px solid transparent; font-weight: 600; margin-bottom: -1px; }
.site-head nav a:hover { color: var(--fg); }
.site-head nav a[aria-current="page"] { color: var(--fg); border-bottom-color: var(--accent); }
main { padding-block: 8px 64px; }

/* typography shared by pages */
h1, h2, h3 { font-family: var(--font-display); }
h1 { font-weight: 700; font-size: 32px; line-height: 1.15; letter-spacing: -.01em; margin: 6px 0; text-wrap: balance; }
h2 { font-weight: 700; font-size: 22px; margin: 28px 0 8px; }
h3 { font-weight: 500; font-size: 19px; margin: 22px 0 6px; }
.eyebrow, .label-sm { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 600; margin: 18px 0 0; }
.byline, .muted, .lede { color: var(--muted); }
.byline { margin: 4px 0 18px; }
.work .byline { font-family: var(--font-display); font-size: 21px; font-weight: 500; line-height: 1.25; color: var(--fg); margin-top: 6px; }
.work .byline a { text-decoration: none; }
.work .byline a:hover { text-decoration: underline; text-underline-offset: 3px; }
.lede { max-width: 58ch; margin-block: 6px 0; }
.lvl { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; color: var(--fg); }
.dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex-shrink: 0; background: var(--lv-none); }
.lv-pre { background: var(--lv-pre); } .lv-1 { background: var(--lv-1); } .lv-2 { background: var(--lv-2); }
.lv-3 { background: var(--lv-3); } .lv-4 { background: var(--lv-4); } .lv-adv { background: var(--lv-adv); }

/* page text: curriculum, articles, notes on a work */
.prose { max-width: 68ch; min-width: 0; }
/* Notes text keeps a reading width; quotes span the page. */
.notes { min-width: 0; }
.notes > * { max-width: 68ch; }
.notes > blockquote { max-width: none; }
.prose p, .notes p { margin: 6px 0 14px; line-height: 1.65; font-size: 16px; }
.prose ul, .prose ol, .notes ul, .notes ol { margin: 4px 0 14px; padding-left: 22px; }
.prose li, .notes li { margin: 3px 0; }
.prose h2, .prose h3, .notes h2, .notes h3 { margin-top: 26px; }
.prose img, .notes img { max-width: 100%; height: auto; border-radius: 6px; }
.prose blockquote, .notes blockquote { margin: 14px 0; padding: 4px 16px; background: var(--accent-soft); border-radius: 8px; }
.prose blockquote p, .notes blockquote p { font-size: 14.5px; margin: 8px 0; }
.prose table { border-collapse: collapse; margin: 14px 0; max-width: 100%; display: block; overflow-x: auto; }
.prose th, .prose td { border-bottom: 1px solid var(--line); padding: 6px 12px 6px 0; text-align: left; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 22px 0; }
.prose a, .notes a { text-underline-offset: 3px; }
article.page { max-width: 68ch; }
/* Lists are scanned, not read as prose, so they use the full page width. */
article.page.lists, article.page.lists .prose, article.page.lists .notice { max-width: none; }
.prose { margin-top: 10px; }

/* buttons and the facts list on a work */
.actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 22px 0 16px; }
.btn { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; padding: 10px 16px; border-radius: 10px; font-weight: 600; border: 1px solid var(--line); color: var(--fg); background: var(--surface); }
.btn:hover { border-color: var(--accent); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--surface); }
.btn.missing { color: var(--muted); border-style: dashed; font-weight: 400; cursor: default; }
.btn.missing:hover { border-color: var(--line); }
/* Streaming-service buttons: a pastel tint of each service's color with a full-color outline. The tint
   mixes into --surface, so dark mode gets a dark tint; Tidal's black brand color follows --fg instead. */
.btn.svc { background: color-mix(in srgb, var(--svc) 16%, var(--surface)); border-color: var(--svc); }
.btn.svc:hover { background: color-mix(in srgb, var(--svc) 32%, var(--surface)); border-color: var(--svc); }
.btn.youtube { --svc: #ff0000; }
.btn.spotify { --svc: #1ed760; }
.btn.apple-music { --svc: #ea4259; }
.btn.amazon-music { --svc: #2ad5de; }
.btn.tidal { --svc: var(--fg); }
.btn.bandcamp { --svc: #408294; }
.video { aspect-ratio: 16 / 9; max-width: 680px; margin: 4px 0 18px; border-radius: 10px; overflow: hidden; background: var(--chip); }
.video iframe { width: 100%; height: 100%; border: 0; display: block; }
/* Track list under a recording's player (layouts/_partials/recordings/tracks.html, static/js/tracks.js).
   Player and list read as one card: the video gives up its bottom corners to the list. */
/* .player wraps both and narrows beside the floated cover as one block, so they keep the same width. */
.player { max-width: 680px; overflow: hidden; margin: 4px 0 18px; }
.embed { max-width: 680px; overflow: hidden; margin: 4px 0 18px; border-radius: 12px; }
.embed iframe { width: 100%; border: 0; display: block; background: transparent; }
.pdf { margin: 4px 0 18px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--chip); }
.pdf iframe { width: 100%; height: 80vh; min-height: 480px; border: 0; display: block; }
.spotify iframe { height: 452px; }
.applemusic { border-radius: 10px; border: 1px solid var(--line); }
/* Apple's player is near-white in light mode, so it gets an outline there; in dark mode it already stands out. */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .applemusic { border-color: transparent; } }
.applemusic iframe { height: 450px; }
.applemusic.song iframe { height: 175px; }
.player .video { max-width: none; margin: 0; }
.video.has-tracks { border-radius: 10px 10px 0 0; }
.tracks { margin: 0; border: 1px solid var(--line); border-top: 0; border-radius: 0 0 10px 10px; background: var(--surface); overflow: hidden; }
.tracks-head { display: flex; justify-content: space-between; margin: 0; padding: 9px 14px; border-bottom: 1px solid var(--line); font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); font-variant-numeric: tabular-nums; }
.tracks ol { list-style: none; margin: 0; padding: 4px 0; }
.tracks .tgroup { padding: 12px 14px 3px 50px; font-size: 13px; font-weight: 600; color: var(--muted); }
.tracks .tgroup a { color: var(--fg); text-decoration: none; }
.tracks .tgroup a:hover { color: var(--accent); text-decoration: underline; }
.tracks .by { color: var(--muted); font-weight: 400; font-size: 12.5px; }
.tracks .tgroup .by::before { content: "· "; }
.track .tt .by { display: block; margin-top: 1px; }
.track { display: grid; grid-template-columns: 24px 1fr auto; gap: 12px; align-items: baseline; width: 100%; padding: 7px 14px; border: 0; background: none; color: var(--fg); font: inherit; line-height: 1.35; text-align: left; cursor: pointer; }
.track:hover { background: var(--chip); }
.track:focus-visible { outline-offset: -2px; }
.track .tn, .track .td { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.track .tn { text-align: right; }
.track .tt { min-width: 0; overflow-wrap: anywhere; }
/* Movements of a grouped work hang off a thin rule under the work's name. */
.tracks li.in .tt { padding-left: 12px; border-left: 2px solid var(--line); margin: -7px 0; padding-top: 7px; padding-bottom: 7px; }
/* The same gap below a grouped work as above its name, so the next track does not read as a movement. */
.tracks li.in.end { margin-bottom: 12px; }
.track.current { background: var(--accent-soft); }
.track.current .tt { font-weight: 600; }
.track.current .tn { color: var(--accent); font-weight: 600; }
/* The playing track's number becomes three level bars. */
/* The number stays in place (transparent) so the row keeps its baseline; the bars sit over it. */
.track.playing .tn { color: transparent; position: relative; }
.track.playing .tn::after { content: ""; position: absolute; right: 0; bottom: .2em; width: 13px; height: 12px; background:
  linear-gradient(var(--accent), var(--accent)) 0 100% / 3px 55% no-repeat,
  linear-gradient(var(--accent), var(--accent)) 5px 100% / 3px 100% no-repeat,
  linear-gradient(var(--accent), var(--accent)) 10px 100% / 3px 35% no-repeat; }
@media (prefers-reduced-motion: no-preference) {
  .track.playing .tn::after { animation: levels .8s ease-in-out infinite alternate; }
}
@keyframes levels { to { background-size: 3px 25%, 3px 60%, 3px 100%; } }
.audio { max-width: 680px; margin: 4px 0 18px; }
.audio iframe { width: 100%; height: 166px; border: 0; display: block; border-radius: 10px; }
.audio.bandcamp iframe { height: 120px; }
.audio.spotify iframe { height: 152px; }
.audio.spotify:is(.sp-album, .sp-playlist, .sp-show) iframe { height: 352px; }
/* Labels and values share one font, size and color, matching a recording's "Released" line */
.facts { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 14px 0; color: var(--muted); }
.facts dd { margin: 0; min-width: 0; }
.released { margin: 14px 0; color: var(--muted); }
.tag { font-size: 12px; border: 1px solid var(--line); border-radius: 6px; padding: 2px 7px; color: var(--muted); white-space: nowrap; }
.tag.on { border-color: var(--accent); color: var(--accent); }
.pill.oop { background: color-mix(in srgb, var(--lv-4) 18%, var(--surface)); color: var(--fg); border-radius: 999px; padding: 1px 9px; font-size: 12.5px; font-weight: 500; white-space: nowrap; margin-left: 4px; }

/* lists: other works, composer works, section pages */
.worklist, .alist { list-style: none; margin: 8px 0; padding: 0; }
.worklist li, .alist li { border-bottom: 1px solid var(--line); }
.worklist a { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 9px 4px; }
.worklist a, .alist a { text-decoration: none; color: var(--fg); font-weight: 500; }
.worklist a:hover, .alist a:hover { color: var(--accent); }
.worklist a:hover { background: var(--surface); }
.worklist .muted { font-size: 13px; white-space: nowrap; }
.worklist .by { color: var(--muted); font-weight: 400; }
.alist a { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; padding: 10px 4px; }
.alist a:hover { background: var(--surface); }
.alist .who { color: var(--muted); font-size: 13.5px; font-weight: 400; }
.section-list h2 { margin-top: 28px; }

/* albums a work appears on */
.albumlist { list-style: none; margin: 8px 0; padding: 0; }
.albumlist li { border-bottom: 1px solid var(--line); }
.albumlist a { display: flex; gap: 14px; align-items: center; padding: 8px 4px; text-decoration: none; color: var(--fg); }
.albumlist a:hover { background: var(--surface); color: var(--accent); }
.albumlist img, .albumlist .nocover { width: 56px; height: 56px; flex: none; border-radius: 4px; object-fit: cover; background: var(--line); }
.albumlist a > span { display: flex; flex-direction: column; }
.albumlist .t { font-weight: 500; }
.albumlist .muted { color: var(--muted); font-size: 13.5px; }

/* Recordings page: List / Albums switch and the cover grid */
.views { display: flex; gap: 6px; margin: 14px 0 6px; }
.views[hidden], [data-view-panel][hidden] { display: none; }
.albumgrid { list-style: none; margin: 16px 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 22px 18px; }
.albumgrid a { display: flex; flex-direction: column; gap: 2px; text-decoration: none; color: var(--fg); }
.albumgrid img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 6px; background: var(--line); box-shadow: 0 1px 3px rgba(20, 26, 36, .12); margin-bottom: 8px; transition: transform .15s ease, box-shadow .15s ease; }
.albumgrid a:hover img { transform: translateY(-2px); box-shadow: var(--shadow); }
.albumgrid a:hover .t { color: var(--accent); }
.albumgrid .t { font-weight: 500; line-height: 1.3; }
.albumgrid .muted { color: var(--muted); font-size: 13.5px; }
@media (max-width: 560px) { .albumgrid { grid-template-columns: repeat(2, 1fr); gap: 18px 12px; } }
@media (prefers-reduced-motion: reduce) { .albumgrid img { transition: none; } }

/* composer page */
.composer-head { display: flex; flex-direction: row-reverse; justify-content: space-between; gap: 22px; align-items: flex-start; }
.composer-head > div { flex: 1; min-width: 0; }
.portrait { margin: 18px 0 0; width: 160px; flex-shrink: 0; }
.portrait img { display: block; width: 160px; height: 200px; object-fit: cover; border-radius: 10px; background: var(--chip); }
.portrait figcaption { font-size: 11.5px; color: var(--muted); margin-top: 5px; line-height: 1.35; overflow-wrap: anywhere; }
.portrait figcaption a { color: var(--muted); }

/* composers index */
.composers-index .bar { position: static; border-bottom: 0; padding-bottom: 0; }
.letters { position: sticky; top: 0; z-index: 5; background: var(--bg); display: flex; align-items: center; gap: 6px; padding-block: 10px; border-bottom: 1px solid var(--line); margin-top: 14px; }
.letters .label-sm { width: 92px; flex-shrink: 0; margin: 0; }
.letter-row { display: flex; flex-wrap: wrap; gap: 3px; }
.letters a { min-width: 28px; height: 30px; display: inline-grid; place-items: center; border-radius: 8px; text-decoration: none; font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--fg); background: var(--chip); border: 1px solid transparent; }
.letters a:hover { border-color: var(--accent); color: var(--accent); }
.letters a.here { background: var(--accent); color: var(--surface); }
.letters a.off { background: none; color: var(--line); cursor: default; }
.letters a.off:hover { border-color: transparent; }
.totop { position: fixed; right: 20px; bottom: 20px; z-index: 6; background: var(--fg); color: var(--bg); border: 0; border-radius: 999px; padding: 10px 16px; font-weight: 600; cursor: pointer; box-shadow: var(--shadow); }
.totop:hover { background: var(--accent); color: var(--surface); }
.letter-group { margin-top: 28px; }
.letter-group h2 { margin: 0; }
.clist .who { display: inline-flex; align-items: center; gap: 8px; text-align: right; }
.pill.nat { background: color-mix(in srgb, var(--muted) 16%, var(--surface)); color: var(--fg); border-radius: 999px; padding: 1px 10px; font-size: 13px; white-space: nowrap; }
.clist .dots { display: inline-flex; gap: 3px; }

/* curriculum: overview grid (years across, strands down) and year pages. --c is the year's color, from .c-lv-N */
.cur .lede { max-width: 62ch; font-size: 16px; }
.cur .lede p { margin: 4px 0 0; }
.cur .h3 { font-family: var(--font-display); font-weight: 500; font-size: 18px; margin: 0 0 8px; }
.cur h3 { margin: 0; }
.cur .card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; min-width: 0; }
.cur .pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 12px; }
.cur .acts { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.cur .act { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 600; text-decoration: none; border: 1px solid var(--line); border-radius: 999px; padding: 2px 9px; color: var(--fg); white-space: nowrap; background: var(--surface); }
.cur .act:hover { border-color: var(--accent); color: var(--accent); }
.cur .act.listen { background: var(--accent-soft); border-color: transparent; color: var(--accent); }
.cur .act svg { width: 10px; height: 10px; fill: currentColor; }
.cur .tag.soprano { --sx: var(--sx-soprano); } .cur .tag.alto { --sx: var(--sx-alto); } .cur .tag.tenor { --sx: var(--sx-tenor); } .cur .tag.baritone { --sx: var(--sx-baritone); } .cur .tag.bass { --sx: var(--sx-bass); }
.cur .tag.soprano, .cur .tag.alto, .cur .tag.tenor, .cur .tag.baritone, .cur .tag.bass { border-color: color-mix(in srgb, var(--sx) 50%, var(--line)); color: color-mix(in srgb, var(--sx) 75%, var(--fg)); }
.cur .go { font-weight: 600; text-decoration: none; }
.cur .go:hover { text-decoration: underline; }
.matrix { margin-top: 26px; display: grid; grid-template-columns: 116px repeat(4, minmax(0, 1fr)); column-gap: 10px; }
.matrix > * { min-width: 0; }
.m-c1 { grid-column: 1; } .m-c2 { grid-column: 2; } .m-c3 { grid-column: 3; } .m-c4 { grid-column: 4; } .m-c5 { grid-column: 5; }
.m-r1 { grid-row: 1; } .m-r2 { grid-row: 2; } .m-r3 { grid-row: 3; } .m-r4 { grid-row: 4; } .m-r5 { grid-row: 5; } .m-r6 { grid-row: 6; }
.m-label { padding: 14px 0; border-top: 1px solid var(--line); }
.m-yhead { background: var(--surface); border: 1px solid var(--line); border-bottom: 0; border-radius: 12px 12px 0 0; padding: 14px 14px 12px; text-decoration: none; color: var(--fg); position: relative; overflow: hidden; display: grid; gap: 2px; }
.m-yhead::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: var(--c); }
.m-yhead .n { display: flex; align-items: center; gap: 7px; margin: 0; }
.m-yhead b { font-family: var(--font-display); font-weight: 700; font-size: 19px; }
.m-yhead .go { font-size: 13.5px; color: var(--accent); }
.m-yhead:hover { border-color: var(--c); }
.m-cell { display: block; background: var(--surface); border-inline: 1px solid var(--line); border-top: 1px solid var(--line); padding: 12px 14px; font-size: 13.5px; line-height: 1.45; color: var(--fg); text-decoration: none; }
.m-cell:hover { background: color-mix(in srgb, var(--c) 7%, var(--surface)); }
.m-cell.last { border-bottom: 1px solid var(--line); border-radius: 0 0 12px 12px; }
.m-cell ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 3px; }
.m-cell .k { display: none; }
.m-cell .line { display: block; }
.m-cell .sub { color: var(--muted); }
.m-cell .theme { font-weight: 600; }
.m-cell .chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.m-cell .chip { background: color-mix(in srgb, var(--c) 16%, var(--surface)); border-radius: 999px; padding: 0 8px; font-size: 12.5px; cursor: inherit; }
.how { margin-top: 30px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 12px; }
.how div { border-top: 2px solid var(--fg); padding-top: 10px; }
.how h3 { font-size: 16px; font-weight: 700; margin: 0; }
.how p { margin: 4px 0 0; color: var(--muted); font-size: 14px; }
.ysteps { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 14px; }
.ystep { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 5px 13px 5px 10px; font-weight: 600; font-size: 13.5px; color: var(--fg); text-decoration: none; }
.ystep:hover { border-color: var(--c); }
.ystep[aria-current="page"] { background: color-mix(in srgb, var(--c) 22%, var(--surface)); border-color: var(--c); }
.secbar { position: sticky; top: 0; z-index: 5; background: var(--bg); border-bottom: 1px solid var(--line); margin-top: 18px; display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.secbar a { white-space: nowrap; padding: 10px 12px; text-decoration: none; color: var(--muted); font-weight: 600; font-size: 14px; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.secbar a:hover { color: var(--fg); border-bottom-color: var(--c); }
.cur .sec { padding-top: 30px; scroll-margin-top: 44px; }
.cur .sec-h { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.cur .sec-h h2 { margin: 0; }
.cur .sec-h .label-sm { margin: 0; }
.cur .focus { font-size: 14px; color: var(--muted); }
.cur .focus b { color: var(--fg); }
.goals { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.goals .sub ul { list-style: none; margin: 5px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.goals .sub li { background: var(--chip); border-radius: 999px; padding: 1px 9px; font-size: 13px; }
.book { display: grid; gap: 1px; padding: 8px 0; border-top: 1px solid var(--line); }
.cur .card h2 + .book { border-top: 0; padding-top: 0; }
.book .t { font-weight: 600; }
.book .links { display: flex; gap: 12px; font-size: 13.5px; margin-top: 3px; }
.cur .rule { background: var(--accent-soft); border-radius: 12px; padding: 12px 16px; margin-bottom: 14px; }
.cur .rule p { margin: 0; font-size: 14.5px; }
.catgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
.catcard { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; min-width: 0; }
.catcard header { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 16px 8px; gap: 10px; }
.catcard header .label-sm { white-space: nowrap; margin: 0; }
.pieces { list-style: none; margin: 0; padding: 0; }
.piece { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 9px 16px; border-top: 1px solid var(--line); align-items: center; }
.piece .main { min-width: 0; }
.piece .t { font-weight: 600; color: var(--fg); text-decoration: none; }
a.t:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.piece .join { color: var(--muted); }
.piece .who { color: var(--muted); font-size: 13.5px; }
.piece .who a { color: var(--muted); }
.piece .who .note::before { content: " · "; }
.cur .more { margin-top: 14px; display: flex; justify-content: space-between; align-items: center; gap: 8px 16px; flex-wrap: wrap; border: 1px dashed var(--line); border-radius: 12px; padding: 12px 16px; font-size: 14.5px; }
.cur .more .links { display: flex; gap: 16px; flex-wrap: wrap; }
.term { display: grid; gap: 8px; align-content: start; }
.term > .label-sm { margin: 0; }
.read { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px; display: grid; gap: 2px; color: var(--muted); font-size: 13.5px; transition: border-color .15s, background .15s; }
.read .t a:first-child { display: block; font-family: var(--font-display); font-weight: 600; font-size: 16.5px; line-height: 1.25; color: var(--fg); text-decoration: none; margin-bottom: 2px; }
/* The title link covers the whole box, so a click anywhere opens it. Any other link in the box sits above it. */
.read .t a:first-child::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.read a:not(.t a:first-child) { position: relative; z-index: 1; }
.read:has(.t a:first-child):hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 5%, var(--surface)); }
.read:hover .t a:first-child { color: var(--accent); }
.read .t a:first-child:focus-visible { outline: none; }
.read:has(.t a:first-child:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.read .note { color: var(--fg); }
.read .note ul { list-style: none; margin: 4px 0 0; padding: 0; }
.read .tag { justify-self: start; margin-top: 4px; }
.albums { list-style: none; margin: 0; padding: 0; counter-reset: a; }
.albums li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 2px 8px; padding: 9px 0; border-bottom: 1px solid var(--line); align-items: baseline; counter-increment: a; }
.albums li:first-child { padding-top: 0; }
.albums li:last-child { border-bottom: 0; padding-bottom: 0; }
.albums li::before { content: counter(a); font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.albums .main { min-width: 0; }
.albums .t { font-style: italic; font-weight: 600; }
.albums .a, .albums .note { display: block; color: var(--muted); font-size: 13.5px; }
.albums .note ul { list-style: none; margin: 0; padding: 0; }
.yfoot { margin-top: 40px; display: flex; justify-content: space-between; gap: 12px; border-top: 1px solid var(--line); padding-top: 16px; }
.yfoot a { text-decoration: none; display: grid; }
.yfoot a small { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }
.yfoot a b { font-family: var(--font-display); font-size: 18px; color: var(--fg); }
.yfoot a:last-child { text-align: right; }
@media (max-width: 820px) {
  .matrix { grid-template-columns: 1fr; }
  .matrix > * { grid-column: auto; grid-row: auto; }
  .m-label { display: none; }
  .m-yhead { margin-top: 16px; }
  .m-cell .k { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 600; margin-bottom: 2px; }
  .catgrid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .piece { grid-template-columns: 1fr; }
  .piece .acts { margin-top: 4px; }
}

/* notice for content by other people */
.notice { border-left: 4px solid var(--notice-line); background: var(--notice-bg); padding: 2px 16px; margin: 16px 0; border-radius: 0 8px 8px 0; font-size: 14.5px; max-width: 68ch; }
/* Comes first in the page so its top lines up with the top of the eyebrow's capitals. The eyebrow's
   18px top margin collapses into the header's, the float's does not, hence 4px. */
.cover { float: right; max-width: 12rem; margin: 4px 0 1rem 1.5rem; border-radius: 8px; }
.cover.narrow { display: none; }

/* home: start tiles, sticky search bar, chips, result rows */
.starts { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; margin-block: 8px 6px; }
.start { text-align: left; text-decoration: none; color: var(--fg); background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; display: grid; gap: 2px; align-content: start; }
.start .label-sm { margin: 0 0 2px; }
.start:hover { border-color: var(--accent); }
.start b { font-family: var(--font-display); font-weight: 500; font-size: 16px; }
.start small { color: var(--muted); font-size: 13px; }
.bar { position: sticky; top: 0; z-index: 5; background: var(--bg); padding-block: 14px 10px; border-bottom: 1px solid var(--line); display: grid; gap: 10px; margin-top: 18px; }
.search { width: 100%; font: inherit; font-size: 17px; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--fg); }
.groups { display: grid; gap: 8px; }
.group { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.group .label-sm { width: 92px; flex-shrink: 0; margin: 0; }
.chip { border: 1px solid transparent; background: var(--chip); border-radius: 999px; padding: 4px 11px; font-size: 13.5px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.chip:hover { border-color: var(--line); }
/* tinted chips: a pastel of the color, a stronger tint and a colored edge when selected */
.chip[class*="c-"] { background: color-mix(in srgb, var(--c) 22%, var(--surface)); }
.chip[class*="c-"]:hover { border-color: var(--c); }
.chip[class*="c-"][aria-pressed="true"] { background: color-mix(in srgb, var(--c) 48%, var(--surface)); border-color: var(--c); color: var(--fg); font-weight: 600; }
.c-lv-pre { --c: var(--lv-pre); } .c-lv-1 { --c: var(--lv-1); } .c-lv-2 { --c: var(--lv-2); }
.c-lv-3 { --c: var(--lv-3); } .c-lv-4 { --c: var(--lv-4); } .c-lv-adv { --c: var(--lv-adv); } .c-lv-none { --c: var(--lv-none); }
.c-sx-soprano { --c: var(--sx-soprano); } .c-sx-alto { --c: var(--sx-alto); } .c-sx-tenor { --c: var(--sx-tenor); }
.c-sx-baritone { --c: var(--sx-baritone); } .c-sx-bass { --c: var(--sx-bass); }
.chip[aria-pressed="true"] { background: var(--fg); color: var(--bg); }
.status { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; color: var(--muted); font-size: 13.5px; padding-block: 12px 4px; }
.status-tools { display: flex; gap: 16px; align-items: center; }
.sort select { font: inherit; color: var(--fg); background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 3px 6px; margin-left: 4px; }
.clear { background: none; border: 0; color: var(--accent); cursor: pointer; padding: 0; }
.results { list-style: none; margin: 0; padding: 0; }
.row { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; align-items: center; padding: 12px 6px; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--fg); }
.row:hover { background: var(--surface); }
.row .main { min-width: 0; }
.row .title { font-weight: 600; font-size: 16px; }
.row .composer { color: var(--muted); }
.row .meta { display: flex; gap: 10px; flex-wrap: wrap; font-size: 13px; color: var(--muted); margin-top: 2px; align-items: center; }
.lvl.pill { background: color-mix(in srgb, var(--c) 22%, var(--surface)); border-radius: 999px; padding: 1px 10px 1px 8px; font-size: 13px; }
.eyebrow .lvl.pill { text-transform: none; letter-spacing: 0; font-size: 13px; }
.worklist .lvl.pill { white-space: nowrap; }
.has { display: flex; gap: 6px; }
.showmore { margin: 18px auto 0; display: block; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 10px 18px; cursor: pointer; }
.empty { padding: 40px 0; text-align: center; color: var(--muted); }
.site-foot { color: var(--muted); font-size: 13px; padding-block: 24px 40px; border-top: 1px solid var(--line); text-align: center; }
.site-foot a { color: var(--muted); }

@media (max-width: 560px) {
  .brand { font-size: 28px; }
  h1 { font-size: 26px; }
  .work .byline { font-size: 18px; }
  .group .label-sm { width: 100%; }
  .start small { display: none; }
  .bar { position: static; }
  .row { grid-template-columns: 1fr; }
  .cover { float: none; margin: 0 0 1rem; }
  .cover.wide { display: none; }
  .cover.narrow { display: block; }
  .alist a { flex-direction: column; gap: 2px; }
  .clist .who { text-align: left; }
  .composer-head { flex-direction: column; align-items: flex-start; gap: 0; }
  .portrait, .portrait img { width: 128px; }
  .portrait img { height: 160px; }
  .letters { flex-direction: column; align-items: flex-start; }
  .letters .label-sm { width: auto; }
  .letters a { min-width: 28px; height: 28px; }
}
@media print { .site-head nav, .bar, .letters, .totop, .site-foot, .starts { display: none; } }

/* side panel on the Repertoire page (a full-width sheet on phones) */
body.panel-open { overflow: hidden; }
.scrim { position: fixed; inset: 0; background: rgba(10, 12, 16, .35); z-index: 20; }
.panel { position: fixed; top: 0; right: 0; bottom: 0; width: min(520px, 100%); background: var(--surface); z-index: 21; box-shadow: var(--shadow); overflow-y: auto; padding: 20px 24px 32px; outline: none; }
.panel-head { display: flex; justify-content: flex-end; }
.close { background: var(--chip); border: 0; border-radius: 999px; width: 34px; height: 34px; cursor: pointer; font-size: 20px; line-height: 1; }
.panel article.work h1 { font-size: 28px; }
.panel .notes, .panel .notice { max-width: none; }
@media (prefers-reduced-motion: no-preference) {
  .panel:not([hidden]) { animation: slide .18s ease-out; }
  @keyframes slide { from { transform: translateX(24px); opacity: .6; } to { transform: none; opacity: 1; } }
}