/* ───────────────────────────────────────────────────────────────
   jimvandersteege.com
   One file, no build step. The knobs are at the top; the layout follows.
   Order: shell → rail (the catalogue) → timeline → one work (and its
          performances) → shop → prose → buy panel → player → notes, newsletter.
   Everything is newest-first, everywhere.
   ─────────────────────────────────────────────────────────────── */

:root {
  --ink:        #0b0b0d;
  --ink-2:      #0e0e12;
  --ink-3:      #15151a;
  --paper:      #f1eee8;
  --muted:      #8d8781;
  --muted-2:    #615c57;
  --accent:     #c9a45c;
  --accent-dim: #8d7440;
  --line:       rgba(241, 238, 232, 0.11);
  --line-soft:  rgba(241, 238, 232, 0.055);

  /* one colour per kind of piece — used in the rail and on the timeline */
  --c-orchestra:  #c9a45c;
  --c-chamber:    #7fa8b5;
  --c-solo:       #c08f7c;
  --c-vocal:      #9fb08a;
  --c-film:       #a98bb5;
  --c-electronic: #6f9c94;
  --c-installation: #cc88a2;

  --serif: 'Spectral', Georgia, 'Times New Roman', serif;
  --sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --rail-w: 292px;
  --player-h: 76px;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--serif);
  font-weight: 300;
  font-size: 17px;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.has-player { --pad-bottom: var(--player-h); }

a { color: inherit; }
::selection { background: var(--accent); color: var(--ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--accent); color: var(--ink); padding: 10px 16px;
  font-family: var(--sans); font-size: 14px;
}
.skip:focus { left: 12px; top: 12px; }

/* ─────────────  shell  ───────────── */

.shell {
  display: grid;
  grid-template-columns: var(--rail-w) minmax(0, 1fr);
  min-height: 100svh;
}

/* ─────────────  the rail: the whole catalogue, always visible  ───────────── */

.rail {
  position: sticky; top: 0;
  height: 100svh;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-right: 1px solid var(--line-soft);
  background: var(--ink-2);
  padding: 30px 0 calc(24px + var(--pad-bottom, 0px));
  scrollbar-width: thin;
  scrollbar-color: rgba(241,238,232,.16) transparent;
}
.rail::-webkit-scrollbar { width: 9px; }
.rail::-webkit-scrollbar-thumb { background: rgba(241,238,232,.14); border-radius: 9px; }

.rail__brand { padding: 0 24px; }
.rail__name {
  display: block;
  font-family: var(--serif); font-size: 19px; line-height: 1.25;
  text-decoration: none; letter-spacing: .005em;
}
.rail__role {
  font-family: var(--sans); font-size: 11px; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--accent);
  margin: 6px 0 0;
}

.rail__nav { display: flex; flex-wrap: wrap; gap: 8px 14px; padding: 22px 24px 0; }
.rail__nav a {
  font-family: var(--sans); font-size: 13px; font-weight: 500;
  color: var(--muted); text-decoration: none;
  padding-bottom: 2px; border-bottom: 1px solid transparent;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.rail__nav a:hover { color: var(--paper); }
.rail__nav a.is-on { color: var(--paper); border-bottom-color: var(--accent); }

.rail__listhead {
  font-family: var(--sans); font-size: 10.5px; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--muted-2);
  margin: 30px 0 10px;
  padding: 0 24px;
}

.rail__list { list-style: none; margin: 0; padding: 0; }

.rail__link {
  display: grid;
  grid-template-columns: 7px 30px minmax(0, 1fr) 34px;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 5px 24px 5px 21px;
  background: none; border: none; text-align: left;
  font-family: var(--sans); font-size: 12.5px;
  color: var(--muted);
  cursor: pointer;
  transition: color .16s var(--ease), background .16s var(--ease);
}
.rail__link:hover { color: var(--paper); background: rgba(241,238,232,.03); }
.rail__link.is-on { color: var(--paper); background: rgba(241,238,232,.05); }
.rail__link.is-sounding { color: var(--accent); }

.rail__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  opacity: .8;
  transition: opacity .16s var(--ease), transform .16s var(--ease);
}
.rail__link:hover .rail__dot, .rail__link.is-on .rail__dot { opacity: 1; transform: scale(1.18); }

/* a piece with video says so, quietly */
.hasvid::after {
  content: '\25B6';
  font-size: 7.5px;
  margin-left: 8px;
  color: var(--muted);
  opacity: .8;
  vertical-align: 1.5px;
}
.rail__link:hover .hasvid::after, .rail__link.is-on .hasvid::after { opacity: .9; }

.rail__nr { font-variant-numeric: tabular-nums; font-size: 11px; color: var(--muted-2); }
.rail__link.is-on .rail__nr, .rail__link:hover .rail__nr { color: var(--muted); }
.rail__title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail__year {
  font-variant-numeric: tabular-nums; font-size: 10.5px;
  color: var(--muted-2); text-align: right;
}

.rail__legend {
  display: flex; flex-wrap: wrap; gap: 4px 12px;
  margin: 26px 0 0;
  padding: 18px 24px 0;
  border-top: 1px solid var(--line-soft);
  font-family: var(--sans); font-size: 10.5px;
  color: var(--muted-2);
}
.rail__legend span { display: inline-flex; align-items: center; gap: 5px; }
.rail__legend i { width: 7px; height: 7px; border-radius: 50%; display: block; }

.railbtn { display: none; }

