/* Concert programme — printed-programme typography, dark by default with a
   light mode, plus a sticky player bar. Kept deliberately quiet: the content is
   a concert programme, so type and spacing do the work rather than colour. */

:root {
  --ink: #f2ece1;
  --ink-dim: #b4aa99;
  --ink-faint: #7d7466;
  --bg: #14120f;
  --bg-soft: #1d1a16;
  --rule: #302b24;
  --accent: #c9a227;      /* warm brass */
  --accent-soft: #3a2f14;
  --bar: #1b1814;
  --radius: 10px;
  --wrap: 46rem;
}

@media (prefers-color-scheme: light) {
  :root {
    --ink: #201c16;
    --ink-dim: #574f43;
    --ink-faint: #857b6c;
    --bg: #f7f4ee;
    --bg-soft: #fffdf8;
    --rule: #e0d9cc;
    --accent: #8a6d0f;
    --accent-soft: #f2e9cf;
    --bar: #fffdf8;
  }
}
:root[data-theme="dark"] {
  --ink: #f2ece1; --ink-dim: #b4aa99; --ink-faint: #7d7466;
  --bg: #14120f; --bg-soft: #1d1a16; --rule: #302b24;
  --accent: #c9a227; --accent-soft: #3a2f14; --bar: #1b1814;
}
:root[data-theme="light"] {
  --ink: #201c16; --ink-dim: #574f43; --ink-faint: #857b6c;
  --bg: #f7f4ee; --bg-soft: #fffdf8; --rule: #e0d9cc;
  --accent: #8a6d0f; --accent-soft: #f2e9cf; --bar: #fffdf8;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.55 "Iowan Old Style", "Palatino Linotype", Palatino, Georgia,
        "Times New Roman", serif;
  -webkit-text-size-adjust: 100%;
}

/* --- masthead ------------------------------------------------------------ */
.masthead {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 3.5rem 1.25rem 1.75rem;
  text-align: center;
  border-bottom: 1px solid var(--rule);
}
.kicker {
  margin: 0 0 .9rem;
  font-size: .7rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent);
}
.masthead h1 {
  margin: 0;
  font-size: clamp(1.9rem, 6vw, 3rem);
  font-weight: 500;
  letter-spacing: .01em;
  line-height: 1.15;
}
.masthead .date {
  margin: .7rem 0 0;
  font-size: 1.05rem;
  color: var(--ink-dim);
  font-style: italic;
}
.masthead .meta {
  margin: .35rem 0 0;
  font-size: .8rem;
  letter-spacing: .06em;
  color: var(--ink-faint);
}

/* --- programme ---------------------------------------------------------- */
.programme {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 2rem 1.25rem 2rem;
}
.empty {
  padding: 1rem 1.1rem;
  background: var(--bg-soft);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  color: var(--ink-dim);
}
.empty code { color: var(--accent); }

.work { margin: 0 0 2.4rem; }
.work-head {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: .5rem;
}
.portrait {
  flex: 0 0 auto;
  width: 4.5rem; height: 4.5rem;
  border-radius: 50%;
  object-fit: cover;
  /* The two portraits are a 1782 engraving and a 1931 photograph; a shared
     warm tint and ring stops them reading as two unrelated pictures. */
  filter: sepia(.28) contrast(1.03);
  border: 1px solid var(--rule);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .25);
}
.work h2 {
  margin: 0 0 .2rem;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: .01em;
}
.work-note {
  margin: 0;
  font-size: .82rem;
  font-style: italic;
  color: var(--ink-faint);
}
.credits a { color: var(--ink-dim); }

.tracks { list-style: none; margin: .5rem 0 0; padding: 0; }

.track {
  display: grid;
  grid-template-columns: 2.4rem 1fr auto auto;
  align-items: center;
  gap: .9rem;
  padding: .6rem .55rem;
  border-radius: var(--radius);
  border: 1px solid transparent;
}
.track + .track { margin-top: .15rem; }
.track:hover { background: var(--bg-soft); }
.track.current {
  background: var(--bg-soft);
  border-color: var(--rule);
}
.track.current .title { color: var(--accent); }

.what { min-width: 0; display: flex; flex-direction: column; }
.title { font-size: 1.02rem; }
.note {
  font-size: .78rem;
  font-style: italic;
  color: var(--ink-faint);
}
.dur {
  font-size: .85rem;
  color: var(--ink-dim);
  font-variant-numeric: tabular-nums;
}

.get { display: flex; gap: .3rem; }
.get a {
  display: inline-block;
  padding: .22rem .5rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .68rem;
  letter-spacing: .06em;
  text-decoration: none;
  color: var(--ink-dim);
  border: 1px solid var(--rule);
  border-radius: 5px;
}
.get a:hover { color: var(--accent); border-color: var(--accent); }

