/* --- schedule module (cz-*) ------------------------------------------- */
.cz-schedule { font-family: var(--cz-font-body); color: var(--cz-text); }
.cz-schedule a { color: var(--cz-link); text-decoration: underline; text-underline-offset: 2px; }
.cz-schedule a:hover { color: var(--cz-link-hover); }

.cz-heading {
  font-family: var(--cz-font-heading);
  color: var(--cz-heading-color, var(--cz-text));
  font-size: 1.6rem;
  font-weight: 500;
  margin: 3.5rem 0 1rem;
}
.cz-year-heading {
  font-family: var(--cz-font-heading);
  color: var(--cz-heading-color, var(--cz-text));
  font-size: 1.35rem;
  font-weight: 500;
  margin: 2rem 0 0.5rem;
}
.cz-empty { color: var(--cz-text-muted); margin: 1rem 0; }

/* Event unit — list variant: date column beside the body.

   The column width is a hook because it depends on the *date style* the
   design chose, which the module cannot see from CSS: 6.5rem holds "16/10/26"
   and "16 Oct 2026" but not "16 November 2026", and .cz-event-date is
   nowrap, so a long style silently overprints the heading rather than
   wrapping. Found in a browser, on the first design that asked for the
   long date style. */
.cz-schedule--list .cz-event {
  display: grid;
  grid-template-columns: var(--cz-event-date-width, 6.5rem) 1fr;
  gap: 0.35rem 2rem;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--cz-line);
}
@media (max-width: 40rem) {
  .cz-schedule--list .cz-event { grid-template-columns: 1fr; gap: 0.15rem; }
}

/* Event unit — cards variant: bordered card in a responsive grid. */
.cz-schedule-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  align-items: start;
  margin: 1.25rem 0;
}
@media (min-width: 40rem) { .cz-schedule-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .cz-schedule-grid { grid-template-columns: repeat(3, 1fr); } }
.cz-schedule--cards .cz-event {
  border: 1px solid var(--cz-line);
  border-radius: var(--cz-radius);
  padding: 1.25rem;
}
.cz-schedule--cards .cz-event-date { margin-bottom: 0.35rem; }

.cz-event-date { color: var(--cz-text); white-space: nowrap; }
.cz-event-chip {
  display: inline-block;
  background: var(--cz-chip-bg, var(--cz-accent));
  color: var(--cz-chip-fg, var(--cz-on-accent));
  font-size: 0.85em;
  line-height: 1.3;
  padding: 0.25em 0.7em;
  border-radius: var(--cz-radius);
  white-space: normal;
}
.cz-event-heading { font-family: var(--cz-font-heading); font-size: 1.1rem; margin: 0; }
.cz-event-heading a { color: inherit; }
.cz-event-heading a:hover { color: var(--cz-link-hover); }
.cz-event-meta { color: var(--cz-text-muted); margin: 0.1rem 0 0; }
.cz-event-programme { margin: 0.1rem 0 0; }
.cz-event-note { font-style: italic; font-size: 0.95em; margin: 0.35rem 0 0; }
.cz-event-note em { font-style: normal; }
.cz-event-links { margin: 0.4rem 0 0; }
.cz-event-links a { margin-right: 1rem; }
/* Self-hosted downloads ride the links row; the arrow marks the affordance
   (worksModule's data-kind="download" idiom). */
.cz-event-links a[data-kind="download"]::before { content: "\2193\00a0"; }
.cz-event-status {
  color: var(--cz-accent);
  font-family: var(--cz-font-body);
  font-size: 0.85rem;
  text-decoration: none;
  display: inline-block;
}
.cz-event--off .cz-event-heading { text-decoration: line-through; color: var(--cz-text-muted); }
.cz-event--off .cz-event-status { text-decoration: none; }

.cz-event-quote { margin: 0.75rem 0 0; padding: 0; border: 0; }
.cz-event-quote p { font-style: italic; margin: 0; }
/* Emphasis inside italic goes upright — see the press module's note. */
.cz-event-quote p em { font-style: normal; }
.cz-event-quote cite {
  display: block;
  font-style: normal;
  color: var(--cz-text-muted);
  margin-top: 0.15rem;
  font-size: 0.9em;
}

/* Past years: native details accordions, newest first, first one open. */
.cz-year { border-bottom: 1px solid var(--cz-line); }
.cz-year-summary {
  font-family: var(--cz-font-heading);
  color: var(--cz-heading-color, var(--cz-text));
  font-size: 1.25rem;
  padding: 0.75rem 0;
  cursor: pointer;
  list-style: none;
}
.cz-year-summary::-webkit-details-marker { display: none; }
.cz-year-summary::after { content: "+"; float: right; color: var(--cz-text-muted); }
.cz-year[open] > .cz-year-summary::after { content: "\2013"; }

/* The all-dates link under an upcoming teaser. Link colours come from the
   module-wide .cz-schedule a rules; this is only spacing and emphasis. */
.cz-schedule-all { margin: 1.5rem 0 0; }
.cz-schedule--cards .cz-schedule-all { margin-top: 0.25rem; }

.cz-event-compact {
  margin: 0;
  padding: 0.4rem 0;
  border-top: 1px solid var(--cz-line);
  font-size: 0.95rem;
}
.cz-event-compact .cz-event-date { color: var(--cz-text-muted); margin-right: 0.5rem; }
.cz-event-compact.cz-event--off { text-decoration: line-through; color: var(--cz-text-muted); }


/* --- news module (cz-*) ------------------------------------------------ */
.cz-news { font-family: var(--cz-font-body); color: var(--cz-text); }
.cz-news a { color: var(--cz-link); text-decoration: underline; text-underline-offset: 2px; }
.cz-news a:hover { color: var(--cz-link-hover); }
.cz-news .cz-empty { color: var(--cz-text-muted); margin: 1rem 0; }

.cz-post-title {
  font-family: var(--cz-font-heading);
  color: var(--cz-heading-color, var(--cz-text));
  font-size: 1.35rem;
  font-weight: 500;
  margin: 0.15rem 0 0.75rem;
}
.cz-post-date { color: var(--cz-text-muted); margin: 0; font-size: 0.9rem; }
.cz-post-chip {
  display: inline-block;
  background: var(--cz-chip-bg, var(--cz-accent));
  color: var(--cz-chip-fg, var(--cz-on-accent));
  font-size: 0.85em;
  line-height: 1.3;
  padding: 0.25em 0.7em;
  border-radius: var(--cz-radius);
}
.cz-post-body p { margin: 0 0 0.9rem; }
.cz-post-body p:last-child { margin-bottom: 0; }
.cz-post-image {
  display: block;
  width: 100%;
  border-radius: var(--cz-radius);
}

/* Post unit — stacked variant: full-width articles separated by hairlines,
   photo in a side column on wide screens (the sonata/madrigal ground). */
.cz-news--stacked .cz-post {
  padding: 1.75rem 0;
  border-bottom: 1px solid var(--cz-line);
}
.cz-news--stacked .cz-post--imaged {
  display: grid;
  grid-template-columns: 1fr 18rem;
  gap: 1.5rem;
  align-items: start;
}
.cz-news--stacked .cz-post--imaged .cz-post-main { grid-column: 1; grid-row: 1; }
.cz-news--stacked .cz-post--imaged .cz-post-image { grid-column: 2; grid-row: 1; }
@media (max-width: 40rem) {
  .cz-news--stacked .cz-post--imaged { grid-template-columns: 1fr; }
  .cz-news--stacked .cz-post--imaged .cz-post-main { grid-column: 1; grid-row: 2; }
  .cz-news--stacked .cz-post--imaged .cz-post-image { grid-column: 1; grid-row: 1; }
}

/* Post unit — cards variant: bordered cards in a responsive grid, photo on
   top (the fanfare ground). */
.cz-news-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  align-items: start;
  margin: 1.25rem 0;
}
@media (min-width: 40rem) { .cz-news-grid { grid-template-columns: repeat(2, 1fr); } }
.cz-news--cards .cz-post {
  border: 1px solid var(--cz-line);
  border-radius: var(--cz-radius);
  padding: 1.25rem;
}
.cz-news--cards .cz-post-image {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  margin-bottom: 0.9rem;
}


/* --- gallery module (cz-*) -------------------------------------------- */
.cz-gallery { font-family: var(--cz-font-body); color: var(--cz-text); }
.cz-gallery .cz-empty { color: var(--cz-text-muted); margin: 1rem 0; }