@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr; }
  .rail {
    position: fixed; inset: 0 auto 0 0; z-index: 45;
    width: min(320px, 86vw);
    padding-top: 72px;   /* clear the floating Works button */
    transform: translateX(-102%);
    transition: transform .34s var(--ease);
    box-shadow: 0 0 40px rgba(0,0,0,.5);
  }
  body.rail-open .rail { transform: none; }

  .railbtn {
    display: inline-flex; align-items: center; gap: 9px;
    position: fixed; z-index: 46; top: 14px; left: 14px;
    padding: 9px 15px 9px 12px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: rgba(14,14,18,.92);
    backdrop-filter: blur(12px);
    color: var(--paper);
    font-family: var(--sans); font-size: 12.5px; font-weight: 500;
    cursor: pointer;
  }
  .railbtn__bars { width: 14px; height: 9px; position: relative; display: block; }
  .railbtn__bars::before, .railbtn__bars::after {
    content: ''; position: absolute; left: 0; right: 0; height: 1px; background: currentColor;
  }
  .railbtn__bars::before { top: 0; box-shadow: 0 4px 0 currentColor; }
  .railbtn__bars::after { bottom: 0; }

  body.rail-open::after {
    content: ''; position: fixed; inset: 0; z-index: 44; background: rgba(0,0,0,.55);
  }
}

/* ─────────────  the reading side  ───────────── */

.main {
  min-width: 0;
  padding: clamp(40px, 6vw, 84px) clamp(22px, 5vw, 76px);
  padding-bottom: calc(clamp(40px, 6vw, 84px) + var(--pad-bottom, 0px));
}

/* room for the floating Works button on small screens */
@media (max-width: 900px) { .main { padding-top: 82px; } }

.view { max-width: 760px; }
.view[hidden] { display: none; }

.view__head { margin-bottom: clamp(30px, 4vw, 46px); }

/* the photo at the top of the home page; its dark edges fade into the page */
/* home: the name and bio top left, the photo centred in the whole area right of the menu.
   The header runs edge to edge of that area (it cancels the side padding of .main); the
   name and the photo share one grid cell, so the photo can be centred without pushing the
   text down. The timeline below stays a 760px reading column. */
#viewTimeline { max-width: none; }
#viewTimeline > :not(.view__head) { max-width: 760px; }
.view__head--split {
  --gut: clamp(22px, 5vw, 76px);
  display: grid; align-items: start;
  margin-left: calc(-1 * var(--gut)); margin-right: calc(-1 * var(--gut));
  /* the gap above the name equals the margin left of it
     (10px: the space above the capitals inside the line) */
  margin-top: calc(var(--gut) - clamp(40px, 6vw, 84px) - 10px);
}
.view__head--split > * { grid-area: 1 / 1; }
.view__head--split .view__intro {
  position: relative; z-index: 1;
  padding-left: var(--gut); max-width: calc(25em + var(--gut));
}
.view__head--split .view__title { white-space: nowrap; }
/* centred in the area, unless that would put the lit part of the photo under the bio:
   the left ~30% of the photo is black, so it may slide under the text, the rest may not */
.view__head--split .banner {
  justify-self: start; align-self: center;
  width: min(50%, 720px);
  margin-left: max(calc(50% - min(25%, 360px)),
                   calc(var(--gut) + 25em + 24px - 0.3 * min(50%, 720px)));
}
.banner { margin: 0; }
/* below this width there is no room beside the bio, so the photo goes on top */
@media (max-width: 1100px) {
  .view__head--split { margin-left: 0; margin-right: 0; margin-top: 0; }
  .view__head--split > * { grid-area: auto; }
  .view__head--split .view__intro { padding-left: 0; }
  .view__head--split .banner { order: -1; width: 100%; margin: 0 0 clamp(20px, 3vw, 30px); }
}

/* from the photo upward the page is the photo's own black, so its edges disappear;
   just below the header a short fade leads back into the page colour */