/* --- play buttons ------------------------------------------------------- */
.play {
  width: 2.4rem; height: 2.4rem;
  display: grid; place-items: center;
  padding: 0;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 50%;
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.play:hover { border-color: var(--accent); color: var(--accent); }
.play svg { width: 1.1rem; height: 1.1rem; fill: currentColor; }
.play .i-pause { display: none; }
.track.playing .play,
.player.is-playing .play.big {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}
.track.playing .play .i-play,
.player.is-playing .play.big .i-play { display: none; }
.track.playing .play .i-pause,
.player.is-playing .play.big .i-pause { display: block; }

/* --- sticky player ------------------------------------------------------ */
body.player-open { padding-bottom: 6.5rem; }

.player {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: .7rem max(1.25rem, calc((100vw - var(--wrap)) / 2 + 1.25rem));
  padding-bottom: calc(.7rem + env(safe-area-inset-bottom, 0px));
  background: var(--bar);
  border-top: 1px solid var(--rule);
  box-shadow: 0 -6px 24px rgba(0, 0, 0, .22);
}
.player[hidden] { display: none; }
.play.big { width: 2.9rem; height: 2.9rem; }
.play.big svg { width: 1.3rem; height: 1.3rem; }

.p-mid { min-width: 0; }
.p-what {
  display: flex; gap: .55rem; align-items: baseline;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-size: .95rem;
}
.p-work {
  font-size: .76rem; color: var(--ink-faint);
  overflow: hidden; text-overflow: ellipsis;
}
.p-bar { display: flex; align-items: center; gap: .6rem; margin-top: .25rem; }
.p-bar .t {
  font-size: .72rem; color: var(--ink-faint);
  font-variant-numeric: tabular-nums; min-width: 2.6rem;
}
.p-bar .t:last-child { text-align: right; }

#p-seek {
  -webkit-appearance: none; appearance: none;
  flex: 1; height: 1.1rem; margin: 0;
  background: transparent; cursor: pointer;
}
#p-seek::-webkit-slider-runnable-track {
  height: 3px; border-radius: 3px; background: var(--rule);
}
#p-seek::-moz-range-track { height: 3px; border-radius: 3px; background: var(--rule); }
#p-seek::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: .8rem; height: .8rem; margin-top: -.25rem;
  border: none; border-radius: 50%; background: var(--accent);
}
#p-seek::-moz-range-thumb {
  width: .8rem; height: .8rem; border: none; border-radius: 50%;
  background: var(--accent);
}
#p-seek:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.p-side { display: flex; align-items: center; gap: .35rem; }
.p-side button {
  width: 2rem; height: 2rem;
  font-size: 1.35rem; line-height: 1;
  color: var(--ink-dim);
  background: transparent; border: none; border-radius: 6px;
  cursor: pointer;
}
.p-side button:hover { color: var(--accent); }
.p-dl {
  margin-left: .3rem; padding: .25rem .5rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .68rem; letter-spacing: .06em; text-decoration: none;
  color: var(--ink-dim);
  border: 1px solid var(--rule); border-radius: 5px;
}
.p-dl:hover { color: var(--accent); border-color: var(--accent); }

/* --- colophon / login --------------------------------------------------- */
.colophon {
  margin-top: 1rem; padding-top: 1.3rem;
  border-top: 1px solid var(--rule);
  font-size: .8rem; line-height: 1.6; color: var(--ink-faint);
}
.colophon p { margin: 0 0 .5rem; }
.colophon a { color: var(--ink-dim); }

.gate {
  max-width: 22rem; margin: 5rem auto; padding: 0 1.25rem;
  text-align: center;
}
.gate h1 { font-size: 1.3rem; font-weight: 500; }
.gate form { display: flex; gap: .5rem; margin-top: 1.2rem; }
.gate input {
  flex: 1; padding: .6rem .7rem; font: inherit; font-size: .95rem;
  color: var(--ink); background: var(--bg-soft);
  border: 1px solid var(--rule); border-radius: var(--radius);
}
.gate button {
  padding: .6rem 1rem; font: inherit; cursor: pointer;
  color: var(--bg); background: var(--accent);
  border: none; border-radius: var(--radius);
}
.gate .err { margin-top: .8rem; font-size: .85rem; color: #d98b8b; }

/* --- narrow screens ----------------------------------------------------- */
@media (max-width: 34rem) {
  .masthead { padding-top: 2.5rem; }
  .track {
    grid-template-columns: 2.2rem 1fr auto;
    row-gap: .35rem;
  }
  .dur { grid-column: 3; }
  .get { grid-column: 2 / 4; }
  .player { grid-template-columns: auto 1fr; gap: .7rem; }
  .p-side { grid-column: 2; justify-content: flex-end; margin-top: -.2rem; }
  body.player-open { padding-bottom: 8.5rem; }
}