/* Fan on the Side, Liner Notes: paper and ink, a serif for titles, mono for facts.
   Not a streaming-app look. Tokens and sizes come from design/HANDOFF.md. */

/* The fonts are served from this site, never from a font service: no third-party requests.
   All three are SIL Open Font License (fonts/OFL-*.txt). */
@font-face { font-family: "Newsreader"; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url(/fonts/newsreader-400-600-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Newsreader"; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url(/fonts/newsreader-400-600-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Newsreader"; font-style: italic; font-weight: 400 600; font-display: swap;
  src: url(/fonts/newsreader-italic-400-600-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Newsreader"; font-style: italic; font-weight: 400 600; font-display: swap;
  src: url(/fonts/newsreader-italic-400-600-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url(/fonts/instrument-sans-400-600-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url(/fonts/instrument-sans-400-600-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/fonts/plex-mono-400-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/fonts/plex-mono-400-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url(/fonts/plex-mono-500-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url(/fonts/plex-mono-500-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --paper: #f3eee4; --card: #fbf8f1; --ink: #1c1915; --soft: #635b50; --line: #ddd3c2; --tint: #e7dfd0;
  --now: #efe2cf; --border: #c9bda8; --dashed: #b5a98f; --accent: #a23b1e; --accent-hover: #7d2c15;
  --accent-ink: #fff; --gold: #8a6210; --chip: #e7dfd0;
  --serif: "Newsreader", Georgia, serif;
  --sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --wide: 1200px; --gutter: 40px;
  --player-h: 92px;
}
/* Dark: the device's setting, unless the listener chose with the switch in the footer
   (data-theme on <html>, set before first paint in index.html; js/theme.js). */
@media (prefers-color-scheme: dark) {
  /* Only the phone now-playing screen was mocked dark; the rest follows its tokens. */
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #16130f; --card: #1f1b16; --ink: #efe8dc; --soft: #a59b8b; --line: #3a342c; --tint: #2c2620;
    --now: #2e241a; --border: #4a4238; --dashed: #5a5145; --accent: #e8825f; --accent-hover: #f09a7b;
    --accent-ink: #1b120d; --gold: #d9a94a; --chip: #2a241d;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #16130f; --card: #1f1b16; --ink: #efe8dc; --soft: #a59b8b; --line: #3a342c; --tint: #2c2620;
  --now: #2e241a; --border: #4a4238; --dashed: #5a5145; --accent: #e8825f; --accent-hover: #f09a7b;
  --accent-ink: #1b120d; --gold: #d9a94a; --chip: #2a241d;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 16px/1.55 var(--sans); padding-bottom: calc(var(--player-h) + 40px); }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); text-decoration: underline; }
h1, h2, h3, .mark, .serif { font-family: var(--serif); font-weight: 500; letter-spacing: -0.01em; }
h1 { font-size: clamp(42px, 7vw, 72px); line-height: 0.98; letter-spacing: -0.025em; margin: 0 0 12px; }
h2 { font-size: 28px; line-height: 1.15; margin: 40px 0 12px; }
h3 { font-size: 20px; margin: 0; }
.quiet { color: var(--soft); }
.small { font-size: 14px; }
.mono { font-family: var(--mono); }
.loading { padding: 40px 0; font: 13px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--soft); }
.nf { padding: 24px 0 64px; display: flex; flex-direction: column; gap: 14px; max-width: 760px; }
.nf > * { margin: 0; }
.nf h1 { font-size: clamp(40px, 7vw, 72px); line-height: 1; letter-spacing: -0.025em; }
.nf p:last-child { font-size: 17px; color: var(--soft); }
/* Eyebrows and labels: mono, upper case, spaced. Eyebrows above a title are in the accent colour. */
.eyebrow { font: 400 12px/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin: 0 0 10px; }
.label { font: 400 12px/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--soft); }
/* Category label: a solid chip; "Only here" is gold. */
.cat { display: inline-block; align-self: flex-start; font: 500 13px/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  background: var(--ink); color: var(--paper); padding: 6px 12px; border-radius: 4px; }
.cat.only { background: var(--gold); color: var(--card); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Header: wordmark (plus the line under it on desktop), menu on the right.
   On phone the menu becomes a swipeable row of pills. */
.top { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  max-width: var(--wide); margin: 0 auto; padding: 28px var(--gutter); }
.mark { display: flex; align-items: baseline; gap: 12px; color: var(--ink); }
.mark:hover { text-decoration: none; color: var(--ink); }
.mark b { font-family: var(--serif); font-size: 32px; font-weight: 600; letter-spacing: -0.01em; }
.mark span { font: 400 13px/1 var(--mono); letter-spacing: .12em; color: var(--soft); }
.top nav { display: flex; gap: 32px; font-size: 19px; font-weight: 500; }
.top nav a { color: var(--ink); min-height: 44px; display: flex; align-items: center; }
.top nav a:hover { color: var(--accent); text-decoration: none; }
.top nav a.here { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
main { max-width: var(--wide); margin: 0 auto; padding: 12px var(--gutter) 24px; outline: none; }
.foot { max-width: var(--wide); margin: 56px auto 0; padding: 20px var(--gutter); border-top: 1px solid var(--line); color: var(--soft); font-size: 14px;
  display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 24px 48px; }
.foot .colophon { margin-top: 12px; font: 400 11px/1.5 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.foot .colophon a { color: inherit; text-decoration: underline; text-decoration-color: var(--dashed); text-underline-offset: 3px; }
.foot .colophon a:hover { color: var(--accent); }
/* the stub: a small ticket torn along a dashed line, pointing to Don's other apps */
.stub { position: relative; display: flex; flex-direction: column; gap: 2px; min-width: 210px; padding: 12px 18px 12px 30px;
  background: var(--card); border: 1px solid var(--line); border-radius: 10px; color: var(--ink); }
.stub::before { content: ""; position: absolute; left: 16px; top: 10px; bottom: 10px; border-left: 1px dashed var(--dashed); }
.stub:hover { border-color: var(--ink); color: var(--ink); text-decoration: none; }
.stub:hover .stub-main { color: var(--accent); }
.stub-top { font: 400 11px/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--soft); }
.stub-main { font: 500 24px/1.2 var(--serif); letter-spacing: -0.01em; }
.stub-foot { font-size: 12px; color: var(--soft); }
.foot p { margin: 0; max-width: 720px; }
.foot .appearance { display: flex; align-items: center; gap: 12px; margin-top: 16px; }

@media (max-width: 1100px) {
  .mark span { display: none; }
  .mark b { font-size: 30px; }
  .top { padding-top: 24px; padding-bottom: 24px; }
  .top nav { gap: 22px; font-size: 18px; }
}
@media (max-width: 600px) {
  :root { --gutter: 16px; }
  .top { display: block; padding: 12px 0 4px; }
  .mark { padding: 0 var(--gutter); }
  .mark b { font-size: 24px; }
  .top nav { gap: 8px; padding: 12px var(--gutter) 4px; overflow-x: auto; scrollbar-width: none; font-size: 16px; }
  .top nav::-webkit-scrollbar { display: none; }
  main { padding-top: 20px; }
  .top nav a { flex: none; height: 44px; padding: 0 16px; border: 1px solid var(--border); border-radius: 999px; }
  .top nav a.here { background: var(--ink); border-color: var(--ink); color: var(--paper); text-decoration: none; }
}

button { font: inherit; font-weight: 500; color: inherit; cursor: pointer; background: transparent; border: 1px solid var(--border); border-radius: 999px; padding: 0 18px; min-height: 44px; }
button:hover { border-color: var(--ink); }
button.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 600; padding: 0 22px; }
button.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
button.link { background: none; border: 0; padding: 0; min-height: 0; color: var(--accent); border-radius: 0; }

/* ---------------------------------------------------------------- front page */
.ledger { display: flex; flex-wrap: wrap; gap: 0 40px; list-style: none; margin: 0; padding: 14px 0 12px; border-bottom: 1px solid var(--line); }   /* the counts, above the cued night */
.ledger li, .ledger a { display: flex; align-items: baseline; gap: 8px; min-height: 44px; padding-top: 6px; }
.ledger a { color: var(--ink); padding-top: 0; }
.ledger a:hover { text-decoration: none; }
.ledger a:hover b { color: var(--accent); }
.ledger b { font: 500 28px/1.1 var(--serif); letter-spacing: -0.01em; }
.ledger span { font: 400 12px/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--soft); }
.cued { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 64px; padding: 28px 0 64px; border-bottom: 1px solid var(--line); }
.cued-night { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.cued-night > * { margin: 0; }
.cued-date { font-size: 96px; line-height: .95; letter-spacing: -0.025em; }
.cued-place { font: 400 30px/1.2 var(--serif); }
.cued-by { font-size: 17px; line-height: 1.55; color: var(--soft); max-width: 520px; }
.cued-by a { font-weight: 600; }
.cued-where { font-size: 14px; line-height: 1.5; color: var(--soft); max-width: 520px; margin-top: -8px !important; }
.cued-where .label { margin-right: 6px; }
.cued-go { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 12px !important; }
.play-hero { display: flex; align-items: center; gap: 14px; height: 64px; padding: 0 30px 0 22px; border: 0; background: var(--accent); color: var(--accent-ink); font-size: 19px; font-weight: 600; }
.play-hero:hover { background: var(--accent-hover); }
.play-hero .mono { font-size: 13px; font-weight: 400; opacity: .85; }
.another { display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 22px; font-size: 16px; }
.cued-scores { display: flex; gap: 8px 28px; flex-wrap: wrap; margin-top: 8px !important; font-size: 14px; color: var(--soft); }
.cued-scores b { font: 400 1em var(--mono); color: var(--ink); }
.tape-line { display: none; }
.cued-tape { display: flex; flex-direction: column; padding-top: 8px; min-width: 0; }
.tape-head { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 12px; border-bottom: 1px solid var(--ink); }
.tape-head .label:first-child { color: var(--ink); }
.tape-head .label:last-child { letter-spacing: 0; text-transform: none; }
.tape-rows { list-style: none; margin: 0; padding: 0; }
.tape-rows li { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 12px; align-items: baseline; padding: 11px 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.tape-rows li:hover .t { color: var(--accent); }
.tape-rows .n, .tape-rows .d { font: 13px var(--mono); color: var(--soft); }
.tape-rows .t { font-size: 16px; }
.tape-rows li.aside .t { font-style: italic; color: var(--soft); }
.tape-rows li.now, .tape-rows li.now span { color: var(--accent); }
.only-tag { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--gold); white-space: nowrap; }
.tape-more { padding-top: 14px; font-size: 15px; font-weight: 500; }

.front-sec { padding: 56px 0 64px; border-bottom: 1px solid var(--line); }
/* Just added: one row of tickets under the cued night, sideways when there are more than fit */
.fresh { padding: 40px 0 48px; border-bottom: 1px solid var(--line); }
.fresh .sec-head { margin-bottom: 20px; }
.fresh h2 { margin: 0; font-size: 28px; }
.fresh-n { flex: 1; font: 400 12px/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--soft); }
.tk-grid.fresh-row { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 190px; overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: 6px; }
.fresh-row .tk { scroll-snap-align: start; }
.new-tag { display: inline-block; margin-right: 8px; font: 600 11px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.ch-where .new-tag, .tp-nights .new-tag { margin: 0 0 0 8px; }
.ch-where .new-tag { margin-left: 10px; vertical-align: 4px; }
.front-sec h2 { margin: 0 0 28px; font-size: 34px; }
.sec-head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 24px; }
.sec-head h2 { margin: 0; }
.sec-head a { font-size: 15px; font-weight: 500; }

.doors { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.door { display: flex; flex-direction: column; gap: 10px; padding-top: 18px; border-top: 2px solid var(--ink); min-width: 0; }
.door h3 { font-size: 25px; line-height: 1.15; }
.door .meta { font-size: 14px; color: var(--soft); }
.door .by { font-size: 14px; }
.door-go { display: flex; align-items: center; gap: 14px; margin-top: 8px; }
.door-go a { font-size: 14px; font-weight: 500; }
.play-round { width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; background: var(--accent); color: var(--accent-ink); display: flex; align-items: center; justify-content: center; flex: none; }
.play-round:hover { background: var(--accent-hover); }

/* the album timeline: era brackets proportional to time, night dots on the line, years below */
.tl { display: flex; flex-direction: column; gap: 36px; }
.tl-row { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 24px; align-items: end; }
.tl-yrs { font: 13px/1.5 var(--mono); color: var(--soft); padding-bottom: 46px; }
.tl-track { position: relative; height: 172px; }
.tl-era { position: absolute; top: 0; height: 120px; padding-right: 10px; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; color: var(--ink); }
.tl-era:hover { text-decoration: none; color: var(--ink); }
.tl-era .nm { font: 400 22px/1.1 var(--serif); }
.tl-era:hover .nm { color: var(--accent); }
.tl-era .ct { font: 12px var(--mono); color: var(--soft); padding-bottom: 8px; }
.tl-era .br { height: 10px; border: 2px solid var(--ink); border-bottom: 0; }
.tl-era.empty .nm { color: var(--soft); }
.tl-era.empty .br { border-style: dashed; border-color: var(--dashed); }
.tl-era.sel .nm { color: var(--accent); font-weight: 600; }
.tl-era.sel .br { border-color: var(--accent); }
.tl-line { position: absolute; left: 0; right: 0; top: 128px; height: 2px; background: var(--ink); }
.tl-dot { position: absolute; top: 122px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: var(--accent); border: 2px solid var(--paper); }
.tl-dot::before { content: ""; position: absolute; inset: -9px; }            /* a bigger target than the dot */
.tl-dot:hover { background: var(--ink); }
.tl-tick { position: absolute; top: 130px; height: 8px; border-left: 1px solid var(--ink); }
.tl-tick.major { height: 12px; }
.tl-yr { position: absolute; top: 148px; transform: translateX(-50%); font: 12px var(--mono); color: var(--soft); }
.tl-yr.major { color: var(--ink); }
.walk { display: none; list-style: none; margin: 0 0 0 7px; padding: 0; border-left: 2px solid var(--ink); }
.walk li { position: relative; padding: 2px 0 10px 22px; }
.walk li::before { content: ""; position: absolute; left: -9px; top: 14px; width: 16px; height: 16px; border-radius: 50%; box-sizing: border-box; background: var(--ink); border: 2px solid var(--ink); }
.walk li.empty::before { background: var(--paper); border-color: var(--dashed); }
.walk li.sel::before { background: var(--accent); border-color: var(--accent); }
.walk a { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; min-height: 44px; padding-top: 6px; color: var(--ink); }
.walk a:hover { text-decoration: none; }
.walk .nm { font: 400 22px/1.2 var(--serif); }
.walk .empty .nm { font-size: 18px; color: var(--soft); }
.walk .sel .nm { color: var(--accent); font-weight: 600; }
.walk .yrs { font: 11px var(--mono); color: var(--soft); white-space: nowrap; }
.walk .dots { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.walk .dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); }
.walk .dots span { font: 12px var(--mono); color: var(--soft); margin-left: 4px; }

.tapers-sec { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 64px; padding-bottom: 72px; border-bottom: 0; }
.tapers-sec h2 { margin: 0 0 14px; line-height: 1.1; }
.tapers-sec .meet { font-size: 15px; font-weight: 500; }
.tapers-sec > div:last-child .meet { display: none; }
.tp-rows { list-style: none; margin: 0; padding: 0; font-size: 17px; }
.tp-rows li { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.tp-rows a { color: var(--ink); }
.tp-rows a:hover { color: var(--accent); }
.tp-rows .ct { font: 13px var(--mono); color: var(--soft); white-space: nowrap; padding-top: 3px; }
.tp-rows .unknown > span:first-child { color: var(--soft); }
.tp-rows .unknown a { color: var(--accent); }

@media (max-width: 1100px) {
  .tl { gap: 28px; }
  .tl-row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .tl-yrs { padding: 0; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
  .tl-yrs br { display: none; }
  .tl-era .nm { font-size: 18px; }
}
@media (max-width: 960px) {
  .ledger { gap: 0 32px; }
  .cued { grid-template-columns: minmax(0, 1fr); padding: 28px 0 48px; }
  .cued-night { gap: 16px; }
  .cued-date { font-size: 84px; }
  .cued-place { font-size: 28px; }
  .cued-tape { display: none; }
  .tape-line { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 16px !important; padding: 14px 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); color: var(--ink); }
  .tape-line:hover { text-decoration: none; }
  .tape-line > span:first-child { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
  .tape-line .label { font-size: 11px; }
  .tape-names { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .tape-names em { color: var(--soft); }
  .tape-line .go { font-size: 14px; font-weight: 500; color: var(--accent); white-space: nowrap; }
  .front-sec { padding: 48px 0 56px; }
  .front-sec h2 { font-size: 32px; margin-bottom: 24px; }
  .doors { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 32px; }
  .door { gap: 9px; padding-top: 16px; }
  .tapers-sec { display: flex; flex-direction: column; gap: 20px; }
  .tapers-sec h2 { line-height: 1.15; margin: 0; }
  .tapers-sec > div:first-child .meet { display: none; }
  .tapers-sec > div:last-child .meet { display: inline-block; margin-top: 20px; }
}
@media (max-width: 600px) {
  .ledger { gap: 0 20px; padding: 4px 0 6px; margin-bottom: 16px; }
  .ledger li, .ledger a { gap: 6px; }
  .ledger b { font-size: 22px; }
  .ledger span { font-size: 11px; letter-spacing: .1em; }
  .cued { padding: 4px 0 32px; }
  .cued-night { gap: 10px; }
  .cued-night .eyebrow { font-size: 11px; }
  .cued-date { font-size: 48px; line-height: .98; letter-spacing: -0.02em; }
  .cued-place { font-size: 21px; }
  .cued-by { font-size: 15px; line-height: 1.5; }
  .cued-where { margin-top: 0 !important; }
  .cued-go { flex-direction: column; align-items: stretch; gap: 10px; margin-top: 8px !important; }
  .play-hero { height: 58px; justify-content: center; gap: 12px; padding: 0 20px; font-size: 18px; }
  .play-hero .mono { font: inherit; opacity: 1; }
  .play-hero .mono::before { content: "· "; }
  .another { height: 46px; justify-content: center; font-size: 15px; }
  .cued-scores { gap: 18px; font-size: 13px; padding-top: 4px; margin-top: 0 !important; }
  .front-sec { padding: 32px 0 36px; }
  .front-sec h2 { font-size: 26px; margin-bottom: 22px; }
  .sec-head { margin-bottom: 20px; }
  .doors { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .door h3 { font-size: 23px; }
  .tl { display: none; }
  .walk { display: block; }
  .tapers-sec { padding: 32px 0 24px; gap: 16px; }
}

/* ---------------------------------------------------------------- show page
   Desktop: the setlist on the left, the taper on a 320px rail. Tablet: the recording below the
   setlist in two columns. Phone: compact rows; only the gear chain folds. The taper credit, the
   taper's words and the invitation are never folded away. */
.show-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 48px; align-items: end; padding: 12px 0 36px; border-bottom: 1px solid var(--ink); }
.sh-main { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.sh-main > * { margin: 0; }
.show-date { font-size: 80px; line-height: .95; letter-spacing: -0.025em; }
.show-place { font: 400 28px/1.2 var(--serif); }
.show-facts { font-size: 16px; color: var(--soft); }
.show-facts a { font-weight: 600; }
.show-others { font-size: 14px; }
.taper-strip { display: none; }
.sh-act { display: flex; flex-direction: column; gap: 18px; align-items: flex-end; }
.show-head .play-hero { height: 60px; padding: 0 28px 0 20px; font-size: 18px; gap: 12px; }
.show-head .play-hero .mono { display: none; }
.rate-sum { display: none; }
.rate-grid { display: grid; grid-template-columns: auto auto auto; gap: 8px 18px; align-items: center; font-size: 14px; }
.rate-grid .who { color: var(--soft); }
.rate-grid .don { font-family: var(--mono); font-size: 13px; }
.rate-grid .don small { font-size: 12px; color: var(--soft); }
.pips { display: inline-flex; gap: 10px; }
.pips button { position: relative; width: 32px; height: 32px; min-height: 0; padding: 0; border-radius: 50%; font-size: 12px; font-weight: 500; color: var(--soft); }
.pips button::after { content: ""; position: absolute; inset: -6px -5px; }        /* a 44px target around a 32px circle */
.pips button.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.pips button.on:hover { cursor: default; }
.pips .pip-clear { width: auto; height: auto; min-height: 0; padding: 0 2px; margin-left: 2px; border: 0; border-radius: 0; background: none; color: var(--soft); font-size: 13px; font-weight: 500; }
.pips .pip-clear:hover { color: var(--accent); }
.pips .pip-clear::after { inset: -12px -6px; }
.pips .pip-clear[hidden] { display: inline-block; visibility: hidden; }   /* its room kept, so nothing moves when it appears */
.rate-yours { font-size: 11px; }
.ratemsg { margin: 0; font-size: 13px; color: var(--soft); min-height: 1.2em; }

.show-body { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 64px; padding-top: 12px; align-items: start; }
.sl { list-style: none; margin: 0; padding: 0; }
.sl li { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto 36px; gap: 14px; align-items: baseline; padding: 13px 12px 13px 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.sl li:hover .tt { color: var(--accent); }
.sl .n { font: 13px var(--mono); color: var(--soft); text-align: right; }
.sl .t { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sl .tline { display: flex; align-items: baseline; gap: 4px 10px; flex-wrap: wrap; }
.sl .tt { font-size: 17px; }
.sl .cv { font-size: 13px; color: var(--soft); }
.sl .rare { font: 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
.sl .ontape { font-size: 13px; color: var(--soft); }
.sl .d { font: 13px var(--mono); color: var(--soft); }
.sl li.aside .tt { font-style: italic; color: var(--soft); }
.sl li.now { background: var(--now); }
.sl li.now .tt, .sl li.now .n { color: var(--accent); font-weight: 600; }
.sl li.cut { box-shadow: inset 3px 0 0 var(--accent); }          /* the shared cut, before and while it plays */
.sl li.cut .tt { font-weight: 600; }
.sl .share-ic { align-self: center; }
.show-links { display: flex; gap: 8px 24px; flex-wrap: wrap; padding-top: 24px; font-size: 14px; }
.show-links a { min-height: 44px; display: inline-flex; align-items: center; }

.recording { display: flex; flex-direction: column; gap: 28px; padding-top: 28px; font-size: 14px; line-height: 1.5; scroll-margin-top: 16px; }
.rec-col { display: flex; flex-direction: column; gap: 28px; min-width: 0; }
.rec-who { display: flex; flex-direction: column; gap: 6px; }
.rec-who p { margin: 6px 0 0; }
.rec-name { font: 400 28px/1.1 var(--serif); color: var(--ink); }
a.rec-name:hover { color: var(--accent); text-decoration: none; }
.rec-kind { color: var(--soft); }
.rec-who .label, .rec-words .label { font-size: 11px; }
.rec-curator { white-space: pre-line; overflow-wrap: anywhere; }      /* the curator's own words, below the taper credit */
.chain > .label { display: block; font-size: 11px; margin-bottom: 12px; }
.chain summary { display: none; }
.chain-short { display: none; }
.chain ol { list-style: none; margin: 0; display: flex; flex-direction: column; }
.chain-gear { padding: 0 0 0 18px; border-left: 2px solid var(--ink); gap: 10px; font-size: 13px; }
.chain-here { padding: 12px 0 0 18px; border-left: 2px dashed var(--accent); gap: 6px; font-size: 13px; }
.chain-here .lab { font: 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.chain .soft { color: var(--soft); }
.rec-words .label { display: block; margin-bottom: 10px; }
.rec-words blockquote { margin: 0; font: 400 17px/1.5 var(--serif); white-space: pre-line; overflow-wrap: anywhere; }
details.info { margin-top: 12px; }
details.info summary { font-weight: 500; cursor: pointer; min-height: 44px; display: flex; align-items: center; }
details.info pre { white-space: pre-wrap; font: 11px/1.5 var(--mono); color: var(--soft); overflow-wrap: anywhere; }
.ask { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 18px; display: flex; flex-direction: column; gap: 8px; }
.ask-q { font: 400 19px/1.25 var(--serif); }
.ask p { margin: 0; color: var(--soft); }
.ask a { font-weight: 600; overflow-wrap: anywhere; }
.ask-go { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.ask-go a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border: 1px solid var(--border); border-radius: 999px; color: var(--ink); }
.ask-go a:hover { border-color: var(--ink); text-decoration: none; color: var(--ink); }
.ask .ask-mail { font-size: 14px; }

/* Claim or correct a tape */
.cx { max-width: 720px; padding: 32px 0 64px; }
.cx h1 { font-size: clamp(36px, 6vw, 56px); }
.cx h2 { font-size: 24px; margin: 40px 0 8px; }
.cx-lede { font: 400 19px/1.45 var(--serif); margin: 0 0 8px; }
.cx-switch { color: var(--soft); font-size: 15px; margin: 0; }
.cx-row { padding: 14px 0; border-bottom: 1px solid var(--line); }
.cx-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.cx-head .link { font-size: 14px; font-weight: 600; flex: none; }
.cx-now { margin-top: 4px; white-space: pre-line; overflow-wrap: anywhere; }
.cx-row.editing > .cx-now, .cx-row.editing .cx-head .cx-now { color: var(--soft); text-decoration: line-through; text-decoration-color: var(--dashed); }
.cx textarea, .cx input[type=text], .cx input[type=email] { display: block; width: 100%; margin-top: 8px; font: 16px/1.45 var(--sans); color: var(--ink); background: var(--card); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; }
.cx textarea { resize: vertical; }
.cx .cx-new[hidden] { display: none; }
.cx textarea:focus, .cx input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.cx-tracks { list-style: none; margin: 0; padding: 0; }
.cx-tracks .cx-row { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 8px; padding: 10px 0; }
.cx-tracks .n { font: 12px/25px var(--mono); color: var(--soft); }
.cx-tracks .cx-head .cx-now { margin-top: 0; }
.cx-field { display: block; margin-top: 16px; }
.cx .info { margin: 0; }
.cx .hp { position: absolute; left: -9999px; width: 1px; height: 1px; }
.cx-send { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; margin-top: 24px; }
.cx-send button { min-height: 52px; font-size: 17px; }
.cx-msg { margin: 0; color: var(--soft); }
.cx-mail { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line); color: var(--soft); }
.cx-done { margin-top: 32px; padding: 24px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; }
.cx-done-q { font: 400 24px/1.25 var(--serif); margin: 0 0 8px; }
.cx-done p { margin: 0 0 8px; }

.take { font-family: var(--serif); font-size: 19px; font-style: italic; margin: 6px 0 0; }

@media (max-width: 960px) {
  .show-head { display: flex; flex-direction: column; align-items: stretch; gap: 10px; padding: 20px 0 24px; }
  .sh-main { gap: 10px; }
  .show-date { font-size: 72px; line-height: .96; }
  .show-place { font-size: 26px; }
  .show-facts { font-size: 15px; }
  .show-facts .facts-by { display: none; }
  .taper-strip { display: flex; align-self: flex-start; align-items: center; gap: 12px; margin-top: 8px !important; color: var(--ink); }
  .taper-strip:hover { text-decoration: none; color: var(--ink); }
  .taper-strip:hover b { text-decoration: underline; text-underline-offset: 3px; }
  .taper-strip .ini { width: 38px; height: 38px; flex: none; border-radius: 50%; background: var(--ink); color: var(--paper); display: flex; align-items: center; justify-content: center; font: 15px var(--serif); }
  .taper-strip .who { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
  .taper-strip b { font-size: 16px; font-weight: 600; }
  .taper-strip small { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: var(--soft); }
  .sh-act { flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-top: 8px; }
  .rate-grid { gap: 8px 14px; }
  .ratemsg { flex-basis: 100%; }
  .show-body { display: block; padding-top: 0; }
  .sl li { grid-template-columns: 30px minmax(0, 1fr) auto 36px; gap: 10px; padding: 11px 8px 11px 0; }
  .sl .n, .sl .d { font-size: 12px; }
  .sl .tt { font-size: 16px; }
  .sl .ontape { font-size: 12px; }
  .recording { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 36px; margin-top: 40px; padding-top: 28px; border-top: 2px solid var(--ink); }
  .rec-col { gap: 24px; }
  .rec-name { font-size: 30px; }
  .chain-gear, .chain-here { font-size: 14px; }
  .ask { border-radius: 12px; padding: 20px; }
  .ask-q { font-size: 20px; }
  .ask p { font-size: 15px; }
}
@media (max-width: 600px) {
  .show-head { padding: 0 0 18px; gap: 8px; }
  .sh-main { gap: 8px; }
  .show-date { font-size: 42px; }
  .show-place { font-size: 19px; }
  .show-facts { display: none; }
  .taper-strip { margin-top: 4px !important; }
  .taper-strip .ini { width: 34px; height: 34px; font-size: 14px; }
  .sh-act { flex-direction: column; align-items: stretch; gap: 4px; margin-top: 6px; }
  .show-head .play-hero { height: 56px; justify-content: center; width: 100%; }
  .show-head .play-hero .mono { display: inline; }
  .rate-sum { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--soft); }
  .rate-sum b { font: 400 1em var(--mono); color: var(--ink); }
  .rate-sum button { border: 0; padding: 0 4px; color: var(--accent); font-size: 14px; font-weight: 600; }
  .rate-grid { display: none; grid-template-columns: auto auto 1fr; gap: 10px; padding-bottom: 6px; }
  .rate-grid .who { white-space: nowrap; }
  .pips .pip-clear { font-size: 0; padding: 0 4px; margin-left: 0; }          /* a compact x on a phone; still "Clear" to a screen reader */
  .pips .pip-clear::before { content: "\00d7"; font-size: 22px; line-height: 1; }
  .rate-grid.open { display: grid; }
  .pips { gap: 6px; }
  .pips button::after { inset: -6px -4px; }
  .sl li { grid-template-columns: 24px minmax(0, 1fr) auto 32px; gap: 8px; padding: 6px 0 6px 0; min-height: 44px; align-items: center; }
  .sl .n { font-size: 11px; }
  .sl .tline { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sl .tt { font-size: 15px; }
  .sl .cv { margin-left: 6px; font-size: 12px; }
  .sl .rare { display: inline-block; width: 8px; height: 8px; margin-left: 6px; border-radius: 50%; background: var(--gold); font-size: 0; vertical-align: middle; }
  .sl .ontape { display: none; }
  .recording { display: flex; flex-direction: column; gap: 24px; margin-top: 32px; }
  .rec-col { display: contents; }
  .rec-who { order: 1; } .rec-words { order: 2; } .ask { order: 3; } .chain { order: 4; }
  .rec-name { font-size: 26px; }
  .rec-words blockquote { font-size: 18px; }
  .chain summary { display: flex; align-items: center; min-height: 44px; margin-top: 4px; font-weight: 600; color: var(--accent); cursor: pointer; }
  .chain-short { display: block; margin: 0; }
  .chain > .label { margin-bottom: 8px; }
  .chain-gear { margin-top: 8px !important; }
  .show-links { flex-direction: column; gap: 0; padding-top: 16px; }
}

/* ---------------------------------------------------------------- shared by the inner pages */
.page-head { padding: 12px 0 40px; }
.page-head h1 { margin: 0; }
.page-head p { margin: 0; font-size: 17px; line-height: 1.55; color: var(--soft); }
.page-head p.eyebrow { color: var(--accent); font-size: 13px; line-height: 1.3; }
.play-ring { width: 44px; height: 44px; min-height: 0; padding: 0; flex: none; border-radius: 50%; background: var(--card); color: var(--accent); display: flex; align-items: center; justify-content: center; }
.play-ring:hover { border-color: var(--accent); }
.find { font: inherit; width: min(100%, 22em); height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--border); background: var(--card); color: inherit; }

/* ---------------------------------------------------------------- eras */
.eras-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; }
.eras-head h1 { font-size: 72px; line-height: .98; letter-spacing: -0.025em; }
.eras-head p { max-width: 360px; }
.ww { position: relative; height: 230px; }
.ww-era { position: absolute; top: 0; height: 230px; min-height: 0; padding: 0; border: 0; border-radius: 0; background: transparent; text-align: left; color: var(--ink); }
.ww-lab { position: absolute; left: 0; display: flex; flex-direction: column; gap: 2px; padding-left: 8px; border-left: 1px solid var(--dashed); white-space: nowrap; }
.ww-lab.t0 { top: 0; height: 150px; } .ww-lab.t1 { top: 50px; height: 100px; } .ww-lab.t2 { top: 100px; height: 50px; }
.ww-lab .nm { font: 400 19px/1.2 var(--serif); }
.ww-lab .yrs { font: 11px var(--mono); color: var(--soft); }
.ww-band { position: absolute; left: 1px; right: 1px; top: 150px; height: 12px; border-radius: 2px; background: var(--ink); }
.ww-era.empty .nm { color: var(--soft); }
.ww-era.empty .ww-band { background: var(--line); }
.ww-era:hover .nm { color: var(--accent); }
.ww-era.sel .ww-lab { border-left-color: var(--accent); }
.ww-era.sel .nm { color: var(--accent); font-weight: 600; }
.ww-era.sel .ww-band { background: var(--accent); }
.ww-dot { position: absolute; top: 148px; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; background: var(--card); border: 2px solid var(--ink); pointer-events: none; }
.ww-yr { position: absolute; top: 196px; transform: translateX(-50%); font: 12px var(--mono); color: var(--soft); }
.eras-rows { display: none; }
.eras-rows .walk { display: none !important; }
.chapter { margin-top: 40px; border-top: 2px solid var(--ink); padding-top: 32px; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 56px; }
.ch-left { display: flex; flex-direction: column; gap: 12px; }
.ch-left > * { margin: 0; }
.ch-left h2 { font-size: 56px; line-height: 1; letter-spacing: -0.02em; }
.ch-sub { font-size: 17px; line-height: 1.5; color: var(--soft); }
.ch-play { align-self: flex-start; margin-top: 12px !important; height: 56px; padding: 0 26px 0 18px; font-size: 17px; gap: 12px; }
.ch-nav { display: flex; gap: 12px; margin-top: 8px !important; }
.ch-nav button { font-size: 14px; padding: 0 16px; }
.ch-nav button:disabled { opacity: .4; cursor: default; }
.ch-nights { list-style: none; margin: 0; padding: 0; }
.ch-nights li { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--line); }
.ch-nights .play-ring { width: 48px; height: 48px; }
.ch-where { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ch-where > a { font: 400 22px/1.2 var(--serif); color: var(--ink); }
.ch-where > a:hover { color: var(--accent); text-decoration: none; }
.ch-where > span { font-size: 14px; color: var(--soft); }
.ch-date { font: 13px var(--mono); color: var(--soft); white-space: nowrap; }
.ch-empty { border: 1px dashed var(--dashed); border-radius: 12px; padding: 32px; display: flex; flex-direction: column; gap: 10px; }
.ch-empty-h { font: 400 26px/1.2 var(--serif); }
.ch-empty p { margin: 0; color: var(--soft); line-height: 1.55; }
.ch-empty a { font-weight: 600; }
.era-list { display: none; list-style: none; margin: 0 0 0 7px; padding: 0; border-left: 2px solid var(--ink); }
.era-list li { position: relative; padding: 12px 0 14px 22px; scroll-margin-top: 12px; }
.era-list li::before { content: ""; position: absolute; left: -9px; top: 16px; width: 16px; height: 16px; box-sizing: border-box; border-radius: 50%; background: var(--ink); border: 2px solid var(--ink); }
.era-list li.empty { padding: 6px 0 8px 22px; }
.era-list li.empty::before { top: 9px; background: var(--paper); border-color: var(--dashed); }
.era-list li.sel::before { background: var(--accent); border-color: var(--accent); }
.el-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.el-head .nm { font: 400 23px/1.2 var(--serif); }
.empty .el-head .nm { font-size: 18px; color: var(--soft); }
.sel .el-head .nm { color: var(--accent); font-weight: 600; }
.el-head .yrs { font: 11px var(--mono); color: var(--soft); white-space: nowrap; }
.era-list a:not([href^="mailto"]) { display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 44px; border-bottom: 1px solid var(--line); color: var(--ink); font-size: 15px; }
.era-list a span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.era-list a .d { font: 12px var(--mono); color: var(--soft); white-space: nowrap; }
.era-list p { margin: 2px 0 0; font-size: 13px; color: var(--soft); }

/* ---------------------------------------------------------------- library
   Every tape as a ticket (the Apple TV's Shows tab, for the web). The groups down the side on
   desktop, a row of pills above the tickets on tablet and phone. */
.lib-head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 64px; align-items: end; }
.lib-head h1 { font-size: 88px; line-height: .95; letter-spacing: -0.025em; }
.lib-head .eyebrow { margin-bottom: 14px; }
.lib-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 16px; padding: 16px 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); }
.lib-bar .switch:last-child { margin-left: auto; }
.lib-bar .switch button { height: 38px; font-size: 14px; }
.lib-body { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 48px; }
.lib-index { position: sticky; top: 0; align-self: start; display: flex; flex-direction: column; max-height: calc(100vh - var(--player-h)); overflow-y: auto; padding: 32px 4px 24px 0; }
.lib-index .label { margin-bottom: 8px; }
.lib-index a { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; min-height: 40px; padding: 8px 0; border-bottom: 1px solid var(--line); color: var(--ink); font-size: 15px; line-height: 1.3; }
.lib-index a:hover { color: var(--accent); text-decoration: none; }
.lib-index .ct { font: 12px var(--mono); color: var(--soft); }
.lib-group { padding: 32px 0 40px; scroll-margin-top: 8px; }
.lib-group + .lib-group { border-top: 1px solid var(--line); }
.lib-ghead { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin-bottom: 20px; }
.lib-group h2 { margin: 0; font-size: 34px; }
.lib-detail { font: 13px var(--mono); color: var(--soft); }
.lib-act { display: flex; align-items: center; gap: 8px 18px; margin-left: auto; font-size: 15px; font-weight: 500; }
.lib-walk { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; padding: 0 16px 0 12px; color: var(--accent); }
.lib-walk:hover { border-color: var(--accent); }
.lib-ask { margin: -8px 0 20px; max-width: 640px; color: var(--soft); }
.lib-ask a { font-weight: 600; overflow-wrap: anywhere; }

.tk-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 20px; }
.tk { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 16px 16px 14px; background: var(--card); border: 1px solid var(--line); border-radius: 10px; }
.tk:hover { border-color: var(--ink); }
.tk:has(.tk-go:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.tk-go { flex: 1; display: flex; flex-direction: column; min-width: 0; color: var(--ink); outline: none; }
.tk-go:hover { color: var(--ink); text-decoration: none; }
.tk-go::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }          /* the whole ticket opens the show */
.tk-top { min-height: 1.3em; font: 400 11px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk-date { margin-top: 16px; font: 500 34px/1 var(--serif); letter-spacing: -0.02em; }
.tk-venue { margin-top: 12px; font: 400 16px/1.25 var(--serif); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tk-city { font: italic 400 15px/1.3 var(--serif); color: var(--soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk-by { position: relative; z-index: 1; margin-top: 14px; padding-top: 10px; border-top: 1px dashed var(--dashed); font-size: 13px; line-height: 1.4; color: var(--soft); }   /* above the ticket's link, so the taper's name is its own link */
.tk-by a { font-weight: 600; }

@media (max-width: 960px) {
  .lib-head { display: flex; flex-direction: column; align-items: stretch; gap: 16px; padding: 20px 0 32px; }
  .lib-head h1 { font-size: 64px; }
  .lib-body { display: block; }
  .lib-index { position: static; flex-direction: row; flex-wrap: wrap; gap: 8px; max-height: none; overflow: visible; padding: 20px 0 4px; }
  .lib-index .label { display: none; }
  .lib-index a { min-height: 40px; padding: 0 14px; align-items: center; border: 1px solid var(--border); border-radius: 999px; font-size: 14px; }
  .lib-index a:hover { border-color: var(--ink); }
}
@media (max-width: 600px) {
  .lib-head { padding: 4px 0 24px; }
  .lib-head h1 { font-size: 48px; }
  .lib-bar { gap: 10px; }
  .lib-bar > .label { display: none; }
  .lib-bar .switch:last-child { margin-left: 0; }
  .lib-bar .switch button { padding: 0 11px; font-size: 13px; }
  .lib-index { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--gutter)); padding: 16px var(--gutter) 4px; }
  .lib-index::-webkit-scrollbar { display: none; }
  .lib-index a { flex: none; }
  .lib-group { padding: 24px 0 32px; }
  .lib-group h2 { font-size: 28px; }
  .lib-act { margin-left: 0; width: 100%; }
  .tk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .tk { padding: 14px 12px 12px; border-radius: 12px; }
  .tk-date { font-size: 28px; margin-top: 12px; }
  .tk-venue { font-size: 15px; }
  .tk-city { font-size: 14px; }
  .tk-by { font-size: 12px; }
}

/* ---------------------------------------------------------------- song journey */
.sj { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 64px; padding-top: 12px; }
.sj-rail { display: flex; flex-direction: column; gap: 32px; font-size: 15px; }
.sj-rail > div { display: flex; flex-direction: column; }
.sj-lab { padding-bottom: 8px; border-bottom: 1px solid var(--ink); }
.sj-rail a:not(.sj-all) { display: flex; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); color: var(--ink); }
.sj-rail a:hover { color: var(--accent); text-decoration: none; }
.sj-rail a.here { color: var(--accent); font-weight: 600; }
.sj-rail .ct { font: 12px var(--mono); color: var(--soft); }
.sj-rail .cat { font-size: 12px; padding: 5px 10px; margin-bottom: 8px; }
.sj-rail p { margin: 0 0 6px; color: var(--soft); font-size: 14px; }
.sj-all { font-weight: 600; }
.sj-pills { display: none; }
.sj-head { display: flex; flex-direction: column; gap: 14px; padding-bottom: 36px; border-bottom: 1px solid var(--ink); }
.sj-head > * { margin: 0; }
.sj-head .eyebrow { font-size: 13px; }
.sj-title { font-size: 128px; line-height: .9; letter-spacing: -0.03em; overflow-wrap: anywhere; }
.sj-title.long { font-size: 88px; }
.sj-title.longer { font-size: 64px; line-height: .95; }
.sj-desc { font-size: 18px; line-height: 1.55; color: var(--soft); max-width: 620px; }
.sj-desc-short { display: none; }
.sj-go { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 10px !important; }
.sj-go a { font-size: 15px; font-weight: 500; }
.sj-cols, .sj-list li { display: grid; grid-template-columns: 44px 112px minmax(0, 1fr) minmax(100px, 170px) 52px 36px; gap: 20px; }
.sj-cols { padding: 18px 12px 8px 0; font: 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--soft); }
.sj-cols span:nth-child(5) { text-align: right; }
.sj-list { list-style: none; margin: 0; padding: 0; }
.sj-list li { align-items: center; padding: 16px 12px 16px 0; border-bottom: 1px solid var(--line); }
.sj-list li.now { background: var(--now); }
.sj-list li.now .sj-date { color: var(--accent); }
.sj-date { font: 13px var(--mono); color: var(--soft); }
.sj-where { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sj-where > a { font: 400 21px/1.2 var(--serif); color: var(--ink); }
.sj-where > a:hover { color: var(--accent); text-decoration: none; }
.sj-where > span { font-size: 14px; color: var(--soft); }
.sj-where .sj-tag { font: 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
.sj-where .sj-tape { font-size: 13px; }
.sj-bar { height: 8px; background: var(--tint); border-radius: 2px; }
.sj-bar span { display: block; height: 100%; background: var(--ink); border-radius: 2px; }
.sj-time { font: 13px var(--mono); text-align: right; }
.az { list-style: none; margin: 24px 0 0; padding: 0; columns: 2; column-gap: 40px; }
.az li { break-inside: avoid; }
.az a { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); color: var(--ink); }
.az a:hover { color: var(--accent); text-decoration: none; }
.az small { color: var(--soft); font-size: 13px; }
.az .ct { font: 12px var(--mono); color: var(--soft); white-space: nowrap; }

/* ---------------------------------------------------------------- taper index and taper page */
.tapers-head { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 64px; align-items: end; border-bottom: 1px solid var(--ink); }
.tapers-head h1 { font-size: 88px; line-height: .95; letter-spacing: -0.025em; }
.tapers-head .eyebrow { font-size: 13px; margin-bottom: 14px; }
.tapers-head p { font-size: 18px; }
.tp-cols, .tp { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1fr) minmax(0, 1.1fr) 52px; gap: 32px; }
.tp-cols { padding-top: 18px; font: 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--soft); }
.tp { align-items: start; padding: 28px 0; border-bottom: 1px solid var(--line); }
.tp-who { display: flex; flex-direction: column; gap: 6px; }
.tp-who a { font: 400 32px/1.05 var(--serif); color: var(--ink); }
.tp-who a:hover { color: var(--accent); text-decoration: none; }
.tp-who span { font: 13px var(--mono); color: var(--soft); }
.tp-nights { display: flex; flex-direction: column; gap: 6px; font-size: 15px; }
.tp-nights a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
.tp-nights a:hover { color: var(--accent); }
.tp-gear { display: flex; flex-direction: column; gap: 4px; font: 12px/1.5 var(--mono); color: var(--soft); overflow-wrap: anywhere; }
.tp-unknown { margin-top: 56px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 36px; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 48px; }
.tp-unknown > div:first-child { display: flex; flex-direction: column; gap: 12px; }
.tp-unknown h2 { margin: 0; font-size: 36px; line-height: 1.1; }
.tp-unknown p { margin: 0; color: var(--soft); line-height: 1.55; }
.tp-unknown a[href^="mailto"] { font-weight: 600; }
.tp-unk-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; align-content: start; }
.tp-unk-list a { display: flex; flex-direction: column; gap: 2px; padding: 14px 0; border-top: 1px solid var(--border); color: var(--ink); }
.tp-unk-list a:hover { text-decoration: none; }
.tp-unk-list a:hover span:first-child { color: var(--accent); }
.tp-unk-list span:first-child { font: 400 20px/1.2 var(--serif); }

.taper-head { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 64px; align-items: end; padding-bottom: 44px; border-bottom: 1px solid var(--ink); }
.th-l { display: flex; flex-direction: column; gap: 14px; }
.th-l > * { margin: 0; }
.th-l .eyebrow { font-size: 13px; align-self: flex-start; }
.th-l h1 { font-size: 104px; line-height: .92; letter-spacing: -0.03em; }
.th-sum { font-size: 18px !important; }
.th-special { display: flex; align-items: center; gap: 12px 18px; flex-wrap: wrap; padding-top: 18px; border-top: 1px dashed var(--dashed); }
.th-special > span:last-child { font: italic 400 26px/1.3 var(--serif); color: var(--ink); }
.th-special em { font-weight: 600; color: var(--accent); }
.th-l > div { margin-top: 10px; }
.th-l .play-hero .sh { display: none; }
.th-go { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.taper-head .ask { padding: 22px; }
.taper-head .ask-q { font-size: 20px; }
.taper-head .ask p { font-size: 15px; line-height: 1.5; }
.tape { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 56px; padding: 44px 0; border-bottom: 1px solid var(--line); }
.tape-l { display: flex; flex-direction: column; gap: 12px; }
.tape-l > * { margin: 0; }
.tape-l .eyebrow { font-size: 13px; }
.tape-l h2 { font-size: 52px; line-height: .98; letter-spacing: -0.02em; }
.tape-place { font: 400 22px/1.25 var(--serif); }
.tape-facts, .tape-scores { font-size: 14px; color: var(--soft); }
/* how often a show (or a taper's tapes) has been played: once per listener per day, after half a minute */
.plays-n { margin: 10px 0 0; font: 400 12px/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--soft); }
.tape-scores b { font: 400 1em var(--mono); color: var(--ink); }
.tape-go { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 8px !important; }
.tape-go .play-hero { height: 52px; padding: 0 24px 0 18px; font-size: 16px; gap: 10px; }
.tape-go a { font-size: 15px; font-weight: 500; }
.tape-r { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.tape-r .label { display: block; font-size: 11px; margin-bottom: 8px; }
.tape-r p { margin: 0; font-size: 15px; line-height: 1.5; }
.tape-r .chain-gear { list-style: none; margin: 0; font-size: 14px; display: flex; flex-direction: column; }
.tape-r blockquote { margin: 0; font: 400 18px/1.5 var(--serif); white-space: pre-line; overflow-wrap: anywhere; }

@media (max-width: 1100px) {
  .ww { display: none; }
  .eras-rows { display: block; margin-top: 8px; }
  .eras-head { flex-direction: column; align-items: stretch; gap: 12px; padding: 20px 0 28px; }
  .eras-head h1 { font-size: 64px; }
  .eras-head h1 br { display: none; }
  .eras-head p { max-width: none; font-size: 16px; }
  .chapter { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .ch-left h2 { font-size: 52px; }
}
@media (max-width: 960px) {
  .sj { display: block; padding-top: 0; }
  .sj-rail { display: none; }
  .sj-pills { display: flex; flex-direction: column; gap: 8px; padding-top: 12px; }
  .sj-pills .label { font-size: 11px; }
  .sj-pillrow { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; margin-right: calc(-1 * var(--gutter)); padding-right: var(--gutter); }
  .sj-pillrow::-webkit-scrollbar { display: none; }
  .sj-pillrow a { flex: none; height: 44px; padding: 0 14px; display: flex; align-items: center; gap: 8px; border: 1px solid var(--border); border-radius: 999px; color: var(--ink); font-size: 15px; }
  .sj-pillrow a:hover { text-decoration: none; border-color: var(--ink); }
  .sj-pillrow a span { font: 11px var(--mono); opacity: .75; }
  .sj-pillrow a.here { background: var(--ink); border-color: var(--ink); color: var(--paper); }
  .sj-head { padding: 24px 0 28px; gap: 12px; }
  .sj-head .eyebrow { font-size: 12px; }
  .sj-title { font-size: 104px; }
  .sj-title.long { font-size: 72px; }
  .sj-title.longer { font-size: 52px; }
  .sj-desc { font-size: 16px; }
  .sj-cols { display: none; }
  .sj-list li { grid-template-columns: 44px minmax(0, 1fr) auto 36px; grid-template-areas: "play date date share" "play where where share" "play bar time share"; gap: 4px 14px; align-items: start; padding: 16px 0; }
  .sj-list .share-ic { grid-area: share; align-self: center; }
  .sj-list .play-ring { grid-area: play; }
  .sj-date { grid-area: date; font-size: 12px; }
  .sj-where { grid-area: where; }
  .sj-where > span { font-size: 13px; }
  .sj-bar { grid-area: bar; height: 6px; align-self: center; margin-top: 6px; }
  .sj-time { grid-area: time; font-size: 12px; margin-top: 6px; }
  .tapers-head, .taper-head { display: flex; flex-direction: column; align-items: stretch; gap: 16px; padding: 20px 0 32px; }
  .tapers-head h1 { font-size: 64px; }
  .th-l h1 { font-size: 80px; }
  .tp-cols { display: none; }
  .tp { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 44px; grid-template-areas: "who who play" "nights gear gear"; gap: 14px 24px; }
  .tp-who { grid-area: who; } .tp-nights { grid-area: nights; } .tp-gear { grid-area: gear; } .tp .play-ring { grid-area: play; }
  .tp-unknown { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 28px; }
  .tape { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 36px 0; }
  .tape-l h2 { font-size: 44px; }
}
@media (max-width: 600px) {
  .page-head p { font-size: 16px; }
  .eras-head { padding-top: 4px; }
  .eras-head h1 { font-size: 44px; }
  .eras-rows, .chapter { display: none; }
  .era-list { display: block; }
  .sj-head { padding: 18px 0; gap: 8px; }
  .sj-title { font-size: 60px; }
  .sj-title.long { font-size: 48px; }
  .sj-title.longer { font-size: 38px; line-height: 1; }
  .sj-desc { display: none; }
  .sj-desc-short { display: block; font-size: 15px; color: var(--soft); }
  .sj-go { flex-direction: column; align-items: stretch; gap: 4px; margin-top: 6px !important; }
  .sj-go .play-hero { height: 56px; justify-content: center; font-size: 18px; gap: 12px; padding: 0 20px; }
  .sj-go a { align-self: center; min-height: 44px; display: flex; align-items: center; }
  .sj-list li { grid-template-columns: 44px minmax(0, 1fr) auto 32px; grid-template-areas: "play where time share" "play date date share" ". bar bar bar"; gap: 2px 10px; padding: 10px 0 0 0; border-bottom: 0; align-items: center; }
  .sj-where { gap: 0; }
  .sj-where > a { font-size: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sj-city, .sj-where .sj-tape { display: none; }
  .sj-where .sj-by { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sj-where .sj-tag { font-size: 10px; }
  .sj-date { font-size: 12px; }
  .sj-time { margin-top: 0; align-self: baseline; }
  .sj-bar { height: 3px; margin: 9px 0 0; border-radius: 0; }
  .az { columns: 1; }
  .tapers-head h1 { font-size: 42px; line-height: .96; }
  .tapers-head, .taper-head { padding: 4px 0 28px; gap: 12px; }
  .th-l h1 { font-size: 52px; }
  .th-sum { font-size: 16px !important; }
  .th-special > span:last-child { font-size: 22px; }
  .th-l .play-hero .lg { display: none; }
  .th-l .play-hero .sh { display: inline; }
  .th-l .play-hero { flex: 1; justify-content: center; height: 56px; font-size: 17px; padding: 0 16px; }
  .th-go { flex-wrap: nowrap; gap: 8px; }
  .tp { grid-template-areas: "who who play" "nights nights nights" "gear gear gear"; gap: 12px; padding: 22px 0; }
  .tp-who a { font-size: 28px; }
  .tp-unknown { padding: 22px; margin-top: 40px; }
  .tp-unknown h2 { font-size: 28px; }
  .tp-unk-list { grid-template-columns: minmax(0, 1fr); }
  .tape { padding: 28px 0; gap: 22px; }
  .tape-l h2 { font-size: 36px; }
  .tape-place { font-size: 20px; }
}

/* ---------------------------------------------------------------- about */
.ab-head { display: flex; flex-direction: column; gap: 16px; padding: 12px 0 44px; border-bottom: 1px solid var(--ink); }
.ab-head > * { margin: 0; }
.ab-head .eyebrow { font-size: 13px; }
.ab-head h1 { font-size: 80px; line-height: .98; letter-spacing: -0.025em; max-width: 1000px; }
.ab-part { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: 56px; padding: 40px 0; border-bottom: 1px solid var(--line); }
.ab-part h2 { margin: 0; font-size: 32px; line-height: 1.1; }
.ab-part > div { display: flex; flex-direction: column; gap: 14px; font-size: 18px; line-height: 1.6; max-width: 680px; }
.ab-part p { margin: 0; }
/* the sign-off after the last section, in the content column */
.ab-sign { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: 56px; padding: 40px 0 0; }
.ab-sign > div { grid-column: 2; max-width: 680px; }
.ab-sign p { margin: 0; font: italic 400 20px/1.5 var(--serif); }
.ab-sign .ab-name { margin-top: 10px; font-size: 30px; color: var(--accent); }
.ab-mail { font: 400 28px/1.3 var(--serif); overflow-wrap: anywhere; }
.ab-chain { margin: 0; padding-left: 1.4em; display: flex; flex-direction: column; gap: 12px; }
.ab-chain li::marker { font: 15px var(--mono); color: var(--accent); }
.ab-chain b { font-weight: 600; }
@media (max-width: 960px) {
  .ab-head { padding: 20px 0 32px; }
  .ab-head h1 { font-size: 56px; }
  .ab-part { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 32px 0; }
  .ab-sign { grid-template-columns: minmax(0, 1fr); padding-top: 32px; }
  .ab-sign > div { grid-column: 1; }
  .ab-part h2 { font-size: 28px; }
  .ab-part > div { font-size: 17px; }
}
@media (max-width: 600px) {
  .ab-head { padding-top: 4px; }
  .ab-head h1 { font-size: 36px; line-height: 1.02; }
  .ab-part { padding: 26px 0; gap: 10px; }
  .ab-part h2 { font-size: 24px; }
  .ab-part > div { font-size: 16px; }
  .ab-mail { font-size: 22px; }
}

/* ---------------------------------------------------------------- the player
   Desktop: the whole tape as a strip cut where the taper cut it, then title, controls, time and
   the Remaster / Original switch; shrinks to one line while reading. Tablet: one row. Phone: a
   dark floating mini player that opens the now-playing screen. */
#player[hidden], #np[hidden] { display: none !important; }
#player { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; background: var(--card); border-top: 1px solid var(--line);
  box-shadow: 0 -8px 24px rgba(28, 25, 21, .06); padding-bottom: env(safe-area-inset-bottom); }
.p-strip { display: flex; gap: 2px; height: 8px; padding: 0 2px; }
.p-strip span { background: var(--tint); cursor: pointer; min-width: 1px; }
.p-strip span:hover { opacity: .75; }
.p-strip .done { background: var(--accent); }
.p-strip .cur { background: linear-gradient(to right, var(--accent) var(--f, 0%), color-mix(in srgb, var(--accent) 60%, var(--card)) var(--f, 0%)); }
.is-original .p-strip .done { background: var(--ink); }
.is-original .p-strip .cur { background: linear-gradient(to right, var(--ink) var(--f, 0%), color-mix(in srgb, var(--ink) 55%, var(--card)) var(--f, 0%)); }
.p-thin { display: none; height: 3px; background: var(--tint); }
.p-thin span { display: block; height: 3px; width: 0; background: var(--accent); }
.p-row { max-width: var(--wide); margin: 0 auto; padding: 12px var(--gutter); display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 24px; align-items: center; }
.p-row > #p-play, .p-expand, .p-chip, .p-time { display: none; }
.p-now { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.p-head { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.p-title { font-size: 17px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.p-title:hover { color: var(--accent); text-decoration: none; }
.p-title.aside { font-style: italic; }
.p-count { font-size: 14px; color: var(--soft); white-space: nowrap; }
.p-sub { display: flex; font-size: 13px; color: var(--soft); min-width: 0; white-space: nowrap; }
.p-where { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.p-by { flex: none; }
.p-city { display: none; }
.p-orig { color: var(--ink); overflow: hidden; text-overflow: ellipsis; }
.p-controls { display: flex; align-items: center; gap: 10px; }
.p-ctl { width: 44px; height: 44px; min-height: 0; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ink); display: flex; align-items: center; justify-content: center; }
.p-ctl:hover { background: var(--tint); }
.p-mainbtn { width: 56px; height: 56px; background: var(--accent); color: var(--accent-ink); }
.p-mainbtn:hover { background: var(--accent-hover); }
.is-original .p-mainbtn { background: var(--ink); color: var(--paper); }
.p-side { display: flex; justify-content: flex-end; align-items: center; gap: 18px; min-width: 0; }
.p-seekbox { display: flex; align-items: center; gap: 10px; width: 220px; font: 12px var(--mono); color: var(--soft); }
.p-seekbox input { flex-grow: 1; min-width: 0; margin: 0; accent-color: var(--accent); }
.is-original .p-seekbox input { accent-color: var(--ink); }
.switch { display: inline-flex; border: 1px solid var(--border); border-radius: 999px; padding: 3px; }
.switch button { height: 34px; min-height: 0; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; color: var(--ink); font-size: 13px; font-weight: 400; }
.switch button.on { background: var(--ink); color: var(--paper); font-weight: 600; }

@media (min-width: 961px) {
  /* while reading: one line, the credit kept */
  #player.compact { left: 50%; right: auto; bottom: 16px; width: min(860px, calc(100% - 80px)); transform: translateX(-50%); border: 0; border-radius: 999px;
    box-shadow: 0 1px 0 var(--line), 0 10px 30px rgba(28, 25, 21, .12); padding-bottom: 0; }
  #player.compact .p-strip, #player.compact .p-controls, #player.compact .p-seekbox, #player.compact .switch, #player.compact .p-count { display: none; }
  #player.compact .p-row { display: flex; gap: 16px; padding: 8px 10px 8px 8px; max-width: none; }
  #player.compact .p-row > #p-play { display: flex; width: 44px; height: 44px; }
  #player.compact .p-now { flex: 1; flex-direction: row; align-items: baseline; gap: 6px; font-size: 14px; }
  #player.compact .p-head { flex: none; max-width: 45%; }
  #player.compact .p-title { font-size: 14px; }
  #player.compact .p-sub { font-size: 14px; flex: 1; }
  #player.compact .p-time { display: inline; font: 12px var(--mono); color: var(--soft); white-space: nowrap; }
  #player.compact .p-chip { display: inline-block; }
}
.p-chip { min-height: 0; height: auto; padding: 6px 12px; border: 0; border-radius: 999px; background: var(--ink); color: var(--paper); font-size: 12px; font-weight: 600; position: relative; }
.p-chip::after { content: ""; position: absolute; inset: -10px -4px; }

@media (max-width: 960px) {
  body { --player-h: 76px; }
  .p-strip { display: none; }
  .p-thin { display: block; }
  .p-row { display: flex; gap: 16px; padding: 10px var(--gutter); }
  .p-row > #p-play { display: flex; width: 52px; height: 52px; flex: none; }
  .p-controls, .p-seekbox { display: none; }
  .p-now { flex: 1; }
  .p-title { font-size: 16px; }
  .p-count { display: none; }
  .p-expand { display: flex; order: 3; width: 44px; height: 44px; min-height: 0; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ink); align-items: center; justify-content: center; }
  .p-side { flex: none; order: 2; }
  .switch button { height: 36px; }
}
@media (max-width: 600px) {
  /* the phone mini player is dark in both modes */
  body { --player-h: 84px; }
  #player { left: 8px; right: 8px; bottom: calc(12px + env(safe-area-inset-bottom)); padding: 0; border: 0; border-radius: 16px; overflow: hidden;
    background: #1c1915; color: #f3eee4; box-shadow: 0 10px 30px rgba(28, 25, 21, .25); }
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) #player { box-shadow: 0 0 0 1px #3a342c, 0 10px 30px rgba(0, 0, 0, .5); } }
  :root[data-theme="dark"] #player { box-shadow: 0 0 0 1px #3a342c, 0 10px 30px rgba(0, 0, 0, .5); }
  .p-thin { background: #3a342c; }
  .p-thin span { background: #e8825f; }
  .p-row { position: relative; gap: 12px; padding: 8px 8px 8px 14px; }
  .p-now { order: 1; }
  .p-side { order: 2; }
  .p-row > #p-play { order: 3; width: 44px; height: 44px; background: #e8825f; color: #1c1915; }
  #player.is-original .p-row > #p-play { background: #f3eee4; color: #1c1915; }
  .p-title { font-size: 14px; color: #f3eee4; }
  .p-sub { font-size: 12px; color: #c8bfb0; }
  .p-sub a { color: inherit; }
  .p-orig { color: #c8bfb0; }
  .p-venue { display: none; }
  .p-city { display: inline; }
  #player .switch { display: none; }
  .p-chip { display: inline-block; z-index: 2; font-size: 11px; padding: 4px 9px; background: transparent; color: #f3eee4; border: 1px solid #635b50; }
  /* the whole left side opens the now-playing screen */
  .p-expand { position: absolute; inset: 0 120px 0 0; z-index: 1; width: auto; height: auto; border-radius: 0; opacity: 0; }
}

/* now playing (phone): a typographic date ticket in place of album art */
#np { position: fixed; inset: 0; z-index: 20; display: flex; flex-direction: column; overflow-y: auto; background: #16130f; color: #efe8dc;
  padding-bottom: env(safe-area-inset-bottom); }
body.np-open { overflow: hidden; }
#np > :not(.np-next) { width: 100%; max-width: 480px; margin-left: auto; margin-right: auto; }
#np a { color: #e8825f; }
.np-top { display: flex; justify-content: space-between; align-items: center; padding: 10px 8px 0; }
.np-close { width: 44px; height: 44px; min-height: 0; padding: 0; border: 0; background: transparent; color: #efe8dc; display: flex; align-items: center; justify-content: center; }
.np-count { font: 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #a59b8b; }
.np-show { height: 44px; padding: 0 10px; display: flex; align-items: center; font-size: 14px; }
.np-acts { display: flex; align-items: center; }
.np-share { width: 44px; height: 44px; min-height: 0; padding: 0; border: 0; background: transparent; color: #efe8dc; display: flex; align-items: center; justify-content: center; }
#np .np-ticket { width: calc(100% - 40px); max-width: 440px; margin-top: 14px; min-height: 300px; border-radius: 14px; background: #1f1b16; border: 1px solid #3a342c; padding: 22px;
  display: flex; flex-direction: column; justify-content: space-between; gap: 20px; }
.np-tk-head { display: flex; justify-content: space-between; font: 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #a59b8b; }
.np-date { font: 400 64px/.92 var(--serif); letter-spacing: -0.03em; }
.np-city { font: italic 400 20px var(--serif); color: #a59b8b; margin-top: 10px; }
.np-by { border-top: 1px dashed #4a4238; padding-top: 12px; font-size: 13px; color: #a59b8b; }
.np-by a { font-weight: 600; }
.np-what { padding: 24px 20px 0; display: flex; flex-direction: column; gap: 4px; }
.np-title { font: 400 30px/1.1 var(--serif); }
.np-venue { font-size: 14px; color: #a59b8b; }
.np-seek { padding: 20px 20px 0; }
.np-seek input { width: 100%; margin: 0; accent-color: #e8825f; }
.np-times { display: flex; justify-content: space-between; padding-top: 8px; font: 12px var(--mono); color: #a59b8b; }
.np-controls { display: flex; justify-content: center; align-items: center; gap: 28px; padding-top: 14px; }
.np-controls .p-ctl { width: 56px; height: 56px; color: #efe8dc; }
.np-controls .p-ctl:hover { background: #2c2620; }
.np-controls .p-mainbtn { width: 76px; height: 76px; background: #e8825f; color: #16130f; }
.np-version { padding: 18px 20px 24px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.np-version .switch { border-color: #4a4238; }
.np-version .switch button { height: 38px; padding: 0 18px; font-size: 14px; color: #efe8dc; }
.np-version .switch button.on { background: #efe8dc; color: #16130f; }
.np-note { font-size: 12px; color: #a59b8b; }
.np-next { margin-top: auto; padding: 12px 20px 22px; border-top: 1px solid #3a342c; background: #1f1b16; font-size: 13px; color: #a59b8b; text-align: center; }
.np-next b { color: #efe8dc; font-weight: 400; }

/* ---------------------------------------------------------------- sharing
   A Share pill beside each page's Play, a quiet icon on each cut (setlist rows, song journey rows,
   the player), and one sheet for all of them: the card the link unfurls as, the link, the ways. */
.share-btn { display: inline-flex; align-items: center; gap: 8px; height: 52px; padding: 0 20px; font-size: 16px; flex: none; }
.share-ic { width: 36px; height: 36px; min-height: 0; padding: 0; border: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  color: var(--soft); position: relative; justify-self: end; }
.share-ic::after { content: ""; position: absolute; inset: -4px; }       /* a 44px target */
.share-ic:hover { color: var(--accent); background: var(--tint); }
@media (hover: hover) {
  /* with a mouse, a row's share is faint until the row is pointed at, focused, playing or shared */
  .sl .share-ic, .sj-list .share-ic { opacity: .4; transition: opacity .12s; }     /* there to be found; full on hover */
  .sl li:hover .share-ic, .sl li:focus-within .share-ic, .sl li.now .share-ic, .sl li.cut .share-ic,
  .sj-list li:hover .share-ic, .sj-list li:focus-within .share-ic, .sj-list li.now .share-ic { opacity: 1; }
}
.sh-go { display: flex; gap: 12px; align-items: center; }
.sh-go .share-btn { height: 60px; }
.sj-go .share-btn { height: 52px; }
button.sh-top { font-size: 14px; font-weight: 500; }
.foot-share { font-size: 14px; font-weight: 500; }

/* a cut: the track to the fore, the show (date, place, taper) still right under it */
.cut-head { display: flex; flex-direction: column; gap: 6px; padding-bottom: 18px; margin-bottom: 6px !important; border-bottom: 1px dashed var(--dashed); }
.cut-head > * { margin: 0; }
.cut-title { font: 400 64px/.95 var(--serif); letter-spacing: -0.02em; overflow-wrap: anywhere; }
.cut-title.aside { font-style: italic; }
.cut-facts { font-size: 15px; color: var(--soft); }
.cut-facts a { font-weight: 600; }
.cut-shared { font-size: 14px; color: var(--soft); max-width: 44ch; }
.show-head.is-cut .show-date { font-size: 44px; }
.show-head.is-cut .show-place { font-size: 22px; }

/* the sheet */
#share { width: min(560px, calc(100% - 32px)); max-height: calc(100% - 32px); padding: 0; border: 1px solid var(--line); border-radius: 14px;
  background: var(--card); color: var(--ink); box-shadow: 0 20px 60px rgba(28, 25, 21, .25); }
#share::backdrop { background: rgba(22, 19, 15, .45); }
.sh-in { display: flex; flex-direction: column; gap: 12px; padding: 16px 20px 20px; }
.sh-top { display: flex; justify-content: space-between; align-items: center; }
.sh-close { width: 40px; height: 40px; min-height: 0; padding: 0; border: 0; font-size: 26px; line-height: 1; color: var(--soft); margin-right: -10px; }
.sh-close:hover { color: var(--ink); }
.sh-title { margin: 0; font: 400 28px/1.1 var(--serif); overflow-wrap: anywhere; }
.sh-sub { margin: -4px 0 0; font-size: 14px; color: var(--soft); }
.sh-card { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 630; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); }
.sh-card[hidden] { display: none; }
.sh-at { display: flex; align-items: center; gap: 8px; min-height: 36px; font-size: 15px; cursor: pointer; }
.sh-at[hidden] { display: none; }
.sh-at input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); }
.sh-link { display: flex; gap: 8px; }
.sh-link input { flex: 1; min-width: 0; height: 44px; padding: 0 12px; font: 13px var(--mono); color: var(--ink); background: var(--paper); border: 1px solid var(--border); border-radius: 8px; }
.sh-link .primary { flex: none; }
.sh-ways { display: flex; flex-wrap: wrap; gap: 8px; }
.sh-ways a, .sh-native { display: inline-flex; align-items: center; gap: 8px; height: 40px; min-height: 0; padding: 0 16px; border: 1px solid var(--border); border-radius: 999px;
  color: var(--ink); font-size: 14px; font-weight: 500; }
.sh-native[hidden] { display: none; }
.sh-ways a:hover { border-color: var(--ink); color: var(--ink); text-decoration: none; }
.sh-note { margin: 0; min-height: 1.2em; font-size: 13px; color: var(--soft); }

/* the player: share sits by the switch on the desktop bar; tablet and phone have it on the now-playing screen */
.p-share { color: var(--soft); }
.p-share:hover { color: var(--accent); }
@media (min-width: 961px) { #player.compact .p-share { display: none; } }
@media (max-width: 960px) { .p-share { display: none; } }

@media (max-width: 960px) {
  .cut-title { font-size: 52px; }
  .show-head.is-cut .show-date { font-size: 40px; }
  .sh-go { flex: 1; }
}
@media (max-width: 600px) {
  .cut-head { padding-bottom: 12px; }
  .cut-title { font-size: 38px; line-height: 1; }
  .cut-facts { font-size: 14px; }
  .show-head.is-cut .show-date { font-size: 30px; }
  .show-head.is-cut .show-place { font-size: 17px; }
  .sh-go { gap: 8px; }
  .sh-go .play-hero { flex: 1; min-width: 0; }
  .sh-go .play-hero span:not(.mono) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .share-btn { height: 56px; padding: 0 16px; }
  .sh-go .share-btn, .th-go .share-btn { width: 56px; padding: 0; justify-content: center; }
  .sh-go .share-btn span, .th-go .share-btn span { display: none; }
  .th-go .play-hero .mono { display: none; }            /* "Play all of Debbie" and the share icon on one line */
  button.sh-top { align-self: center; min-height: 44px; }
  .sj-go .share-btn { height: 44px; align-self: center; }
  /* the sheet rises from the bottom on a phone */
  #share { width: 100%; max-width: none; margin: auto 0 0; border-radius: 16px 16px 0 0; border: 0; padding-bottom: env(safe-area-inset-bottom); }
  .sh-in { padding: 12px 16px 20px; }
  .sh-title { font-size: 24px; }
  .sh-ways a, .sh-native { height: 44px; }
  .sh-native { order: -1; width: 100%; justify-content: center; background: var(--ink); color: var(--paper); border-color: var(--ink); }
}