/* Layout: a concert-programme ledger. A date rail in Didone numerals on the
   left, the programme on the right; filters ride in a sticky bar. */
:root {
  /* colour: bamboo-leaf green and brass on cool paper */
  --paper: #f1f3ee;
  --sheet: #fbfcf9;
  --ink: #1b2220;
  --ink-soft: #4d5955;
  --ink-faint: #7c8783;
  --rule: #d5dbd4;
  --rule-strong: #b7c0b8;
  --accent: #2c5a4c;
  --accent-soft: #e2ebe5;
  --brass: #8c6d32;
  --hit: #f3e7c6;
  --focus: #2c5a4c;
  /* type */
  --display: "Newsreader", Georgia, "Times New Roman", serif;
  --body: "Instrument Sans", "Segoe UI", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", monospace;
  --fs-xs: 0.75rem;
  --fs-sm: 0.8125rem;
  --fs-md: 0.9375rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.5rem;
  --fs-2xl: 2.25rem;
  --fs-hero: clamp(2.5rem, 7vw, 4.5rem);
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --tracking-caps: 0.09em;
  /* space: 4 px base, steps about 1.5x */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4.5rem;
  --radius: 3px;
  --control-h: 2.25rem;
  --rail: 7.5rem;
  --measure: 72rem;
  --shadow-bar: 0 1px 0 var(--rule), 0 8px 24px -18px var(--ink);
  --player-min-height: 12.5rem;
  --player-soundcloud-height: 10.5rem;
  --player-archive-height: 20rem;
  --player-max-width: 40rem;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #111614;
    --sheet: #171d1b;
    --ink: #e3e7e1;
    --ink-soft: #aab4ae;
    --ink-faint: #78837e;
    --rule: #2a332f;
    --rule-strong: #3c4741;
    --accent: #8fc2ae;
    --accent-soft: #1f2d28;
    --brass: #cfab62;
    --hit: #3a3220;
    --focus: #8fc2ae;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #111614;
  --sheet: #171d1b;
  --ink: #e3e7e1;
  --ink-soft: #aab4ae;
  --ink-faint: #78837e;
  --rule: #2a332f;
  --rule-strong: #3c4741;
  --accent: #8fc2ae;
  --accent-soft: #1f2d28;
  --brass: #cfab62;
  --hit: #3a3220;
  --focus: #8fc2ae;
  color-scheme: dark;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--fs-md);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto;
  height: env(safe-area-inset-top, 0px);
  z-index: 10;
  background: var(--paper);
}
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.wrap {
  max-width: var(--measure);
  margin-inline: auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.caps {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}
.site-nav { display: flex; gap: var(--sp-5); margin-bottom: var(--sp-5); }
.site-nav a { min-height: var(--control-h); display: inline-flex; align-items: center; }
.site-nav [aria-current="page"] { font-weight: var(--fw-semibold); text-decoration: none; color: var(--ink); }

/* Masthead */
.mast { padding-block: var(--sp-8) var(--sp-6); }
.mast .eyebrow { color: var(--brass); }
.mast h1 {
  font-family: var(--display);
  font-size: var(--fs-hero);
  font-weight: var(--fw-regular);
  font-optical-sizing: auto;
  line-height: 1.02;
  letter-spacing: -0.01em;
  margin-block: var(--sp-3) var(--sp-4);
  text-wrap: balance;
}
.mast h1 em { font-style: italic; color: var(--accent); }
.lede { max-width: 40rem; color: var(--ink-soft); font-size: var(--fs-lg); margin: 0; }
.stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-5) var(--sp-6);
  margin: var(--sp-6) 0 0;
  padding-top: var(--sp-4);
  border-top: 1px solid var(--rule-strong);
}
.stats div { display: grid; gap: var(--sp-1); }
.stats dt { color: var(--ink-faint); }
.stats dd {
  margin: 0;
  font-family: var(--display);
  font-size: var(--fs-2xl);
  line-height: 1;
  font-variant-numeric: lining-nums tabular-nums;
}

/* Accompanists panel */
.ensemble { padding-block: var(--sp-5) var(--sp-6); }
.ensemble h2, .section-head h2 {
  font-family: var(--display);
  font-weight: var(--fw-regular);
  font-size: var(--fs-xl);
  margin: 0;
}
.ensemble .intro { color: var(--ink-soft); margin: var(--sp-2) 0 var(--sp-5); max-width: 40rem; }
.instruments {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: var(--sp-5) var(--sp-6);
}
.instrument h3 { margin: 0 0 var(--sp-2); color: var(--brass); }
.instrument ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-1); }
.person {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sp-3);
  width: 100%;
  min-height: 1.75rem;
  padding: 0;
  border: 0;
  border-bottom: 1px dotted var(--rule-strong);
  background: none;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.person:hover, .person[aria-pressed="true"] { color: var(--accent); }