.main { position: relative; isolation: isolate; overflow-x: clip; }
.view__head--split { position: relative; }
.view__head--split::before {
  content: ''; position: absolute; z-index: -1;
  /* reaches down to where the timeline starts, so the fade fills exactly the gap between
     the bio and the timeline (that gap is the header's margin-bottom) */
  top: -240px; bottom: calc(-1 * clamp(30px, 4vw, 46px)); left: -100vw; right: -100vw;
  background: linear-gradient(to bottom, #000 calc(100% - clamp(30px, 4vw, 46px)), var(--ink));
}
.banner img {
  display: block; width: 100%; height: auto;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14%, #000 86%, transparent 100%),
                      linear-gradient(to right, transparent 0, #000 10%, #000 90%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(to bottom, transparent 0, #000 14%, #000 86%, transparent 100%),
                      linear-gradient(to right, transparent 0, #000 10%, #000 90%, transparent 100%);
          mask-composite: intersect;
}
.view__title {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(30px, 4.6vw, 48px);
  line-height: 1.08; letter-spacing: -.018em;
  margin: 0;
}
.view__lead {
  max-width: 50ch;
  font-size: clamp(17px, 1.5vw, 19px);
  color: rgba(241,238,232,.76);
  margin: 18px 0 0;
}
.view__hint {
  font-family: var(--sans); font-size: 12.5px;
  color: var(--muted-2);
  margin: 24px 0 0;
}

/* ─────────────  the timeline  ───────────── */

.tl { list-style: none; margin: 0; padding: 0; position: relative; }

/* Each row draws its own slice of the axis. That way the line can be
   dotted where something has not happened yet and solid where it has,
   and headings can sit on it without breaking it. */
.tl__row::before, .tl__now::before {
  content: '';
  position: absolute; top: 0; bottom: 0; left: 82.5px;
  width: 1px;
  background: rgba(241, 238, 232, .20);
}
.tl__row--future::before {
  background: repeating-linear-gradient(
    rgba(241, 238, 232, .26) 0 3px, transparent 3px 7px);
}
.tl__row:first-child::before { top: 14px; }
.tl__row:last-child::before { bottom: 14px; }

.tl__row {
  position: relative;
  display: grid;
  /* date · dot · title · still-or-play — that last column is always there,
     empty or not, so everything lines up all the way down */
  grid-template-columns: 58px 22px minmax(0, 1fr) 132px;
  align-items: center;
  gap: 0 14px;
  padding: 7px 0;
}
.tl__thumbcell { width: 132px; display: flex; align-items: center; }

.tl__date {
  font-family: var(--sans); font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  color: var(--muted-2);
  text-align: right;
  white-space: nowrap;
}
.tl__row.is-year-start .tl__date {
  color: var(--paper);
  font-weight: 600;
  font-size: 12.5px;
}

.tl__dot { display: grid; place-items: center; }
.tl__dot i {
  display: block;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--c, var(--muted));
  box-shadow: 0 0 0 4px var(--ink);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.tl__row--future .tl__dot i {
  background: transparent;
  border: 1px solid var(--accent-dim);
  width: 8px; height: 8px;
  border-radius: 0;
  transform: rotate(45deg);          /* a performance is a diamond, a work a dot */
}
.tl__row--future:hover .tl__dot i { transform: rotate(45deg) scale(1.4); border-color: var(--accent); }
.tl__row:hover .tl__dot i { transform: scale(1.45); }
.tl__row.is-on .tl__dot i {
  transform: scale(1.5);
  box-shadow: 0 0 0 4px var(--ink), 0 0 14px var(--c, var(--accent));
}

.tl__body { min-width: 0; }
.tl__title {
  display: block;
  background: none; border: none; padding: 0;
  font-family: var(--serif); font-weight: 400; font-size: 18px;
  line-height: 1.3; color: var(--paper);
  text-align: left; cursor: pointer;
  transition: color .18s var(--ease);
}
.tl__title:hover { color: var(--accent); }
.tl__row.is-on .tl__title { color: var(--accent); }
.tl__sub {
  font-family: var(--sans); font-size: 11.5px;
  color: var(--muted-2);
  margin: 1px 0 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tl__row--future .tl__title { font-size: 16.5px; color: rgba(241, 238, 232, .88); }
.tl__row--future .tl__sub { color: var(--muted-2); white-space: normal; }
.tl__sub .tag { margin-left: 9px; }

.tl__now {
  position: relative;
  display: grid;
  grid-template-columns: 58px 22px minmax(0, 1fr);
  align-items: center;
  gap: 0 14px;
  padding: 18px 0;
}
.tl__now-label {
  font-family: var(--sans); font-size: 10px; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--accent);
  text-align: right;
}
.tl__now-rule {
  grid-column: 2 / -1; height: 1px;
  background: linear-gradient(90deg, var(--accent-dim), transparent 78%);
}

.tl__row--head { padding: 4px 0 10px; }
.tl__row--head + .tl__row { padding-top: 0; }
.tl__section {
  font-family: var(--sans); font-size: 10.5px; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--muted-2);
  margin: 0;
}
.tl__row--future .tl__section { color: var(--accent-dim); }

@media (max-width: 620px) {
  /* the still and the buttons drop under the title; the columns stay put
     so the rule stays under the dots */
  /* a bare play button stays beside the title; a still drops to its own line */
  .tl__row { grid-template-columns: 58px 22px minmax(0, 1fr) 34px; }
  .tl__thumbcell { grid-column: 4; width: auto; }
  .tl__row--video .tl__thumbcell { grid-column: 3 / -1; grid-row: 2; margin-top: 10px; }
  .tl__date { font-size: 9.5px; letter-spacing: -.01em; }
  .tl__row.is-year-start .tl__date { font-size: 11px; }
  .tl__title { font-size: 16.5px; }
  .tl__row--future .tl__title { font-size: 15.5px; }
  .tl__sub { font-size: 11px; }
}

/* ─────────────  one work  ───────────── */

.work__back {
  display: inline-flex; align-items: center; gap: 8px;
  background: none; border: none; padding: 0;
  font-family: var(--sans); font-size: 12.5px;
  color: var(--muted); cursor: pointer;
  margin-bottom: 26px;
  transition: color .2s var(--ease);
}
.work__back:hover { color: var(--paper); }
.work__back::before { content: '←'; }

.work__nr {
  font-family: var(--sans); font-size: 11px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--c, var(--accent));
  margin: 0 0 12px;
  display: flex; align-items: center; gap: 9px;
}
.work__nr i { width: 9px; height: 9px; border-radius: 50%; display: block; }

.work__title {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(30px, 4.6vw, 46px);
  line-height: 1.06; letter-spacing: -.018em;
  margin: 0;
}
.work__sub {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(17px, 1.8vw, 20px);
  color: var(--muted);
  margin: 8px 0 0;
}

.work__actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 30px 0 34px; }
.work__spotify iframe { display: block; width: 100%; border: 0; border-radius: 12px; margin: -10px 0 34px; }