.cz-album-title {
  font-family: var(--cz-font-heading);
  color: var(--cz-heading-color, var(--cz-text));
  font-size: 1.35rem;
  font-weight: 500;
  margin: 2.5rem 0 1rem;
}
.cz-album:first-child .cz-album-title { margin-top: 0; }

/* Photo layout — grid variant: two across, three on wide screens. */
.cz-album-photos {
  display: grid;
  gap: 1rem;
  align-items: start;
  margin: 1rem 0 0;
}
.cz-gallery--grid .cz-album-photos { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 64rem) { .cz-gallery--grid .cz-album-photos { grid-template-columns: repeat(3, 1fr); } }

/* Photo layout — rows variant: large single column, doubling on wide. */
.cz-gallery--rows .cz-album-photos { grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 64rem) { .cz-gallery--rows .cz-album-photos { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; } }

.cz-photo { margin: 0; }
.cz-photo-frame {
  display: block;
  overflow: hidden;
  border-radius: var(--cz-radius);
  background: var(--cz-surface);
}
/* The frame is an <a> to the master, so a photo opens full-size with or
 * without a shell lightbox. It carries no link colour or underline — it is
 * a picture, not a piece of text. */
.cz-photo-link { cursor: zoom-in; text-decoration: none; color: inherit; }
.cz-photo-img {
  display: block;
  width: 100%;
  transition: transform 0.4s ease, opacity 0.4s ease;
}
/* Grid tiles crop to a steady ratio (no distortion); rows keep the
 * photograph's own aspect. */
.cz-gallery--grid .cz-photo-img { aspect-ratio: 3 / 2; object-fit: cover; }
.cz-gallery--rows .cz-photo-img { height: auto; }
.cz-photo:hover .cz-photo-img { transform: scale(1.03); opacity: 0.92; }

.cz-photo-caption {
  color: var(--cz-text-muted);
  font-size: 0.9rem;
  margin-top: 0.4rem;
}
.cz-album-credit {
  color: var(--cz-text-muted);
  font-size: 0.85rem;
  margin: 0.75rem 0 0;
}


/* --- press module (cz-*) ----------------------------------------------- */
.cz-press { font-family: var(--cz-font-body); color: var(--cz-text); }
.cz-press a { color: var(--cz-link); text-decoration: underline; text-underline-offset: 2px; }
.cz-press a:hover { color: var(--cz-link-hover); }
.cz-press .cz-empty { color: var(--cz-text-muted); margin: 1rem 0; }

/* Pull-quote unit — shared by the quote wall and the articles fallback:
   accent-edged blockquote (the sonata/nocturne/toccata ground). */
.cz-quote {
  border-left: 2px solid var(--cz-accent);
  margin: 0;
  padding: 0.25rem 0 0.25rem 1.25rem;
}
.cz-quote-text { font-size: 1.15rem; line-height: 1.6; font-style: italic; margin: 0; }
/* Emphasis inside an italic quotation goes upright — the typesetter's rule,
   and the only way an italicised work title reads at all in here. Paired with
   the declaration above: a design that sets this block roman overrides both. */
.cz-quote-text em { font-style: normal; }
.cz-quote-stars { color: var(--cz-accent); font-style: normal; white-space: nowrap; }
.cz-quote-source {
  display: block;
  margin-top: 0.6rem;
  font-size: 0.9rem;
  font-style: normal;
  color: var(--cz-text-muted);
}
.cz-quote-date { white-space: nowrap; }
.cz-quote-link { margin: 0.5rem 0 0; font-size: 0.9rem; }

/* Quote wall — responsive 1→2 column grid. */
.cz-press-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem 2.5rem;
  align-items: start;
  margin: 1.25rem 0;
}
@media (min-width: 48rem) { .cz-press-grid { grid-template-columns: repeat(2, 1fr); } }

/* Long-form articles — hairline-separated full-width units; paragraph-less
   entries keep the pull-quote presentation in the same flow (the
   madrigal/fanfare ground). */
.cz-press--articles .cz-quote { margin: 1.75rem 0; }
.cz-article { padding: 1.75rem 0; border-bottom: 1px solid var(--cz-line); }
.cz-article:last-child { border-bottom: 0; }
.cz-article-heading {
  font-family: var(--cz-font-heading);
  color: var(--cz-heading-color, var(--cz-text));
  font-size: 1.35rem;
  font-weight: 500;
  margin: 0 0 0.35rem;
}
.cz-article-date { color: var(--cz-text-muted); font-size: 0.9rem; margin: 0 0 0.35rem; }
.cz-article-context { font-style: italic; color: var(--cz-accent-deep); margin: 0 0 0.5rem; }
.cz-article-lede { margin: 0.5rem 0 0.9rem; }
.cz-article-body p { margin: 0 0 0.9rem; }
.cz-article-body p:last-child { margin-bottom: 0; }
.cz-article-link { margin: 0.5rem 0 0; font-size: 0.9rem; }


/* --- recordings module (cz-*) ----------------------------------------- */
.cz-recordings { font-family: var(--cz-font-body); color: var(--cz-text); }
.cz-recordings a { color: var(--cz-link); text-decoration: underline; text-underline-offset: 2px; }
.cz-recordings a:hover { color: var(--cz-link-hover); }
.cz-recordings .cz-empty { color: var(--cz-text-muted); margin: 1rem 0; }

/* Card grid — two across, four on wide screens (the prelude/bravura/
   fanfare ground): cover on top, notes beneath. */
.cz-recordings-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.5rem 1.75rem;
  align-items: start;
  margin: 1.25rem 0;
}
@media (min-width: 64rem) { .cz-recordings-grid { grid-template-columns: repeat(4, 1fr); } }

.cz-recording { margin: 0; }
.cz-recording-cover {
  overflow: hidden;
  border-radius: var(--cz-radius);
  background: var(--cz-surface);
}
.cz-recording-img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.cz-recording:hover .cz-recording-img { transform: scale(1.03); }

.cz-recording-title {
  font-family: var(--cz-font-heading);
  color: var(--cz-heading-color, var(--cz-text));
  font-size: 1.15rem;
  font-weight: 500;
  line-height: 1.3;
  margin: 0.85rem 0 0.25rem;
}
.cz-recording-credit { color: var(--cz-text-muted); font-size: 0.9rem; margin: 0 0 0.35rem; }
.cz-recording-personnel { font-size: 0.9rem; margin: 0 0 0.5rem; }
.cz-recording-personnel p { margin: 0 0 0.15rem; }
.cz-recording-blurb { line-height: 1.65; margin: 0.5rem 0; }

/* Track listings — detailed units only; headings pick up the heading face. */
.cz-recording-tracks { font-size: 0.9rem; color: var(--cz-text-muted); margin: 0.75rem 0; }
.cz-track-heading {
  font-family: var(--cz-font-heading);
  color: var(--cz-text);
  margin: 0.75rem 0 0.25rem;
}
.cz-recording-tracks > :first-child { margin-top: 0; }
.cz-track-line { margin: 0 0 0.15rem; }