.person[aria-pressed="true"] { border-bottom-color: var(--accent); font-weight: var(--fw-semibold); }
.person .count { color: var(--ink-faint); font-family: var(--mono); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }

/* Filter bar */
.bar {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 5;
  background: var(--paper);
  box-shadow: var(--shadow-bar);
}
.bar .wrap { padding-block: var(--sp-3); display: grid; gap: var(--sp-3); }
.filters { display: flex; flex-wrap: wrap; align-items: end; gap: var(--sp-3) var(--sp-4); }
.field { display: grid; gap: var(--sp-1); flex: 1 1 11rem; min-width: 0; }
.field label { color: var(--ink-faint); }
.field select, .field input[type="search"] {
  height: var(--control-h);
  width: 100%;
  padding: 0 var(--sp-3);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  background: var(--sheet);
  color: var(--ink);
  font: inherit;
  font-size: var(--fs-md);
}
.toggle { display: flex; align-items: center; gap: var(--sp-2); height: var(--control-h); color: var(--ink-soft); font-size: var(--fs-sm); }
.toggle input { width: 1rem; height: 1rem; accent-color: var(--accent); }
.btn {
  height: var(--control-h);
  padding: 0 var(--sp-4);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  cursor: pointer;
}
.btn:hover { border-color: var(--accent); color: var(--accent); }
.btn:disabled { opacity: 0.45; cursor: default; border-color: var(--rule-strong); color: var(--ink); }
.summary-line { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-2) var(--sp-4); align-items: baseline; }
.result { color: var(--ink-soft); font-size: var(--fs-sm); margin: 0; }
.result strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.decades { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-4); margin: 0; padding: 0; list-style: none; font-size: var(--fs-sm); }
.decades a { text-decoration: none; color: var(--ink-soft); }
.decades a:hover { color: var(--accent); }
.decades .n { color: var(--ink-faint); font-family: var(--mono); font-size: var(--fs-xs); margin-left: var(--sp-1); }

/* Ledger */
main { padding-block: var(--sp-6) var(--sp-8); }
.section { scroll-margin-top: 9rem; }
.section + .section { margin-top: var(--sp-7); }
.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-bottom: var(--sp-2);
  border-bottom: 2px solid var(--ink);
}
.section-head h2 { font-size: var(--fs-2xl); }
.section-head p { margin: 0; color: var(--ink-faint); font-size: var(--fs-sm); }
.entry {
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  gap: var(--sp-5);
  padding-block: var(--sp-5);
  border-bottom: 1px solid var(--rule);
}
.when { display: grid; align-content: start; gap: var(--sp-1); }
.when .day {
  font-family: var(--display);
  font-size: var(--fs-2xl);
  line-height: 0.9;
  font-variant-numeric: lining-nums;
}
.when .day.year { font-size: var(--fs-xl); }
.when .mon { color: var(--brass); }
.when .yr { font-family: var(--display); font-size: var(--fs-lg); font-variant-numeric: lining-nums; }
.when .approx { color: var(--ink-faint); font-size: var(--fs-xs); }
.body { display: grid; gap: var(--sp-3); min-width: 0; }
.place h3 {
  margin: 0;
  font-family: var(--display);
  font-weight: var(--fw-medium);
  font-size: var(--fs-xl);
  line-height: 1.2;
  text-wrap: balance;
}
.place .city { color: var(--ink-soft); font-style: italic; font-weight: var(--fw-regular); }
.meta { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); margin-top: var(--sp-1); color: var(--ink-soft); font-size: var(--fs-sm); }
.tag {
  display: inline-block;
  padding: 0 var(--sp-2);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  color: var(--ink-soft);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  line-height: 1.6;
}
.conf { color: var(--ink-faint); font-size: var(--fs-xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; }
.lineup { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-5); margin: 0; padding: 0; list-style: none; }
.lineup li { display: flex; gap: var(--sp-2); align-items: baseline; }
.lineup .inst { color: var(--brass); }
.lineup button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  cursor: pointer;
  text-decoration: underline dotted var(--rule-strong);
  text-underline-offset: 0.25em;
}
.lineup button:hover { color: var(--accent); }
.lineup button.on { color: var(--accent); font-weight: var(--fw-semibold); }
.programme { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); }
.programme li {
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr) auto;
  gap: var(--sp-1) var(--sp-3);
  align-items: baseline;
  padding-block: var(--sp-2);
  border-bottom: 1px solid var(--rule);
}
.programme li.hit { background: var(--hit); }
.programme .no { color: var(--ink-faint); font-family: var(--mono); font-size: var(--fs-xs); text-align: right; font-variant-numeric: tabular-nums; }
.programme .song { min-width: 0; }
.programme .title { font-weight: var(--fw-medium); }
.programme .raga { color: var(--accent); font-family: var(--display); font-style: italic; font-size: var(--fs-lg); }
.programme .detail { color: var(--ink-soft); font-size: var(--fs-sm); }
.programme .elab { display: inline-flex; flex-wrap: wrap; gap: var(--sp-1); margin-left: var(--sp-2); vertical-align: 0.1em; }
.programme .elab span {
  padding: 0 var(--sp-1);
  border-radius: var(--radius);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}