.btn {
  display: inline-flex; align-items: center; gap: 11px;
  font-family: var(--sans); font-size: 13.5px; font-weight: 500;
  padding: 12px 22px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--paper);
  text-decoration: none; cursor: pointer;
  transition: background .22s var(--ease), border-color .22s var(--ease),
              color .22s var(--ease), transform .22s var(--ease);
}
.btn--solid { background: var(--accent); color: #17140d; border-color: var(--accent); }
.btn--solid:hover { background: #dab871; transform: translateY(-1px); }
.btn--ghost { color: var(--paper); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--paper); transform: translateY(-1px); }
.btn__icon {
  width: 0; height: 0; border-style: solid;
  border-width: 5.5px 0 5.5px 9px;
  border-color: transparent transparent transparent currentColor;
}
.btn.is-playing .btn__icon {
  border: none;
  width: 9px; height: 11px; background: currentColor;
  -webkit-mask: linear-gradient(#000 0 0) 0 0 / 3px 100% no-repeat,
                linear-gradient(#000 0 0) 100% 0 / 3px 100% no-repeat;
          mask: linear-gradient(#000 0 0) 0 0 / 3px 100% no-repeat,
                linear-gradient(#000 0 0) 100% 0 / 3px 100% no-repeat;
}

.work__facts { margin: 0 0 34px; padding: 0; border-top: 1px solid var(--line-soft); }
.work__facts > div {
  display: grid; grid-template-columns: 132px minmax(0, 1fr);
  gap: 18px; padding: 11px 0;
  border-bottom: 1px solid var(--line-soft);
}
.work__facts dt {
  font-family: var(--sans); font-size: 11px; font-weight: 500;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--muted-2);
}
.work__facts dd { margin: 0; font-size: 15.5px; color: rgba(241,238,232,.86); }
@media (max-width: 520px) { .work__facts > div { grid-template-columns: 1fr; gap: 2px; } }

.work__note { font-size: 18px; line-height: 1.7; color: rgba(241,238,232,.82); max-width: 54ch; }

/* on to the next piece — the whole point of a catalogue you read through.
   At the top, so the cards never move with the length of the page.  */
.work__next {
  margin-bottom: 30px; padding-bottom: 26px;
  border-bottom: 1px solid var(--line-soft);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 620px) { .work__next { grid-template-columns: 1fr; } }

.nextcard {
  display: block; width: 100%;
  background: none; text-align: left;
  border: 1px solid var(--line-soft);
  padding: 16px 18px;
  cursor: pointer;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.nextcard:hover { border-color: var(--line); background: rgba(241,238,232,.025); }
.nextcard--older { text-align: right; }
.nextcard--placeholder { visibility: hidden; }

.nextcard__dir {
  font-family: var(--sans); font-size: 10px; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--muted-2);
  margin: 0 0 7px;
}
.nextcard:hover .nextcard__dir { color: var(--accent); }
.nextcard__title {
  font-family: var(--serif); font-size: 17px; color: var(--paper);
  margin: 0; line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nextcard__meta {
  font-family: var(--sans); font-size: 11px; color: var(--muted-2);
  margin: 3px 0 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ─────────────  performances, performers, tags  ─────────────
   The same rows on a work page and on a performer page. Quiet and typographic;
   what is still to come gets the open diamond of the timeline. */

.work__h {
  font-family: var(--sans); font-size: 10.5px; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--muted-2);
  margin: 44px 0 12px;
}

.plink {
  color: inherit; text-decoration: none;
  border-bottom: 1px solid var(--line);
  transition: color .18s var(--ease), border-color .18s var(--ease);
}
.plink:hover { color: var(--accent); border-bottom-color: var(--accent-dim); }

.tag {
  display: inline-block;
  font-family: var(--sans); font-size: 9.5px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent);
  border: 1px solid var(--accent-dim);
  border-radius: 999px;
  padding: 1px 8px 0;
  margin-left: 9px;
  line-height: 1.7;
  vertical-align: 1px;
  white-space: nowrap;
}
.tag--soon { border-style: dashed; color: var(--muted); border-color: rgba(241,238,232,.3); }

.perfs { list-style: none; margin: 0 0 34px; padding: 0; border-top: 1px solid var(--line-soft); }
.perf {
  display: grid; grid-template-columns: 170px minmax(0, 1fr);
  gap: 18px; padding: 14px 0;
  border-bottom: 1px solid var(--line-soft);
}
.perf__when {
  margin: 0;
  font-family: var(--sans); font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}
.perf__date { display: block; color: rgba(241,238,232,.86); font-weight: 500; white-space: nowrap; }
/* the tags sit on a line of their own under the date */
.perf__when .tag { margin: 6px 6px 0 0; }
.perf--future .perf__date::before {
  content: '';
  display: inline-block; vertical-align: 1px;
  width: 6px; height: 6px; margin-right: 11px;
  border: 1px solid var(--accent-dim);
  transform: rotate(45deg);
}
.perf__body > p { margin: 0; }
.perf__where { font-size: 16px; color: rgba(241,238,232,.9); }
.perf__who, .perf__cond {
  font-family: var(--sans); font-size: 13px; line-height: 1.55;
  color: var(--muted);
  margin-top: 3px !important;
}
.perf__who .plink, .perf__cond .plink { color: rgba(241,238,232,.82); }
.perf__who .plink:hover, .perf__cond .plink:hover { color: var(--accent); }
.perf__note {
  font-family: var(--serif); font-style: italic; font-size: 14.5px;
  color: var(--muted-2);
  margin-top: 4px !important;
}
.perf__work { margin-bottom: 2px !important; }
.perf__title {
  font-family: var(--serif); font-weight: 400; font-size: 18px;
  color: var(--paper); text-decoration: none;
}
.perf__title:hover { color: var(--accent); }
.perf__role {
  font-family: var(--sans); font-size: 11.5px; color: var(--muted-2);
  margin-left: 10px;
}
@media (max-width: 620px) {
  .perf { grid-template-columns: 1fr; gap: 4px; }
  .perf__date { display: inline; }
  .perf__when .tag { margin: 0 0 0 8px; }
}

.empty {
  font-family: var(--sans); font-size: 13.5px; color: var(--muted);
  margin: 28px 0;
}

/* ─────────────  the shop  ───────────── */

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 30px; }
.chip {
  display: inline-flex; align-items: baseline; gap: 7px;
  font-family: var(--sans); font-size: 12.5px; font-weight: 500;
  color: var(--muted); text-decoration: none;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 13px;
  transition: color .18s var(--ease), border-color .18s var(--ease), background .18s var(--ease);
}
.chip:hover { color: var(--paper); border-color: rgba(241,238,232,.4); }
.chip.is-on { color: #17140d; background: var(--accent); border-color: var(--accent); }
.chip__n { font-size: 10.5px; font-variant-numeric: tabular-nums; opacity: .6; }

.shoplist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-soft); }
.shoprow {
  display: grid;
  grid-template-columns: 9px 40px minmax(0, 1fr) auto;
  align-items: center; gap: 0 14px;
  padding: 15px 0;
  border-bottom: 1px solid var(--line-soft);
}
.shoprow__dot { width: 9px; height: 9px; border-radius: 50%; display: block; }
.shoprow__nr { font-family: var(--sans); font-size: 11.5px; font-variant-numeric: tabular-nums; color: var(--muted-2); }
.shoprow__body { min-width: 0; }
.shoprow__body > p { margin: 0; }
.shoprow__title {
  font-family: var(--serif); font-weight: 400; font-size: 19px; line-height: 1.3;
  color: var(--paper); text-decoration: none;
}
.shoprow__title:hover { color: var(--accent); }
.shoprow__sub { font-style: italic; font-size: 14.5px; color: var(--muted); }
.shoprow__inst { font-family: var(--sans); font-size: 11.5px; color: var(--muted-2); margin-top: 3px !important; }
.shoprow__buy { display: flex; align-items: center; gap: 16px; }
.shoprow__price {
  font-family: var(--sans); font-size: 13px; font-weight: 600;
  font-variant-numeric: tabular-nums; color: var(--accent); white-space: nowrap;
}
.shoprow__ask { font-family: var(--sans); font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.btn--small { padding: 7px 18px; font-size: 12.5px; }
@media (max-width: 620px) {
  .shoprow { grid-template-columns: 9px 36px minmax(0, 1fr); row-gap: 10px; align-items: start; }
  .shoprow__dot { margin-top: 9px; }
  .shoprow__nr { padding-top: 3px; }
  .shoprow__buy { grid-column: 3; justify-content: space-between; }
}

/* round play button, used in lists */
.play {
  flex: none;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: transparent; color: var(--paper);
  display: grid; place-items: center; cursor: pointer;
  transition: background .2s var(--ease), border-color .2s var(--ease),
              color .2s var(--ease), transform .2s var(--ease);
}
.play:hover { background: var(--accent); border-color: var(--accent); color: #17140d; transform: scale(1.07); }
.play[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #17140d; }
.play__glyph { width: 10px; height: 10px; display: block; position: relative; }
.play__glyph::before {
  content: ''; position: absolute; inset: 0; margin: auto; left: 2px;
  width: 0; height: 0; border-style: solid;
  border-width: 5px 0 5px 8px;
  border-color: transparent transparent transparent currentColor;
}
.play[aria-pressed="true"] .play__glyph::before {
  border: none; left: 0;
  width: 9px; height: 10px; background: currentColor;
  -webkit-mask: linear-gradient(#000 0 0) 0 0 / 2.5px 100% no-repeat,
                linear-gradient(#000 0 0) 100% 0 / 2.5px 100% no-repeat;
          mask: linear-gradient(#000 0 0) 0 0 / 2.5px 100% no-repeat,
                linear-gradient(#000 0 0) 100% 0 / 2.5px 100% no-repeat;
}



/* ─────────────  video  ─────────────
   The thing that stops people scrolling, so it gets the best seat.   */

.vid {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
  border: 1px solid var(--line-soft);
}
.vid video, .vid iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
  display: block;
}

/* the play badge that sits on every still */
.vplay {
  position: absolute; inset: 0; margin: auto;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(11, 11, 13, .55);
  border: 1px solid rgba(241, 238, 232, .5);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  transition: background .22s var(--ease), border-color .22s var(--ease), transform .22s var(--ease);
}
.vplay::before {
  content: '';
  position: absolute; inset: 0; margin: auto;
  left: 3px;
  width: 0; height: 0;
  border-style: solid;
  border-width: 7px 0 7px 12px;
  border-color: transparent transparent transparent var(--paper);
}

/* a still on the timeline */
.tl__thumb {
  position: relative;
  flex: none;
  width: 132px; aspect-ratio: 16 / 9;
  padding: 0;
  border: 1px solid var(--line);
  background-color: var(--ink-3);
  background-size: cover;
  background-position: center;
  cursor: pointer;
  transition: border-color .22s var(--ease), transform .22s var(--ease);
}
.tl__thumb:hover { border-color: var(--accent); transform: translateY(-1px); }
.tl__thumb .vplay { width: 32px; height: 32px; }
.tl__thumb .vplay::before { border-width: 5px 0 5px 9px; left: 2px; }
.tl__thumb:hover .vplay { background: var(--accent); border-color: var(--accent); transform: scale(1.06); }
.tl__thumb:hover .vplay::before { border-left-color: #17140d; }
.tl__row.is-watching .tl__thumb { border-color: var(--accent); }

/* the player that opens underneath a timeline row */
.tl__media {
  grid-column: 3 / -1;
  margin: 14px 0 18px;
  max-width: 560px;
}
.tl__media-cap {
  font-family: var(--sans); font-size: 11.5px;
  color: var(--muted-2);
  margin: 8px 0 0;
}
.tl__media-close {
  background: none; border: none; padding: 4px 0 0;
  font-family: var(--sans); font-size: 11.5px;
  color: var(--muted-2);
  cursor: pointer;
}
.tl__media-close:hover { color: var(--paper); }

/* video on a work page: right under the title, before anything else */
.work__video { margin: 28px 0 0; padding: 0; }
.work__poster {
  display: block;
  position: relative;
  width: 100%; aspect-ratio: 16 / 9;
  padding: 0;
  border: 1px solid var(--line);
  background-color: var(--ink-3);
  background-size: cover;
  background-position: center;
  cursor: pointer;
  transition: border-color .22s var(--ease);
}
.work__poster:hover { border-color: var(--accent); }
.work__poster:hover .vplay { background: var(--accent); border-color: var(--accent); transform: scale(1.06); }
.work__poster:hover .vplay::before { border-left-color: #17140d; }
.work__videocap {
  font-family: var(--sans); font-size: 11.5px;
  color: var(--muted-2);
  margin: 9px 0 0;
}

/* ─────────────  prose (about, contact)  ───────────── */

.prose { max-width: 620px; }
.prose p { max-width: 56ch; }
.prose__lead { font-size: clamp(18px, 1.7vw, 20px); color: rgba(241,238,232,.86); }
.prose__meta { font-family: var(--sans); font-size: 13px; color: var(--muted); }

.prose__portrait {
  width: 240px; height: auto; aspect-ratio: 828 / 1200;
  object-fit: cover; display: block;
  background: var(--ink-3);
  border: 1px solid var(--line-soft);
  float: right;
  margin: 0 0 22px 28px;
}
.prose__portrait span {
  font-family: var(--sans); font-size: 10.5px;
  letter-spacing: .2em; text-transform: uppercase;
  color: rgba(241,238,232,.18);
}
@media (max-width: 600px) { .prose__portrait { float: none; margin: 0 0 26px; width: 200px; } }

.facts { margin: 34px 0 0; padding: 0; border-top: 1px solid var(--line-soft); clear: both; }
.facts > div {
  display: grid; grid-template-columns: 140px minmax(0, 1fr);
  gap: 18px; padding: 12px 0;
  border-bottom: 1px solid var(--line-soft);
}
.facts dt {
  font-family: var(--sans); font-size: 11px; font-weight: 500;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--muted-2);
}
.facts dd { margin: 0; font-size: 15.5px; color: rgba(241,238,232,.86); }
@media (max-width: 520px) { .facts > div { grid-template-columns: 1fr; gap: 2px; } }

.bigmail { margin: 32px 0 0; }
.bigmail a {
  display: inline-block; max-width: 100%;
  font-family: var(--serif);
  font-size: clamp(19px, 2.9vw, 31px);
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid var(--accent-dim);
  padding-bottom: 3px;
}
.bigmail a:hover { border-bottom-color: var(--accent); }

/* ─────────────  shop panel  ───────────── */

.sheet { position: fixed; inset: 0; z-index: 70; }
.sheet[hidden] { display: none; }

.sheet__scrim {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.6);
  opacity: 0; transition: opacity .3s var(--ease);
}
.sheet.is-on .sheet__scrim { opacity: 1; }

.sheet__panel {
  position: absolute; inset: 0 0 0 auto;
  width: min(430px, 100%);
  background: var(--ink-2);
  border-left: 1px solid var(--line);
  padding: 34px 32px calc(34px + var(--pad-bottom, 0px));
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform .34s var(--ease);
}
.sheet.is-on .sheet__panel { transform: none; }

.sheet__close {
  position: absolute; top: 20px; right: 22px;
  background: none; border: none;
  color: var(--muted); font-size: 15px;
  cursor: pointer; padding: 6px;
}
.sheet__close:hover { color: var(--paper); }

.sheet__eyebrow {
  font-family: var(--sans); font-size: 10.5px; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 12px;
}
.sheet__title {
  font-family: var(--serif); font-weight: 300;
  font-size: 28px; line-height: 1.12; margin: 0;
}
.sheet__sub {
  font-family: var(--serif); font-style: italic;
  font-size: 15px; color: var(--muted);
  margin: 6px 0 0;
}

.sheet__items { list-style: none; margin: 28px 0 0; padding: 0; border-top: 1px solid var(--line-soft); }
.sheet__items li {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 18px;
  padding: 15px 0;
  border-bottom: 1px solid var(--line-soft);
}
.sheet__item { min-width: 0; }
.sheet__item-label { display: block; font-size: 15.5px; line-height: 1.4; }
.sheet__item-note {
  display: block;
  font-family: var(--sans); font-size: 11.5px; line-height: 1.5;
  color: var(--muted-2);
  margin-top: 5px;
}

.sheet__right {
  display: flex; flex-direction: column; align-items: flex-end; gap: 9px;
  flex: none;
}

/* how many singers, how many players */
.stepper {
  display: inline-flex; align-items: stretch;
  border: 1px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
}
.stepper__btn {
  width: 28px;
  background: none; border: none;
  color: var(--muted);
  font-family: var(--sans); font-size: 14px; line-height: 1;
  cursor: pointer;
  transition: background .18s var(--ease), color .18s var(--ease);
}
.stepper__btn:hover { background: rgba(241,238,232,.07); color: var(--paper); }
.stepper__n {
  width: 46px;
  background: none; border: none;
  color: var(--paper);
  font-family: var(--sans); font-size: 13px; font-weight: 500;
  font-variant-numeric: tabular-nums;
  text-align: center;
  padding: 7px 0;
  -moz-appearance: textfield;
}
.stepper__n::-webkit-outer-spin-button,
.stepper__n::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.stepper__n:focus { outline: none; background: rgba(241,238,232,.05); }

/* pay what you want: one amount, typed in */
.pwyw {
  display: inline-flex; align-items: baseline; gap: 6px;
  border-bottom: 1px solid var(--line);
  padding: 2px 2px 4px;
  cursor: text;
}
.pwyw:focus-within { border-color: var(--accent); }
.pwyw__cur, .pwyw__n {
  font-family: var(--sans); font-size: 14px; font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}
.pwyw__n {
  width: 3em;
  background: none; border: none; padding: 0;
  text-align: left;
}
.pwyw__n:focus { outline: none; }

.sheet__price--ask {
  color: var(--muted);
  font-weight: 500;
  font-style: normal;
}
.sheet__item-kind {
  display: block;
  font-family: var(--sans); font-size: 10.5px;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 2px;
}
.sheet__price {
  font-family: var(--sans); font-size: 14px; font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
  white-space: nowrap;
}

.sheet__notice {
  margin: 28px 0 0;
  padding: 16px 18px;
  background: var(--ink-3);
  border: 1px solid var(--line-soft);
  font-family: var(--sans); font-size: 12.5px; line-height: 1.6;
  color: var(--muted);
}
.sheet__notice a { color: var(--accent); }

/* ─────────────  player  ───────────── */

.player {
  position: fixed; inset: auto 0 0 0; z-index: 50;
  background: rgba(14, 14, 18, .94);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-top: 1px solid var(--line);
  transform: translateY(100%);
  transition: transform .4s var(--ease);
}
.player.is-open { transform: none; }

.player__inner {
  display: grid;
  grid-template-columns: auto minmax(120px, 1fr) minmax(200px, 2fr) auto auto;
  align-items: center;
  gap: clamp(14px, 2.2vw, 26px);
  height: var(--player-h);
  padding-inline: clamp(18px, 3vw, 34px);
}

.pbtn {
  flex: none; border: none; background: transparent; color: var(--paper);
  cursor: pointer; display: grid; place-items: center;
  transition: color .2s var(--ease), transform .2s var(--ease);
}
.pbtn--main { width: 38px; height: 38px; border-radius: 50%; background: var(--accent); color: #17140d; }
.pbtn--main:hover { transform: scale(1.06); }
.pbtn__icon {
  width: 0; height: 0; border-style: solid;
  border-width: 6px 0 6px 10px;
  border-color: transparent transparent transparent currentColor;
  margin-left: 3px;
}
.player.is-playing .pbtn__icon {
  border: none; margin: 0;
  width: 10px; height: 12px; background: currentColor;
  -webkit-mask: linear-gradient(#000 0 0) 0 0 / 3.5px 100% no-repeat,
                linear-gradient(#000 0 0) 100% 0 / 3.5px 100% no-repeat;
          mask: linear-gradient(#000 0 0) 0 0 / 3.5px 100% no-repeat,
                linear-gradient(#000 0 0) 100% 0 / 3.5px 100% no-repeat;
}
.pbtn--close { font-size: 14px; color: var(--muted); width: 28px; height: 28px; }
.pbtn--close:hover { color: var(--paper); }

.player__now { min-width: 0; }
.player__title {
  font-family: var(--serif); font-size: 15.5px; margin: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: none; border: none; padding: 0; color: inherit;
  text-align: left; cursor: pointer;
}
.player__title:hover { color: var(--accent); }
.player__sub {
  font-family: var(--sans); font-size: 11px; color: var(--muted);
  margin: 1px 0 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.player__seek { display: flex; align-items: center; gap: 12px; }
.player__time {
  font-family: var(--sans); font-size: 11px; color: var(--muted);
  font-variant-numeric: tabular-nums; flex: none; min-width: 32px;
}
.player__time:last-child { text-align: right; }

.player__vol { display: flex; align-items: center; gap: 9px; }
.player__volicon {
  width: 13px; height: 11px; flex: none; background: var(--muted);
  clip-path: polygon(0 33%, 32% 33%, 62% 0, 62% 100%, 32% 67%, 0 67%);
}

.seek {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 3px;
  background: rgba(241, 238, 232, .16);
  border-radius: 2px; outline: none; cursor: pointer;
}
.seek--vol { width: 70px; }
.seek::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--paper);
  transition: transform .15s var(--ease);
}
.seek:hover::-webkit-slider-thumb { transform: scale(1.25); background: var(--accent); }
.seek::-moz-range-thumb {
  width: 11px; height: 11px; border: none; border-radius: 50%; background: var(--paper);
}

@media (max-width: 860px) {
  .player__inner {
    grid-template-columns: auto minmax(0, 1fr) auto;
    height: auto; padding-block: 11px 13px; row-gap: 5px;
  }
  .player__seek { grid-column: 1 / -1; grid-row: 2; }
  .player__vol { display: none; }
  body.has-player { --pad-bottom: 104px; }
}

/* ─────────────  notes  ─────────────
   Short posts from the studio. On the timeline a note is a RING on the axis:
   a work is a filled dot, a performance an open diamond, a note a ring. */

.tl__row--note { align-items: start; }
.tl__row--note .tl__date { padding-top: 5px; }
.tl__row--note .tl__dot { padding-top: 8px; }
.tl__row--note .tl__dot i {
  width: 9px; height: 9px;
  background: var(--ink);                 /* hides the axis inside the ring */
  border: 1.5px solid rgba(241, 238, 232, .78);
}
.tl__row--note:hover .tl__dot i { border-color: var(--accent); }

.tl__notetext {
  display: -webkit-box;
  -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3;
  overflow: hidden;
  background: none; border: none; padding: 0;
  font-family: var(--serif); font-weight: 300; font-size: 16.5px; line-height: 1.5;
  color: rgba(241, 238, 232, .88);
  text-align: left; cursor: pointer;
  transition: color .18s var(--ease);
}
.tl__notetext:hover { color: var(--accent); }
.tl__row--note .tl__sub { margin-top: 3px; }
.tl__row--note .tl__thumbcell { padding-top: 3px; }

/* a photo thumbnail: same box as a video still */
.tl__thumb--photo { overflow: hidden; }
.tl__thumb--photo img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}

.tl__row--more { padding-top: 2px; padding-bottom: 12px; }
.tl__row--more .tl__body { font-family: var(--sans); font-size: 12.5px; color: var(--muted); }
.tl__row--more .plink { color: var(--muted); }
.tl__row--more .plink::after { content: ' \2192'; }
.tl__row--more .plink:hover { color: var(--accent); }

/* the notes page, and the block on a work page */
.notes { border-top: 1px solid var(--line-soft); }
.note {
  padding: 28px 0 30px;
  border-bottom: 1px solid var(--line-soft);
  scroll-margin-top: 84px;
  transition: background .6s var(--ease);
}
.note.is-target {
  box-shadow: -14px 0 0 -13px var(--accent);   /* a thin gold line in the margin */
  background: linear-gradient(90deg, rgba(201, 164, 92, .07), transparent 70%);
}
.note__when {
  font-family: var(--sans); font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  color: var(--muted-2);
  margin: 0 0 8px;
}
.note__date { color: var(--muted); text-decoration: none; font-weight: 500; }
.note__date:hover { color: var(--accent); }
.note__text {
  font-size: 18px; line-height: 1.65;
  color: rgba(241, 238, 232, .88);
  max-width: 54ch; margin: 0;
  white-space: pre-line;
}
.note__media { margin: 18px 0 0; padding: 0; }
.note__img {
  display: block;
  width: auto; height: auto;
  max-width: 100%; max-height: 72vh;
  border: 1px solid var(--line-soft);
  background: var(--ink-3);
}
.notes--compact { margin-bottom: 34px; }
.note--compact { padding: 20px 0 22px; }
.note--compact .note__text { font-size: 16.5px; }
.note--compact .note__img { max-height: 44vh; }

/* ─────────────  newsletter  ───────────── */

.signup {
  max-width: 520px;
  margin: 56px 0 0;
  padding-top: 24px;
  border-top: 1px solid var(--line-soft);
}
.prose .signup { margin-top: 48px; }
.notes + .signup { margin-top: 48px; }
.signup__title {
  font-family: var(--serif); font-size: 19px; line-height: 1.4;
  color: rgba(241, 238, 232, .9);
  margin: 0 0 14px;
}
.signup__fields { display: flex; flex-wrap: wrap; gap: 10px; }
.signup__input {
  flex: 1 1 220px; min-width: 0;
  font-family: var(--sans); font-size: 16px;
  padding: 11px 14px;
  color: var(--paper);
  background: var(--ink-3);
  border: 1px solid var(--line);
  border-radius: 999px;
}
.signup__input::placeholder { color: var(--muted-2); }
.signup__input:focus { border-color: var(--accent-dim); outline: none; }
.signup__input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.signup__btn:disabled { opacity: .55; cursor: default; transform: none; }
.signup__msg {
  font-family: var(--sans); font-size: 12.5px; color: var(--accent);
  margin: 10px 0 0; min-height: 1px;
}
.signup__msg:empty { display: none; }
.signup__mail { font-size: 17px; color: rgba(241, 238, 232, .86); margin: 0; max-width: 46ch; }
.signup__small {
  font-family: var(--sans); font-size: 11.5px; color: var(--muted-2);
  margin: 12px 0 0;
}
.signup__small .plink { color: var(--muted); }

/* ─────────────────────────────────────────────────────────────
   Laatste woord voor kleine schermen. Staat hier onderaan omdat
   .tl__thumb pas in het video-blok hierboven gedefinieerd wordt.
   ───────────────────────────────────────────────────────────── */
@media (max-width: 620px) {
  /* the still drops to a line of its own, under the title */
  .tl__thumb { width: 100%; max-width: 230px; }
}