/* Accolades — a compact awards line (madrigal/fanfare). */
.cz-recording-accolades {
  margin: 0.75rem 0 0;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.cz-accolade { color: var(--cz-accent-deep); margin-right: 0.75rem; }
.cz-recordings a.cz-accolade { text-decoration: none; }
.cz-recordings a.cz-accolade:hover { color: var(--cz-accent); text-decoration: underline; }

/* Review quote under its recording (the opt-in recordingQuotes ctx knob). */
.cz-recording-quote {
  border-left: 2px solid var(--cz-accent);
  margin: 0.9rem 0 0;
  padding: 0.1rem 0 0.1rem 0.9rem;
  font-size: 0.9rem;
}
.cz-recording-quote p { font-style: italic; margin: 0; }
/* Emphasis inside italic goes upright — see the press module's note. */
.cz-recording-quote p em { font-style: normal; }
.cz-recording-stars { color: var(--cz-accent); font-style: normal; white-space: nowrap; }
.cz-recording-quote cite {
  display: block;
  margin-top: 0.3rem;
  font-style: normal;
  color: var(--cz-text-muted);
}

/* Listening / buying / review links. */
.cz-recording-links { margin: 0.85rem 0 0; font-size: 0.9rem; }
.cz-recording-link { margin-right: 1rem; white-space: nowrap; }
/* Self-hosted downloads ride the links row; the arrow marks the affordance
   (worksModule's data-kind="download" idiom). A download's label is the
   file's own, and an author's label runs long — "BBC Radio 3 Record Review –
   Harriet Smith and Andrew McGregor discuss the Op 20 CD" — so unlike the
   short outbound labels it wraps rather than overflowing the column. */
.cz-recording-link[data-kind="download"] { white-space: normal; }
.cz-recording-link[data-kind="download"]::before { content: "\2193\00a0"; }

/* Detailed units — full width, cover beside the notes, hairline separated. */
.cz-recordings--detailed .cz-recording {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  padding: 2rem 0;
  border-bottom: 1px solid var(--cz-line);
}
.cz-recordings--detailed .cz-recording:first-child { padding-top: 0.5rem; }
.cz-recordings--detailed .cz-recording:last-child { border-bottom: 0; }
@media (min-width: 48rem) {
  .cz-recordings--detailed .cz-recording { grid-template-columns: 16rem 1fr; gap: 2.5rem; }
}
.cz-recordings--detailed .cz-recording-title { font-size: 1.4rem; margin-top: 0; }


/* --- videos module (cz-*) --------------------------------------------- */
.cz-videos { font-family: var(--cz-font-body); color: var(--cz-text); }
.cz-videos a { color: var(--cz-link); text-decoration: underline; text-underline-offset: 2px; }
.cz-videos a:hover { color: var(--cz-link-hover); }
.cz-videos .cz-empty { color: var(--cz-text-muted); margin: 1rem 0; }

/* Embed grid — one across, two at 48rem, three on wide screens. */
.cz-videos-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem 1.5rem;
  align-items: start;
  margin: 1.25rem 0;
}
@media (min-width: 48rem) { .cz-videos-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .cz-videos-grid { grid-template-columns: repeat(3, 1fr); } }

.cz-video-frame {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--cz-radius);
  background: var(--cz-surface);
}
.cz-video-embed { display: block; width: 100%; height: 100%; border: 0; }

/* Poster still — the chosen frame linking out to the watch page. The play
   badge and the caption scrim sit over a photograph, so their blacks and
   whites are literals like every scrim's: the picture isn't themed. The
   badge takes the site's accent on hover, which is the themed part. */
.cz-videos .cz-video-poster {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--cz-radius);
  background: var(--cz-surface);
  text-decoration: none;
}
.cz-video-still {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cz-video-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 4.25rem;
  height: 3rem;
  border-radius: 0.75rem;
  background: rgba(0, 0, 0, 0.6);
  transition: background 0.15s ease;
}
.cz-video-play::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-42%, -50%);
  border-style: solid;
  border-width: 0.55rem 0 0.55rem 0.95rem;
  border-color: transparent transparent transparent #ffffff;
}
.cz-video-poster:hover .cz-video-play,
.cz-video-poster:focus-visible .cz-video-play {
  background: var(--cz-accent);
}
.cz-video-caption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 2.25rem 0.9rem 0.7rem;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
  color: #ffffff;
  font-family: var(--cz-font-heading);
  font-size: 0.95rem;
  line-height: 1.35;
  white-space: pre-line;
}
.cz-video--lead .cz-video-caption { font-size: 1.15rem; }

.cz-video-title {
  font-family: var(--cz-font-heading);
  color: var(--cz-heading-color, var(--cz-text));
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.3;
  margin: 0.6rem 0 0;
}
/* Titles above the frame keep their breathing room on the other side. */
.cz-video-title:first-child { margin: 0 0 0.6rem; }

/* Lead embed — the featured variant's single large video (madrigal's
   home-page treatment), centred above the rest of the grid. */
.cz-video--lead { max-width: 48rem; margin: 0 auto 2.5rem; }
.cz-video--lead .cz-video-title { font-size: 1.35rem; }


/* --- works module (cz-*) ---------------------------------------------- */
.cz-works { font-family: var(--cz-font-body); color: var(--cz-text); }
.cz-works a { color: var(--cz-link); text-decoration: underline; text-underline-offset: 2px; }
.cz-works a:hover { color: var(--cz-link-hover); }
.cz-works .cz-empty { color: var(--cz-text-muted); margin: 1rem 0; }

.cz-works-heading {
  font-family: var(--cz-font-heading);
  color: var(--cz-heading-color, var(--cz-text));
  font-size: 1.35rem;
  font-weight: 500;
  margin: 2.5rem 0 0.75rem;
}
.cz-works-group:first-child .cz-works-heading { margin-top: 0; }

/* List variant — a no-JS accordion, the source catalogue's own idiom. */
.cz-works--list .cz-work { border-bottom: 1px solid var(--cz-line); }
.cz-work-summary {
  font-family: var(--cz-font-heading);
  color: var(--cz-heading-color, var(--cz-text));
  font-size: 1.1rem;
  line-height: 1.4;
  margin: 0;
  padding: 0.85rem 1.5rem 0.85rem 0;
  cursor: pointer;
  list-style: none;
  position: relative;
}
.cz-work-summary::-webkit-details-marker { display: none; }
.cz-work-summary::after {
  content: "+";
  position: absolute;
  right: 0;
  color: var(--cz-text-muted);
}
.cz-work[open] > .cz-work-summary::after { content: "\2013"; }
/* A title-only work is a plain row: no widget, no toggle affordance. */
.cz-work--bare .cz-work-summary { cursor: default; }
.cz-work--bare .cz-work-summary::after { content: none; }

.cz-work-name { font-weight: 500; }
.cz-work-year { color: var(--cz-text-muted); font-size: 0.9em; white-space: nowrap; }
.cz-work-chip {
  display: inline-block;
  background: var(--cz-chip-bg, var(--cz-accent));
  color: var(--cz-chip-fg, var(--cz-on-accent));
  font-size: 0.85em;
  line-height: 1.3;
  padding: 0.2em 0.6em;
  border-radius: var(--cz-radius);
}

.cz-work-body { padding: 0 0 1.25rem; max-width: 46rem; }
.cz-work-body > :first-child { margin-top: 0; }

.cz-work-meta { color: var(--cz-text-muted); margin: 0 0 0.5rem; }
.cz-work-forces { font-style: italic; }
.cz-work-text { line-height: 1.65; margin: 0 0 0.6rem; }

.cz-work-figure {
  overflow: hidden;
  border-radius: var(--cz-radius);
  background: var(--cz-surface);
  margin: 0 0 0.9rem;
}
.cz-work-img { display: block; width: 100%; height: auto; }

.cz-work-frame {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--cz-radius);
  background: var(--cz-surface);
  margin: 0.9rem 0;
}
.cz-work-embed { display: block; width: 100%; height: 100%; border: 0; }

.cz-work-links { margin: 0.75rem 0 0; font-size: 0.9rem; }
.cz-work-link { margin-right: 1rem; white-space: nowrap; }
/* Kind affordances: a score is a download, not a destination — and a
   self-hosted file always is, whatever it holds. */
.cz-work-link[data-kind="score"]::before,
.cz-work-link[data-kind="download"]::before { content: "\2193\00a0"; }
.cz-work-more { margin: 0.6rem 0 0; font-size: 0.9rem; }
.cz-work-more-link { color: var(--cz-accent-deep); }

/* Cards variant — image-forward tiles, one across → two → three. */
.cz-works-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem 1.5rem;
  align-items: start;
  margin: 1.25rem 0;
}
@media (min-width: 40rem) { .cz-works-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .cz-works-grid { grid-template-columns: repeat(3, 1fr); } }

.cz-works--cards .cz-work {
  border: 1px solid var(--cz-line);
  border-radius: var(--cz-radius);
  padding: 1.25rem;
}
.cz-works--cards .cz-work-figure { margin: -1.25rem -1.25rem 1rem; border-radius: 0; }
.cz-works--cards .cz-work-img { aspect-ratio: 3 / 2; object-fit: cover; }
.cz-work-title {
  font-family: var(--cz-font-heading);
  color: var(--cz-heading-color, var(--cz-text));
  font-size: 1.15rem;
  font-weight: 500;
  line-height: 1.3;
  margin: 0 0 0.2rem;
}
.cz-works--cards .cz-work-year { display: block; margin: 0 0 0.5rem; }


/* --- press-kit module (cz-*) -------------------------------------------- */
.cz-presskit { font-family: var(--cz-font-body); margin: 0 0 2.5rem; }
.cz-presskit-link { color: var(--cz-link); text-decoration: none; }
.cz-presskit-link:hover { color: var(--cz-link-hover); }
.cz-presskit-affix { font-weight: 600; }