.programme .line { display: block; color: var(--ink-soft); font-style: italic; font-size: var(--fs-sm); }
.programme .end { display: flex; gap: var(--sp-3); align-items: baseline; white-space: nowrap; }
.programme .dur { color: var(--ink-soft); font-family: var(--mono); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.listen { font-size: var(--fs-sm); text-decoration: none; }
.listen::before { content: "\25B6\FE0E"; font-size: 0.7em; margin-right: var(--sp-1); }
.empty-prog { color: var(--ink-faint); font-size: var(--fs-sm); font-style: italic; margin: 0; }

details.sources { border-left: 2px solid var(--rule-strong); padding-left: var(--sp-4); }
details.sources[open] { border-left-color: var(--accent); }
details.sources summary {
  cursor: pointer;
  color: var(--ink-soft);
  font-size: var(--fs-sm);
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1) var(--sp-3);
  align-items: baseline;
  min-height: 1.5rem;
}
details.sources summary::-webkit-details-marker { display: none; }
details.sources summary::before { content: "+"; font-family: var(--mono); color: var(--accent); width: 0.75rem; }
details.sources[open] summary::before { content: "\2212"; }
.src-body { display: grid; gap: var(--sp-4); padding-block: var(--sp-3) var(--sp-2); }
.src-body h4 { margin: 0 0 var(--sp-2); color: var(--brass); }
.src-list { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--sp-2); }
.src-list li { display: grid; gap: 0; font-size: var(--fs-sm); min-width: 0; }
.src-list a { overflow-wrap: anywhere; }
.src-list .by { color: var(--ink-faint); font-size: var(--fs-xs); }
.src-list .sum { color: var(--ink-soft); }
.notes { color: var(--ink-soft); font-size: var(--fs-sm); margin: 0; max-width: 65ch; }

/* Unplaced single tracks */
.tracks { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr)); gap: 0 var(--sp-6); }
.track { padding-block: var(--sp-3); border-bottom: 1px solid var(--rule); display: grid; gap: var(--sp-1); min-width: 0; }
.track .head { display: flex; justify-content: space-between; gap: var(--sp-3); align-items: baseline; }
.track .title { font-weight: var(--fw-medium); }
.track .raga { color: var(--accent); font-family: var(--display); font-style: italic; font-size: var(--fs-lg); }
.track .detail { color: var(--ink-soft); font-size: var(--fs-sm); }
.track .dur { color: var(--ink-soft); font-family: var(--mono); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; white-space: nowrap; }
.track .links { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); font-size: var(--fs-sm); }
.track.hit { background: var(--hit); }
.recordings { min-width: 0; }
.recordings summary { cursor: pointer; color: var(--accent); }
.recordings .src-list { margin-top: var(--sp-3); }
.recording-row { overflow-wrap: anywhere; }
.player-slot { max-width: var(--player-max-width); margin-top: var(--sp-2); }
.player-slot:empty { display: none; }
.player-slot iframe { display: block; width: 100%; border: 0; border-radius: var(--radius); }
.player-slot .video { aspect-ratio: 16 / 9; min-height: var(--player-min-height); }
.player-slot .soundcloud { height: var(--player-soundcloud-height); }
.player-slot .archive { height: var(--player-archive-height); }
.player-slot audio { display: block; width: 100%; }
.player-help { color: var(--ink-soft); font-size: var(--fs-sm); margin: var(--sp-2) 0; }
.none { padding-block: var(--sp-7); text-align: center; color: var(--ink-soft); }
.none p { margin: 0 0 var(--sp-3); }
footer { padding-block: var(--sp-6); border-top: 1px solid var(--rule-strong); color: var(--ink-faint); font-size: var(--fs-sm); }
footer p { margin: 0; max-width: 65ch; }

@media (max-width: 40rem) {
  .bar { position: static; }
  .section { scroll-margin-top: var(--sp-4); }
  .person { min-height: 2.25rem; }
  .entry { grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); }
  .when { grid-auto-flow: column; justify-content: start; align-items: baseline; gap: var(--sp-2); }
  .when .day { font-size: var(--fs-xl); }
  .programme li { grid-template-columns: 1.5rem minmax(0, 1fr); }
  .programme .end { grid-column: 2; }
  .programme .listen { display: inline-flex; align-items: center; min-height: 2rem; padding-block: var(--sp-1); }
  .mast { padding-block: var(--sp-7) var(--sp-5); }
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}