/* Line — a bare row of links. Flex + gap rather than margins, so a row
   that wraps keeps even spacing on every line. */
.cz-presskit--line,
.cz-presskit-links {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 1.25rem;
  margin: 0;
  font-size: 0.9rem;
}
.cz-presskit--line .cz-presskit-link + .cz-presskit-link::before,
.cz-presskit-links .cz-presskit-link + .cz-presskit-link::before {
  content: var(--cz-presskit-sep, "");
  color: var(--cz-text-muted);
  margin-right: 1.25rem;
}

/* Panel — the same row under a heading, between rules. */
.cz-presskit--panel {
  border-top: 1px solid var(--cz-line);
  border-bottom: 1px solid var(--cz-line);
  padding: 1rem 0;
}
.cz-presskit-heading {
  font-family: var(--cz-font-heading);
  color: var(--cz-heading-color, var(--cz-text));
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  margin: 0 0 0.5rem;
}


/* --- bio module (cz-*) --------------------------------------------------- */
.cz-bio { font-family: var(--cz-font-body); color: var(--cz-text); }

.cz-bio-heading {
  font-family: var(--cz-font-heading);
  color: var(--cz-heading-color, var(--cz-text));
  font-size: 1.25rem;
  line-height: 1.3;
  margin: 2rem 0 1rem;
}
.cz-bio-section:first-child > .cz-bio-heading { margin-top: 0; }

/* The roster line. The separator is CSS so a design can change a middot to a
   slash without new markup, and the last player must not trail one. */
.cz-bio-roster {
  margin: 0 0 2rem;
  color: var(--cz-bio-roster-color, var(--cz-text-muted));
  font-size: var(--cz-bio-roster-size, 0.75rem);
  font-family: var(--cz-bio-roster-font, inherit);
  letter-spacing: var(--cz-bio-roster-tracking, 0.1em);
  text-transform: var(--cz-bio-roster-transform, uppercase);
  text-align: var(--cz-bio-roster-align, left);
}
.cz-bio-player + .cz-bio-player::before { content: var(--cz-bio-roster-sep, "\00a0\00b7\00a0"); }

.cz-bio-section p { margin: 0 0 1rem; line-height: 1.7; }
.cz-bio-section p:last-child { margin-bottom: 0; }
.cz-bio-section + .cz-bio-section { margin-top: 1rem; }

/* "lead" — the opening run, set larger. The size is a hook because the five
   designs that enlarge it disagree by a step and one of them (nocturne) also
   lightens the weight. */
.cz-bio-section--lead p {
  font-size: var(--cz-bio-lead-size, 1.125rem);
  font-weight: var(--cz-bio-lead-weight, inherit);
}

/* "panel" — a boxed run. Every part defaults to invisible in the
   --cz-chip-bg idiom, so a variant that panels on a design which sets none of
   them still reads as a plain run rather than an empty box. The border is
   split style/width/colour for contactModule's reason: three of the four
   designs that panel draw the border on one side only. */
.cz-bio-section--panel {
  margin: 1.5rem 0;
  background: var(--cz-bio-panel-bg, transparent);
  border-style: var(--cz-bio-panel-border-style, none);
  border-width: var(--cz-bio-panel-border-width, 0);
  border-color: var(--cz-bio-panel-border-color, var(--cz-accent));
  border-radius: var(--cz-radius);
  padding: var(--cz-bio-panel-pad, 0);
}
.cz-bio-section--panel > .cz-bio-heading { margin-top: 0; }

/* Roles. "cards" is a grid of boxes, "list" a plain run of entries, "steps"
   the same run with a numbered badge in a leading column. */
.cz-roles { display: grid; gap: var(--cz-role-gap, 1.5rem); margin-top: 1.5rem; }
@media (min-width: 768px) {
  .cz-roles--cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.cz-roles--cards .cz-role {
  background: var(--cz-role-card-bg, transparent);
  border-style: var(--cz-role-card-border-style, none);
  border-width: var(--cz-role-card-border-width, 0);
  border-color: var(--cz-role-card-border-color, var(--cz-accent));
  border-radius: var(--cz-radius);
  box-shadow: var(--cz-role-card-shadow, none);
  padding: var(--cz-role-card-pad, 0);
}

.cz-roles--steps .cz-role { display: flex; gap: 1rem; align-items: flex-start; }
/* The badge is the module's; its shape is the design's. A design that sets
   nothing gets a plain number rather than a broken circle. */
.cz-role-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--cz-role-step-size, 2rem);
  height: var(--cz-role-step-size, 2rem);
  border-radius: var(--cz-role-step-radius, 50%);
  background: var(--cz-role-step-bg, transparent);
  color: var(--cz-role-step-fg, var(--cz-text));
  font-weight: 700;
}
.cz-role-main { flex: 1; min-width: 0; }

.cz-role-org {
  font-family: var(--cz-font-heading);
  color: var(--cz-heading-color, var(--cz-text));
  font-size: 1.05rem;
  margin: 0;
}
.cz-role-link { color: inherit; text-decoration: none; }
.cz-role-link:hover { color: var(--cz-link-hover); }
.cz-role-meta { margin: 0.25rem 0 0.5rem; font-size: 0.9rem; color: var(--cz-text-muted); }
.cz-role-body p { margin: 0 0 0.75rem; font-size: 0.95rem; line-height: 1.65; }
.cz-role-body p:last-child { margin-bottom: 0; }

.cz-bio-empty { color: var(--cz-text-muted); }

/* The short variant: a home-page teaser, so it is set a step larger than
   body copy and the link reads as the page's one call to action. Both are
   hooks with fallbacks, the button being the part designs disagree about
   most — bravura fills it with the accent, nocturne leaves it a plain link. */
.cz-bio-short-line {
  font-size: var(--cz-bio-short-size, 1.125rem);
  line-height: 1.7;
  margin: 0 0 1rem;
  max-width: var(--cz-bio-short-measure, 48rem);
}
.cz-bio-more {
  display: inline-block;
  margin-top: 0.5rem;
  padding: var(--cz-bio-more-pad, 0.75rem 1.5rem);
  background: var(--cz-bio-more-bg, var(--cz-accent));
  color: var(--cz-bio-more-fg, var(--cz-on-accent));
  border-radius: var(--cz-radius);
  font-size: 0.875rem;
  letter-spacing: var(--cz-bio-more-tracking, 0.1em);
  text-transform: var(--cz-bio-more-transform, uppercase);
  text-decoration: none;
}
.cz-bio-more:hover { background: var(--cz-bio-more-bg-hover, var(--cz-accent-hover)); }


/* --- members module (cz-*) ---------------------------------------------- */
.cz-members { font-family: var(--cz-font-body); color: var(--cz-text); }

.cz-members-heading {
  font-family: var(--cz-font-heading);
  color: var(--cz-heading-color, var(--cz-text));
  font-size: 1.35rem;
  line-height: 1.3;
  margin: 0 0 1.5rem;
}

.cz-members-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--cz-member-gap, 2.5rem);
}

/* Cards and portraits are grids across; stacked and prose are one column of
   full-width units, so they ignore the column count entirely. */
@media (min-width: 768px) {
  .cz-members--cards .cz-members-list[data-cz-columns="2"],
  .cz-members--portraits .cz-members-list[data-cz-columns="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cz-members--cards .cz-members-list[data-cz-columns="3"],
  .cz-members--portraits .cz-members-list[data-cz-columns="3"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cz-members--cards .cz-members-list[data-cz-columns="4"],
  .cz-members--portraits .cz-members-list[data-cz-columns="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .cz-members--cards .cz-members-list[data-cz-columns="3"],
  .cz-members--portraits .cz-members-list[data-cz-columns="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cz-members--cards .cz-members-list[data-cz-columns="4"],
  .cz-members--portraits .cz-members-list[data-cz-columns="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* The unit. The card treatment is hooks defaulting to invisible, in the
   --cz-chip-bg idiom: a design that wants a raised white card sets a ground,
   a padding and a shadow; a design that wants the block on the bare page
   sets none and gets exactly that. `--cz-member-rule` is the separate
   hairline-above treatment (fanfare rules each player off). */
.cz-member {
  background: var(--cz-member-card-bg, transparent);
  border-top: var(--cz-member-rule, none);
  border-radius: var(--cz-radius);
  box-shadow: var(--cz-member-card-shadow, none);
  padding: var(--cz-member-card-pad, 0);
}

/* Stacked — portrait in a side column beside the prose. The column width is
   a hook because the eight that do this disagree by design (10rem, 11rem,
   14rem, a third of the row) and it takes a fraction as readily as a length,
   which is what lets toccata's 3-column grid and sonata's fixed 11rem be the
   same rule. */
@media (min-width: 640px) {
  /* Only an imaged member becomes two columns: without the modifier a member
     with no photograph would lay its prose out in the *portrait* column. */
  .cz-members--stacked .cz-member--imaged {
    display: grid;
    grid-template-columns: var(--cz-member-portrait-width, 12rem) 1fr;
    gap: 1.5rem;
    align-items: start;
  }
}

.cz-member-portrait {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--cz-member-portrait-aspect, auto);
  object-fit: cover;
  border: var(--cz-member-portrait-border, none);
  border-radius: var(--cz-member-portrait-radius, 0);
  box-shadow: var(--cz-member-portrait-shadow, none);
}
.cz-member-portrait-link { display: block; }

.cz-members--cards .cz-member-portrait,
.cz-members--portraits .cz-member-portrait { margin-bottom: 1rem; }

/* A portrait fills its cell, so *fewer* columns means *bigger* pictures —
   the opposite of what the column clamp is for. Two players in a wall
   declared four across would otherwise get half-page posters. The cap is
   above any cell width the declared counts produce at the measures these
   designs use, so it only bites when the clamp has widened the cell. */
.cz-members--portraits .cz-member {
  text-align: center;
  max-width: var(--cz-member-portrait-max, 15rem);
  margin-inline: auto;
}

.cz-member-name {
  font-family: var(--cz-font-heading);
  color: var(--cz-heading-color, var(--cz-text));
  font-size: 1.15rem;
  line-height: 1.35;
  margin: 0;
}
.cz-member-link { color: inherit; text-decoration: none; }
.cz-member-link:hover { color: var(--cz-link-hover); }
/* Madrigal's grid tells the reader the portrait goes somewhere. Decoration,
   so it is a hook rather than markup — the same call as --cz-presskit-sep. */
.cz-member-link::after { content: var(--cz-member-affix, ""); }

/* The instrument. Two designs put it on its own line under the name and six
   run it on, so the display is a hook; the separator that precedes it when
   inline is another, since three designs draw one and three don't. */
.cz-member-instrument {
  display: var(--cz-member-instrument-display, inline);
  font-family: var(--cz-font-body);
  font-size: 0.85rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--cz-member-instrument-color, var(--cz-text-muted));
}
/* No separator by default, because the default is no separator: the three
   designs that put the instrument on its own line want nothing before it,
   and a space there indents that line out of alignment with the name. The
   five that run it on set their own — with non-breaking spaces, ordinary
   trailing whitespace being dropped at the end of the pseudo-element box. */
.cz-member-instrument::before { content: var(--cz-member-sep, ""); }

.cz-member-body { margin-top: 0.85rem; line-height: 1.7; }
.cz-member-body p { margin: 0 0 0.85rem; }
.cz-member-body p:last-child { margin-bottom: 0; }
.cz-members-empty { color: var(--cz-text-muted); }


/* --- contact module (cz-*) ---------------------------------------------- */
.cz-contact { font-family: var(--cz-font-body); color: var(--cz-text); }

.cz-contact-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 768px) {
  .cz-contact-cards[data-cz-columns="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cz-contact-cards[data-cz-columns="3"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .cz-contact-cards[data-cz-columns="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.cz-contact-heading {
  font-family: var(--cz-font-heading);
  color: var(--cz-heading-color, var(--cz-text));
  font-size: 1.05rem;
  line-height: 1.3;
  margin: 0 0 0.75rem;
}
.cz-contact-name { font-weight: 600; margin: 0 0 0.25rem; }
.cz-contact-address { margin: 0 0 0.75rem; font-size: 0.9rem; line-height: 1.6; }
.cz-contact-address p { margin: 0; }
.cz-contact-details { font-size: 0.9rem; line-height: 1.6; }
.cz-contact-row { margin: 0; }
.cz-contact-row--email { overflow-wrap: anywhere; }
.cz-contact-link { color: var(--cz-link); text-decoration: none; }
.cz-contact-link:hover { color: var(--cz-link-hover); }
.cz-contact-empty { color: var(--cz-text-muted); }

/* Cards — each entry in its own box. The surface is a hook rather than the
   ramp's own `surface`, because four designs box the card against the page
   ground and two of those want white on a tinted page. */
.cz-contact--cards .cz-contact-card {
  background: var(--cz-contact-card-bg, transparent);
  border: 1px solid var(--cz-line);
  border-radius: var(--cz-radius);
  padding: 1.5rem;
}

/* Ruled — a hairline above each entry instead of a box (madrigal's whole
   design language). The rule is a hook so the width, style and colour move
   together; a design that doesn't set it gets no rule and no padding. */
.cz-contact--ruled .cz-contact-card {
  border-top: var(--cz-contact-rule, 1px solid var(--cz-line));
  padding-top: 1rem;
}

/* Plain — no chrome. The card is a group of paragraphs and nothing else. */

/* The form block's chrome is hooks, all defaulting to invisible, in the
   --cz-chip-bg/--cz-chip-fg idiom: a design that wants the form to read as a
   panel sets a surface, a border and the padding that goes with them; a design
   that wants it to sit on the page sets none and gets exactly that.

   The border is split into style/width/colour rather than one shorthand
   because two of the eight draw it on **one side** — madrigal rules the form
   off above it, toccata puts a 4px accent bar down its left — and a border
   shorthand cannot say that. Padding is its own hook for a related reason:
   CSS cannot ask whether a border was set, so the padding a panel needs has
   to be stated. */
.cz-contact-form {
  margin-top: 2.5rem;
  max-width: 36rem;
  background: var(--cz-contact-form-bg, transparent);
  border-style: var(--cz-contact-form-border-style, none);
  border-width: var(--cz-contact-form-border-width, 0);
  border-color: var(--cz-contact-form-border-color, var(--cz-line));
  border-radius: var(--cz-radius);
  padding: var(--cz-contact-form-pad, 0);
}
.cz-contact-form-heading {
  font-family: var(--cz-font-heading);
  color: var(--cz-heading-color, var(--cz-text));
  font-size: 1.05rem;
  margin: 0 0 0.5rem;
}
.cz-contact-form-text { margin: 0 0 1rem; font-size: 0.9rem; }
.cz-contact-fields { max-width: 36rem; }
.cz-contact-field {
  display: block;
  width: 100%;
  box-sizing: border-box;
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--cz-text);
  background: var(--cz-contact-field-bg, transparent);
  border: 1px solid var(--cz-line);
  border-radius: var(--cz-radius);
  padding: 0.75rem 1rem;
  margin: 0 0 0.75rem;
}
.cz-contact-field:focus { outline: none; border-color: var(--cz-accent); }
.cz-contact-field::placeholder { color: var(--cz-text-muted); }
.cz-contact-button {
  display: inline-block;
  font-family: inherit;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  color: var(--cz-on-accent);
  background: var(--cz-accent);
  border: 1px solid var(--cz-accent);
  border-radius: var(--cz-radius);
  padding: 0.75rem 2rem;
}
.cz-contact-button:hover { background: var(--cz-accent-hover); border-color: var(--cz-accent-hover); }

/* =========================================================================
   Arioso — the Sunday-supplement profile.

   Gallery-white ground, cool ink, one ultramarine accent used the way an
   editor uses one: links, the current page, the eyebrow labels, and the
   pull-quotes set large in the italic display face. Instrument Serif (400
   and italic only — the constraint is the voice) carries every headline
   over Albert Sans doing the quiet work. Hairline rules instead of boxes,
   near-square corners, and the photography at full width with nothing
   painted over it.

   Plain CSS, no build step. The :root block opens with the --cz-* contract
   — the eighteen tokens the shared modules read without a fallback — then
   the per-design hooks they read *with* one, then this design's own
   variables. Module stylesheets are concatenated ahead of this file, so
   anything here wins without specificity tricks. The Google Fonts <link>
   is in layout.html's head, never an @import here (an @import after the
   modules' rules is dropped by every browser, silently).
   ========================================================================= */

:root {
  /* --- the contract ---------------------------------------------------- */
  --cz-ground: #fcfcfa;
  --cz-surface: #f4f4f0;
  --cz-text: #16181d;
  --cz-text-muted: #62666e;
  --cz-accent: #2438b8;
  --cz-accent-hover: #1a2b94;
  --cz-accent-active: #152478;
  --cz-accent-bright: #4257e0;
  --cz-accent-soft: #eaecfa;
  --cz-accent-deep: #131f66;
  --cz-on-accent: #ffffff;
  --cz-on-accent-muted: #c6cdf4;
  --cz-link: #2438b8;
  --cz-link-hover: #1a2b94;
  --cz-font-heading: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --cz-font-body: "Albert Sans", ui-sans-serif, system-ui, sans-serif;
  --cz-line: #e4e4de;
  --cz-radius: 2px;

  /* --- hooks: read by the modules with a fallback ----------------------- */
  --cz-heading-color: var(--cz-text);
  /* The date stamp: a pale ultramarine wash, deep ink on it. */
  --cz-chip-bg: var(--cz-accent-soft);
  --cz-chip-fg: var(--cz-accent-deep);
  /* day-month dates ("14 March") in the schedule's list column. */
  --cz-event-date-width: 7.5rem;
  --cz-contact-rule: 1px solid var(--cz-line);
  --cz-member-portrait-radius: 2px;
  --cz-member-instrument-color: var(--cz-text-muted);
  /* On its own line under the name — inline, it glues to the heading. */
  --cz-member-instrument-display: block;
  --cz-bio-roster-font: var(--cz-font-body);
  --cz-bio-roster-tracking: 0.18em;
  --cz-bio-roster-transform: uppercase;
  --cz-bio-roster-size: 0.72rem;
  --cz-bio-roster-color: var(--cz-text-muted);
  --cz-bio-lead-size: 1.28rem;
  --cz-bio-short-size: 1.28rem;

  /* --- this design's own ------------------------------------------------ */
  --a-measure: 72rem;
  --a-narrow: 46rem;
  --a-gutter: 1.5rem;
  --a-rule: 1px solid var(--cz-line);
  /* One inline geometry for the hero headline and the shell, so type over
     the full-bleed photograph lines up with type on the page. */
  --a-inset: max(var(--a-gutter), calc((100vw - var(--a-measure)) / 2));
  /* The engine's one-page hook. No sticky bar here — this is breathing room,
     so an anchored band doesn't land flush with the viewport's top edge. */
  --cz-scroll-offset: 1rem;
}

/* -------------------------------------------------------------------------
   Base
   ------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--cz-ground);
  color: var(--cz-text);
  font-family: var(--cz-font-body);
  font-size: 1rem;
  line-height: 1.7;
}

img { max-width: 100%; height: auto; }

a { color: var(--cz-link); }
a:hover { color: var(--cz-link-hover); }

:focus-visible { outline: 2px solid var(--cz-accent-bright); outline-offset: 3px; }

::selection { background: var(--cz-accent); color: var(--cz-on-accent); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 60;
  background: var(--cz-accent);
  color: var(--cz-on-accent);
  padding: 0.6rem 1rem;
}
.skip-link:focus { left: 0; }

.shell {
  width: 100%;
  max-width: var(--a-measure);
  margin-inline: auto;
  padding-inline: var(--a-gutter);
}
/* Cap the children, not the container — a capped container re-centres and
   the heading above it drifts off the text's left edge (quarto's lesson). */
.shell--narrow > * { max-width: var(--a-narrow); }

.cz-event-date, .cz-track-line, .cz-work-year, .cz-post-date, .cz-quote-date {
  font-variant-numeric: tabular-nums;
}

/* -------------------------------------------------------------------------
   Masthead — a quiet hairlined bar
   ------------------------------------------------------------------------- */

.topbar { border-bottom: var(--a-rule); background: var(--cz-ground); }

.bar-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 2rem;
  padding-block: 1.05rem;
}

.mark { text-decoration: none; color: inherit; display: inline-flex; align-items: center; min-width: 0; }
.cz-wordmark {
  font-family: var(--cz-font-heading);
  font-weight: 400;
  font-size: 1.45rem;
  letter-spacing: 0.01em;
  color: var(--cz-text);
  white-space: nowrap;
}
.cz-logo { display: block; }
.cz-logo--wide { width: auto; max-height: 2.4rem; }
.cz-logo--square { height: 2.4rem; width: auto; }

/* Nav: tracked caps, the current page underlined in the accent. */
.cz-nav-list { list-style: none; margin: 0; padding: 0; }
.nav > .cz-nav-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.35rem 1.6rem;
}
.cz-nav-link,
.cz-nav-heading {
  display: inline-block;
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--cz-text-muted);
  padding-block: 0.3rem;
  border-bottom: 2px solid transparent;
}
.cz-nav-link:hover { color: var(--cz-text); }
.cz-nav-link--current { color: var(--cz-text); border-bottom-color: var(--cz-accent); }
.cz-nav-group--current > .cz-nav-heading { color: var(--cz-text); }

/* A group: heading in the row, members in a dropped panel. Opacity rather
   than display so the links stay in the tab order — :focus-within is what
   opens it for a keyboard, and a hidden link can never be focused. */
.cz-nav-group { position: relative; }
.cz-nav-heading { cursor: default; }
.cz-nav-heading::after { content: " \25BE"; font-size: 0.72em; color: var(--cz-accent); }
.cz-nav-group > .cz-nav-list {
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  z-index: 50;
  min-width: 14rem;
  padding: 0.5rem 0;
  background: var(--cz-ground);
  border: var(--a-rule);
  box-shadow: 0 14px 34px -20px rgba(22, 24, 29, 0.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}
.cz-nav-group:hover > .cz-nav-list,
.cz-nav-group:focus-within > .cz-nav-list { opacity: 1; pointer-events: auto; }
.cz-nav-group > .cz-nav-list .cz-nav-link {
  display: block;
  padding: 0.45rem 1.2rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: none;
  font-size: 0.92rem;
  color: var(--cz-text);
  white-space: nowrap;
  border-bottom: 0;
}
.cz-nav-group > .cz-nav-list .cz-nav-link:hover { color: var(--cz-accent); background: var(--cz-surface); }
.cz-nav-group > .cz-nav-list .cz-nav-link--current { color: var(--cz-accent); font-weight: 600; }

.nav-toggle {
  display: none;
  background: none;
  border: var(--a-rule);
  border-radius: var(--cz-radius);
  color: var(--cz-text);
  font: inherit;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.45rem 0.85rem;
  cursor: pointer;
}
.nav-toggle:hover { border-color: var(--cz-accent); }

/* Mobile: the menu is a plain block under the bar. No open/close animation,
   deliberately — both height-animation techniques truncate the menu in
   different ways (the recorded lesson). A capped sheet that scrolls, never a
   guessed content height. */
@media (max-width: 56rem) {
  .nav-toggle { display: inline-block; }
  .nav { display: none; flex-basis: 100%; }
  .nav[data-open] {
    display: block;
    padding-block: 0.4rem 1rem;
    max-height: calc(100vh - 6rem);
    overflow-y: auto;
  }
  .nav > .cz-nav-list { display: block; }
  .nav .cz-nav-link, .nav .cz-nav-heading { display: block; padding: 0.5rem 0; border-bottom: 0; }
  .nav .cz-nav-link--current { color: var(--cz-accent); }
  .cz-nav-group > .cz-nav-list {
    position: static;
    transform: none;
    min-width: 0;
    padding: 0 0 0.35rem 1rem;
    background: transparent;
    border: 0;
    border-left: 2px solid var(--cz-line);
    box-shadow: none;
    opacity: 1;
    pointer-events: auto;
  }
  .cz-nav-group > .cz-nav-list .cz-nav-link { padding: 0.4rem 0; white-space: normal; }
}

/* -------------------------------------------------------------------------
   Hero — eyebrow, headline, then the photograph at full width
   ------------------------------------------------------------------------- */

.cz-hero { display: flex; flex-direction: column; padding-top: 3.5rem; }
.cz-hero-tagline {
  order: 1;
  margin: 0 0 1.1rem;
  padding-inline: var(--a-inset);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--cz-accent);
}
.cz-hero-name {
  order: 2;
  margin: 0;
  padding-inline: var(--a-inset);
  font-family: var(--cz-font-heading);
  font-weight: 400;
  font-size: clamp(3rem, 9.5vw, 7rem);
  line-height: 0.98;
  letter-spacing: -0.01em;
  text-wrap: balance;
  color: var(--cz-text);
}
.cz-hero-image {
  order: 3;
  display: block;
  width: 100%;
  height: min(72vh, 46rem);
  object-fit: cover;
  margin-top: 2.5rem;
}
.cz-hero-credit {
  order: 4;
  margin: 0.6rem 0 0;
  padding-inline: var(--a-inset);
  text-align: right;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cz-text-muted);
}
/* Photograph-less site: the headline stands alone with room to breathe. */
.cz-hero:not(:has(.cz-hero-image)) { padding-bottom: 1rem; }

/* -------------------------------------------------------------------------
   Page covers, heads, bands
   ------------------------------------------------------------------------- */

.page-cover .cz-page-backdrop {
  display: block;
  width: 100%;
  height: 44vh;
  object-fit: cover;
  border-bottom: var(--a-rule);
}

.page-head { padding-block: 3.75rem 0; }
.page-head:has(.page-title:empty) { display: none; }
.page-title {
  font-family: var(--cz-font-heading);
  font-weight: 400;
  font-size: clamp(2.4rem, 5.5vw, 3.9rem);
  line-height: 1.02;
  letter-spacing: -0.005em;
  text-wrap: balance;
  color: var(--cz-text);
  margin: 0;
}
/* The generated default pages and the custom-page body emit their own h1
   with the same string the layout's page-title slot already shows; one
   visible heading per page, and it is the layout's. */
.cz-page-title { display: none; }

.band { padding-block: 4.25rem; }
.band--head { padding-block: 2.5rem 5rem; }
.band--intro { padding-block: 4.25rem 3.5rem; }
.band--rule { border-top: var(--a-rule); }
.band--siblings { padding-block: 2rem 3rem; border-top: var(--a-rule); }

/* The band label: tracked ultramarine caps, no furniture. */
.eyebrow {
  margin: 0 0 2rem;
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--cz-accent);
}

/* Module section headings: the display face, one notch under the title. */
.cz-heading,
.cz-bio-heading,
.cz-members-heading,
.cz-presskit-heading,
.cz-contact-heading,
.cz-contact-form-heading,
.cz-works-heading,
.cz-article-heading,
.cz-album-title,
.cz-year-heading,
.cz-year-summary {
  font-family: var(--cz-font-heading);
  font-weight: 400;
  letter-spacing: 0.005em;
  color: var(--cz-heading-color);
  text-wrap: balance;
}
.cz-heading, .cz-members-heading, .cz-works-heading { font-size: 1.7rem; }
/* Section headings inside the biography and custom pages: without a size,
   the display face at text size sits *smaller* than the lead style beside
   it and the hierarchy inverts. */
.cz-bio-heading { font-size: 1.45rem; margin: 2.2rem 0 0.8rem; }

.cz-empty, .cz-bio-empty, .cz-members-empty, .cz-contact-empty {
  color: var(--cz-text-muted);
  font-style: italic;
}

.cz-prose { max-width: var(--a-narrow); margin: 0 0 1.1rem; }
.cz-inline-link {
  color: var(--cz-link);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}

/* -------------------------------------------------------------------------
   Home — lede, teaser diary, pull-quote, sleeve row
   ------------------------------------------------------------------------- */

/* The lede: the display face at reading-plus size, the "read more" a plain
   accent link rather than a button. */
.band--intro .cz-bio-short-line {
  font-family: var(--cz-font-heading);
  font-size: clamp(1.35rem, 2.4vw, 1.7rem);
  line-height: 1.45;
  color: var(--cz-text);
}
.cz-bio-more {
  text-decoration: none;
  font-weight: 500;
  border-bottom: 1px solid var(--cz-accent);
}

/* "Full diary" under the teaser — quiet, left-aligned, arrowed. */
.cz-schedule-all a { font-weight: 500; text-decoration: none; }
.cz-schedule-all a::after { content: " \2192"; color: var(--cz-accent); }
.cz-schedule-all a:hover { text-decoration: underline; }

/* The pull-quote band: nothing until an author stars an entry. */
.band--quote { display: none; }
.band--quote:has(.cz-quote) { display: block; padding-block: 5rem; }
.band--quote .cz-press-grid { display: grid; gap: 3rem; }
.band--quote .cz-quote { margin: 0; padding: 0; border: 0; max-width: 56rem; }
.band--quote .cz-quote-text {
  font-family: var(--cz-font-heading);
  font-style: italic;
  font-size: clamp(1.7rem, 3.6vw, 2.7rem);
  line-height: 1.22;
  letter-spacing: 0;
  text-wrap: balance;
  color: var(--cz-accent);
  margin: 0 0 1.1rem;
}
.band--quote .cz-quote-stars { color: var(--cz-accent); }
.band--quote .cz-empty { display: none; }

/* -------------------------------------------------------------------------
   Schedule
   ------------------------------------------------------------------------- */

.cz-event-heading { font-family: var(--cz-font-heading); font-weight: 400; font-size: 1.35rem; line-height: 1.25; }
.cz-event-heading a { text-decoration: none; }
.cz-event-heading a:hover { color: var(--cz-accent); }
.cz-event-date { color: var(--cz-text-muted); }
.cz-event-meta { color: var(--cz-text-muted); }
.cz-event-programme { font-size: 0.95rem; }
.cz-event-note { color: var(--cz-text-muted); }
.cz-event-links a { font-weight: 500; font-size: 0.95rem; }
/* The margin keeps the tag off the struck heading it annotates. */
.cz-event-status { font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.72rem; margin-left: 0.6rem; }
.cz-event-quote { border-left: 2px solid var(--cz-accent); }
.cz-event-quote p { font-family: var(--cz-font-heading); font-style: italic; font-size: 1.1rem; }

/* Past years: the native accordion on hairlines. */
.cz-year { border-top: var(--a-rule); }
.cz-year-summary { cursor: pointer; }
.cz-year-summary::after { color: var(--cz-accent); }

/* -------------------------------------------------------------------------
   Reviews — the archive
   ------------------------------------------------------------------------- */

.cz-quote { border-left: 2px solid var(--cz-line); padding: 0.4rem 0 0.4rem 1.4rem; margin: 0; }
.cz-quote-text {
  font-family: var(--cz-font-heading);
  font-style: italic;
  font-size: 1.35rem;
  line-height: 1.4;
  margin: 0 0 0.6rem;
}
.cz-quote-source { color: var(--cz-text-muted); font-style: normal; font-size: 0.9rem; }
.cz-quote-context, .cz-quote-date { color: var(--cz-text-muted); }
.cz-quote-stars { color: var(--cz-accent); margin-left: 0.5rem; }
.cz-press-grid { display: grid; gap: 2.25rem; }

.cz-article { border-top: var(--a-rule); padding-top: 1.75rem; }
.cz-article-heading { font-size: 1.5rem; }
.cz-article-date, .cz-article-context { color: var(--cz-text-muted); }
.cz-article-lede { font-style: italic; }

/* -------------------------------------------------------------------------
   About — prose beside the portrait
   ------------------------------------------------------------------------- */

.about-grid { display: grid; gap: 2.5rem; }
.about-portrait { margin: 0; }
.about-portrait:empty { display: none; }
.cz-bio-portrait { display: block; width: 100%; height: auto; border-radius: var(--cz-radius); }
@media (min-width: 56rem) {
  .about-grid:has(.about-portrait:not(:empty)) {
    grid-template-columns: minmax(0, 1fr) minmax(16rem, 23rem);
    gap: 4rem;
  }
  .about-portrait { position: sticky; top: 2rem; align-self: start; }
}
.cz-bio-section p { margin: 0 0 1.1rem; }
.cz-bio-section--lead p {
  font-family: var(--cz-font-heading);
  font-size: 1.35rem;
  line-height: 1.45;
}
.cz-role-org { font-weight: 600; }
.cz-role-meta { color: var(--cz-text-muted); }

/* Pads and rules only when a roster exists. */
.members-band { display: none; }
.members-band:has(.cz-members-list) {
  display: block;
  padding-block: 4rem 4.5rem;
  border-top: var(--a-rule);
}
.cz-member-name { font-family: var(--cz-font-heading); font-weight: 400; font-size: 1.3rem; }
.cz-member-instrument { font-size: 0.85rem; }
.cz-member-body p { margin: 0.5rem 0 0; }

/* -------------------------------------------------------------------------
   Recordings
   ------------------------------------------------------------------------- */

.cz-recording-title { font-family: var(--cz-font-heading); font-weight: 400; }
.cz-recording-cover { background: var(--cz-surface); }
.cz-recording-img { border: var(--a-rule); border-radius: var(--cz-radius); }
.cz-recording-credit { color: var(--cz-text-muted); }
.cz-recordings--detailed .cz-recording-title { font-size: 1.6rem; }
.cz-recordings--detailed .cz-recording-cover { align-self: start; }
/* Track-group headings in the quiet voice: Instrument Serif has no 600, so
   left to the heading face they render faux-bold and cramped. */
.cz-track-heading { font-family: var(--cz-font-body); font-size: 0.95rem; font-weight: 600; color: var(--cz-text); }
.cz-recording-accolades { color: var(--cz-accent-deep); }
.cz-recording-quote { border-left: 2px solid var(--cz-accent); }
.cz-recording-quote p { font-family: var(--cz-font-heading); font-style: italic; }
.cz-recording-stars { color: var(--cz-accent); }
.cz-recording-link[data-kind="download"] { font-weight: 500; }

/* -------------------------------------------------------------------------
   News
   ------------------------------------------------------------------------- */

.cz-post-title { font-family: var(--cz-font-heading); font-weight: 400; }
.cz-post-image { border-radius: var(--cz-radius); }
.cz-post-date { color: var(--cz-text-muted); }

/* -------------------------------------------------------------------------
   Photos
   ------------------------------------------------------------------------- */

.cz-photo-img { border-radius: var(--cz-radius); }
.cz-photo-caption, .cz-album-credit { color: var(--cz-text-muted); font-size: 0.9rem; }
.cz-album-title { font-size: 1.5rem; }

/* -------------------------------------------------------------------------
   Videos
   ------------------------------------------------------------------------- */

.cz-video-frame, .cz-video-embed, .cz-video-still, .cz-video-poster { border-radius: var(--cz-radius); }
.cz-video-poster { overflow: hidden; display: block; }
.cz-video-title, .cz-video-caption { font-weight: 500; }

/* -------------------------------------------------------------------------
   Works
   ------------------------------------------------------------------------- */

.cz-works-group { margin-bottom: 2.5rem; }
.cz-work { border-top: var(--a-rule); }
.cz-work-name { font-family: var(--cz-font-heading); font-weight: 400; font-size: 1.25rem; }
.cz-work-summary { cursor: pointer; }
.cz-work-forces, .cz-work-publication, .cz-work-duration { color: var(--cz-text-muted); }
.cz-work-img { border-radius: var(--cz-radius); }
.cz-work-links a[data-kind="download"] { font-weight: 500; }

/* -------------------------------------------------------------------------
   Contact
   ------------------------------------------------------------------------- */

.cz-contact-heading, .cz-contact-form-heading { font-size: 1.5rem; }
.cz-contact-name { font-weight: 600; }
.cz-contact-form { margin-top: 2.5rem; border-top: 2px solid var(--cz-accent); padding-top: 1.75rem; }
.cz-contact-field input,
.cz-contact-field textarea {
  width: 100%;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--cz-line);
  border-radius: var(--cz-radius);
  font: inherit;
  background: #ffffff;
  color: var(--cz-text);
}
.cz-contact-field input:focus-visible,
.cz-contact-field textarea:focus-visible { outline-color: var(--cz-accent); }
.cz-contact-button {
  display: inline-block;
  background: var(--cz-accent);
  color: var(--cz-on-accent);
  font: inherit;
  font-weight: 500;
  letter-spacing: 0.04em;
  padding: 0.7rem 1.6rem;
  border: 0;
  border-radius: var(--cz-radius);
  cursor: pointer;
  text-decoration: none;
}
.cz-contact-button:hover { background: var(--cz-accent-hover); color: var(--cz-on-accent); }

/* -------------------------------------------------------------------------
   Press kit
   ------------------------------------------------------------------------- */

.cz-presskit--line { display: flex; flex-wrap: wrap; gap: 0.5rem 1.75rem; }
.cz-presskit-link { font-weight: 500; text-decoration: none; }
.cz-presskit-link:hover { text-decoration: underline; }
.cz-presskit-affix { color: var(--cz-accent); }

/* -------------------------------------------------------------------------
   Custom pages
   ------------------------------------------------------------------------- */

.cz-page-images {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1.25rem;
  margin: 2.25rem 0;
}
.cz-page-image {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  display: block;
  border-radius: var(--cz-radius);
}
.cz-page-quote { margin: 2.25rem 0; padding-left: 1.5rem; border-left: 2px solid var(--cz-accent); }
.cz-page-quote p {
  font-family: var(--cz-font-heading);
  font-style: italic;
  font-size: 1.5rem;
  line-height: 1.35;
  color: var(--cz-accent);
  margin: 0 0 0.5rem;
}
/* Emphasis inside an italic pull-quote goes upright, as in the modules'
   own quotations. */
.cz-page-quote p em { font-style: normal; }
.cz-page-quote cite {
  font-style: normal;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cz-text-muted);
}
.cz-page-links, .cz-page-downloads {
  list-style: none;
  margin: 1.75rem 0 0;
  padding: 0;
  border-top: var(--a-rule);
}
.cz-page-links li, .cz-page-downloads li { border-bottom: var(--a-rule); }
.cz-page-link, .cz-download {
  display: block;
  padding: 0.8rem 0;
  text-decoration: none;
  color: var(--cz-text);
  font-weight: 500;
}
.cz-page-link:hover, .cz-download:hover { color: var(--cz-accent); }
.cz-download::after { content: " \2193"; color: var(--cz-accent); }

.cz-sibling-nav { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; align-items: baseline; }
.cz-sibling-link, .cz-sibling-current {
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.cz-sibling-link { color: var(--cz-text-muted); text-decoration: none; }
.cz-sibling-link:hover { color: var(--cz-text); }
.cz-sibling-current { color: var(--cz-text); border-bottom: 2px solid var(--cz-accent); }

/* -------------------------------------------------------------------------
   One-page assembly
   ------------------------------------------------------------------------- */

/* scroll-margin is the no-JS fallback for what the engine's one-page script
   stamps inline from --cz-scroll-offset, declared in :root above. */
.a-section { border-top: var(--a-rule); padding-block: 4.25rem; scroll-margin-top: var(--cz-scroll-offset); }
/* One-page assembly (`.a-section` exists on no other document): the quiet
   bar follows the scroll — a menu of anchors is the one navigation the
   reader needs in reach — and the offset grows from breathing room to the
   bar's own height so no band opens under it. */
body:has(.a-section) .topbar { position: sticky; top: 0; z-index: 40; }
body:has(.a-section) { --cz-scroll-offset: 5.5rem; }
.a-section[data-cz-index]:nth-of-type(even) { background: var(--cz-surface); }

/* -------------------------------------------------------------------------
   Footer — a hairline and plenty of air
   ------------------------------------------------------------------------- */

.foot { border-top: var(--a-rule); margin-top: 5rem; padding-block: 3.5rem; }
.foot-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.25rem 2rem;
}
.foot-id { min-width: 0; }
.foot-name { font-family: var(--cz-font-heading); font-weight: 400; font-size: 1.3rem; margin: 0; }
.foot-tagline {
  margin: 0.15rem 0 0;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cz-text-muted);
}
.foot-tagline:empty { display: none; }
.cz-social { display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; list-style: none; margin: 0; padding: 0; }
.cz-social-link {
  color: var(--cz-text-muted);
  text-decoration: none;
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border-bottom: 1px solid transparent;
}
.cz-social-link:hover { color: var(--cz-text); border-bottom-color: var(--cz-accent); }
.foot-credits { flex-basis: 100%; margin: 0; font-size: 0.8rem; color: var(--cz-text-muted); }
.cz-credit-link { color: var(--cz-text); }
.cz-credit-dot { display: inline-block; text-decoration: none; }
.cz-nowrap { white-space: nowrap; }

/* -------------------------------------------------------------------------
   Lightbox (site.js). Display scoped to [open] — a bare display:flex paints
   the closed dialog (quarto's lesson).
   ------------------------------------------------------------------------- */

.a-lightbox[open] {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5vmin;
  background: rgba(16, 18, 23, 0.93);
  border: 0;
}
.a-lightbox img { max-width: 100%; max-height: 90vh; object-fit: contain; }
.a-lightbox-close {
  position: absolute;
  top: 1rem;
  right: 1.25rem;
  background: none;
  border: 0;
  color: #fff;
  font: inherit;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.5rem;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}