/* --- 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); }

/* =========================================================================
   Ricercare — the engraved partbook, rubricated.

   One idea, held to: a seventeenth-century printed music book set with
   modern precision. Bone paper and iron-gall ink; one madder red used the
   way a rubricator used it — dates, imprint lines, the current page, the
   ornament — never as decoration for its own sake. IM Fell English (the
   Fell Types: Oxford's own 17th-century faces, ink-rough at display sizes)
   carries titles and quotes, its separate small-caps family carries the nav,
   eyebrows and dates, and Hanken Grotesk does the contemporary body work —
   old music, living players. Rules are the structure: a scotch rule (thick
   over thin) heads the page and its mirror closes it, hairlines bound the
   nav, and every photograph is a plate — hairline frame, offset second rule.

   Plain CSS, no build step. The :root block is the --cz-* contract — the
   eighteen tokens the shared modules read without a fallback, then the
   per-design hooks they read *with* one. Module stylesheets are concatenated
   ahead of this file, so anything here wins without specificity tricks.
   ========================================================================= */

:root {
  /* --- the contract ---------------------------------------------------- */
  --cz-ground: #f3f0e7;
  --cz-surface: #ece8db;
  --cz-text: #262119;
  --cz-text-muted: #776d5c;
  --cz-accent: #a02c21;
  --cz-accent-hover: #b53c2f;
  --cz-accent-active: #8c2118;
  --cz-accent-bright: #c04636;
  --cz-accent-soft: #e9dcd2;
  --cz-accent-deep: #6f1d14;
  --cz-on-accent: #f7f4ec;
  --cz-on-accent-muted: #eacfc5;
  --cz-link: #9c3527;
  --cz-link-hover: #b8452f;
  --cz-font-heading: "IM Fell English", "Iowan Old Style", Georgia, serif;
  --cz-font-body: "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
  --cz-line: #d3ccba;
  --cz-radius: 0px;

  /* --- hooks: read by the modules with a fallback ----------------------- */
  --cz-heading-color: var(--cz-text);
  --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;
  /* type: a border shorthand, not a colour (the recorded quarto lesson). */
  --cz-contact-rule: 1px solid var(--cz-line);
  --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;
  /* The consort line over the biography, set as the small-caps imprint. */
  --cz-bio-roster-font: var(--r-sc);
  --cz-bio-roster-tracking: 0.14em;
  --cz-bio-roster-transform: none;
  --cz-bio-roster-size: 0.85rem;
  --cz-bio-roster-color: var(--cz-accent);

  /* --- this design's own ------------------------------------------------ */
  --r-ink: #2b251c;
  --r-sc: "IM Fell English SC", "Iowan Old Style", Georgia, serif;
  --r-measure: 70rem;
  --r-narrow: 44rem;
  --r-gutter: 1.5rem;
  --r-hair: 1px solid var(--cz-line);
  --r-ink-rule: 1px solid var(--r-ink);
}

/* -------------------------------------------------------------------------
   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);
  outline-offset: 3px;
}

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

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

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

.cz-event-date, .cz-track-number, .cz-track-duration, .cz-work-year, .cz-date {
  font-variant-numeric: tabular-nums;
}

/* The plate: every photograph printed with a hairline frame and an offset
   second rule. One class-free recipe reused by selector below. */
.cz-photo-img,
.cz-recording-img,
.cz-post-image,
.cz-video-still,
.cz-work-img,
.cz-member-portrait,
.cz-page-image,
.cz-bio-portrait,
.cz-hero-image,
.cz-page-backdrop {
  border: var(--r-ink-rule);
  outline: var(--r-hair);
  outline-offset: 5px;
  background: var(--cz-surface);
}

/* -------------------------------------------------------------------------
   Masthead — the title page's head matter
   ------------------------------------------------------------------------- */

/* The scotch rule: thick over thin, page-wide. */
.mast::before {
  content: "";
  display: block;
  height: 7px;
  border-top: 4px solid var(--r-ink);
  border-bottom: 1px solid var(--r-ink);
}

.mast { position: relative; text-align: center; }

.mast-title { padding-block: 2.1rem 1.4rem; }

.mark {
  display: inline-block;
  text-decoration: none;
  color: inherit;
}
.cz-wordmark {
  font-family: var(--r-sc);
  font-weight: 400;
  font-size: clamp(1.6rem, 4.5vw, 2.5rem);
  line-height: 1.1;
  letter-spacing: 0.08em;
  color: var(--r-ink);
}
.cz-logo { display: block; margin-inline: auto; }
.cz-logo--wide { width: auto; max-height: 3.4rem; }
.cz-logo--square { height: 3.4rem; width: auto; }
/* A real logo image is never framed as a plate — it is a mark, not a photograph. */
.mark .cz-logo { border: 0; outline: 0; background: none; }

/* The imprint line: the site's own description of itself, in red. */
.mast-imprint {
  margin: 0.5rem 0 0;
  font-family: var(--r-sc);
  font-size: 0.92rem;
  letter-spacing: 0.28em;
  color: var(--cz-accent);
}
.mast-imprint:empty { display: none; }

/* The nav: one ruled line of contents, centred. */
.nav {
  border-block: var(--r-hair);
  padding-block: 0.55rem;
}
.nav > .cz-nav-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 0.3rem 0;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav > .cz-nav-list > li { display: inline-flex; align-items: baseline; }
/* The middots between entries are rubricated, like a colophon's separators. */
.nav > .cz-nav-list > li + li::before {
  content: "\00B7";
  color: var(--cz-accent);
  margin-inline: 0.9rem;
}
.cz-nav-link {
  display: inline-block;
  text-decoration: none;
  font-family: var(--r-sc);
  font-size: 0.98rem;
  letter-spacing: 0.06em;
  color: var(--r-ink);
  padding-block: 0.15rem;
}
.cz-nav-link:hover { color: var(--cz-accent-hover); }
/* The current page is the red-letter entry — colour, not an underline. */
.cz-nav-link--current { color: var(--cz-accent); }

/* A group reads inline: its heading, then its members, run on smaller —
   a line of contents within the line of contents. No pointer-only
   dropdowns; everything is visible and in the tab order. */
.cz-nav-group { display: inline-flex; align-items: baseline; gap: 0.55rem; }
.cz-nav-heading {
  font-family: var(--r-sc);
  font-size: 0.98rem;
  letter-spacing: 0.06em;
  color: var(--cz-text-muted);
}
/* The colon keeps "Projects" from reading as part of its first member. */
.cz-nav-heading::after { content: ":"; }
.cz-nav-group .cz-nav-list {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.3rem 0;
  list-style: none;
  margin: 0;
  padding: 0;
}
.cz-nav-group .cz-nav-list > li { display: inline-flex; align-items: baseline; }
.cz-nav-group .cz-nav-list > li + li::before {
  content: "\00B7";
  color: var(--cz-line);
  margin-inline: 0.45rem;
}
.cz-nav-group .cz-nav-link { font-size: 0.9rem; }

.nav-toggle {
  display: none;
  position: absolute;
  top: 1.1rem;
  right: var(--r-gutter);
  background: none;
  border: var(--r-hair);
  border-radius: var(--cz-radius);
  color: var(--r-ink);
  font-family: var(--r-sc);
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  padding: 0.4rem 0.75rem;
  cursor: pointer;
}

@media (max-width: 56rem) {
  /* Room for the absolute Menu button on both sides, so the centred
     wordmark can never slide under it. */
  .mast-title { padding-block: 1.6rem 1.1rem; padding-inline: 4.25rem; }
  .cz-wordmark { font-size: clamp(1.3rem, 5.5vw, 2.5rem); }
  .nav-toggle { display: inline-block; }
  .nav { display: none; }
  /* No open/close animation, on purpose (the recorded height-animation
     lesson). The open sheet is capped and scrolls, so every item is
     reachable at every width. */
  .nav.is-open {
    display: block;
    max-height: 70vh;
    overflow-y: auto;
    background: var(--cz-ground);
  }
  .nav > .cz-nav-list {
    flex-direction: column;
    align-items: center;
    gap: 0.55rem;
    padding-block: 0.9rem;
  }
  .nav > .cz-nav-list > li + li::before { content: none; }
  .cz-nav-group { flex-direction: column; align-items: center; gap: 0.25rem; }
}

/* -------------------------------------------------------------------------
   Hero — the title opening
   ------------------------------------------------------------------------- */

.band--hero { padding-block: 3rem 1rem; }

.cz-hero {
  display: grid;
  gap: 1.1rem;
  justify-items: center;
  align-content: center;
  text-align: center;
  padding-block: 1.5rem;
}
/* The rule above the title is a grid item, so it spans the title column. */
.cz-hero::before {
  content: "";
  justify-self: stretch;
  height: 7px;
  border-top: 4px solid var(--r-ink);
  border-bottom: 1px solid var(--r-ink);
  margin-bottom: 1rem;
}
.cz-hero-name {
  margin: 0;
  font-family: var(--cz-font-heading);
  font-weight: 400;
  font-size: clamp(2.5rem, 7vw, 4.6rem);
  line-height: 1.05;
  letter-spacing: 0.01em;
  text-wrap: balance;
  color: var(--r-ink);
}
.cz-hero-tagline {
  margin: 0.3rem 0 0;
  font-family: var(--r-sc);
  font-size: clamp(0.9rem, 1.6vw, 1.05rem);
  letter-spacing: 0.3em;
  color: var(--cz-accent);
}
.cz-hero-credit {
  margin: 1.1rem 0 0;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cz-text-muted);
}
.cz-hero-image {
  display: block;
  width: min(100%, 30rem);
  height: auto;
  margin-bottom: 1.25rem;
}
/* With a photograph, the opening becomes a spread: title block left under
   its rule, the plate right at its own aspect — the portrait masters this
   design expects are shown whole, never viewport-cropped. */
@media (min-width: 56rem) {
  .cz-hero:has(.cz-hero-image) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 38%);
    /* The 1fr row soaks up the plate's height, so the rule, name and
       tagline stay set together and the credit sits at the plate's foot. */
    grid-template-rows: auto auto auto 1fr;
    column-gap: 4rem;
    justify-items: start;
    text-align: left;
    padding-block: 2.5rem;
  }
  .cz-hero:has(.cz-hero-image)::before { grid-column: 1; }
  .cz-hero:has(.cz-hero-image) .cz-hero-image {
    grid-column: 2;
    grid-row: 1 / span 4;
    align-self: center;
    width: 100%;
    margin: 0;
  }
  .cz-hero:has(.cz-hero-image) .cz-hero-credit { align-self: end; }
}

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

/* Per-page art direction as a printed plate in the measure, not a bleed. */
.page-cover { margin-top: 2.75rem; }
.page-cover:not(:has(.cz-page-backdrop)) { display: none; }
.page-cover .cz-page-backdrop {
  display: block;
  width: 100%;
  height: min(52vh, 30rem);
  object-fit: cover;
}

.page-head { padding-block: 3.5rem 0; text-align: center; }
.page-head:has(.page-title:empty) { display: none; }
/* `.cz-page-title` too: the custom-page body and any generated default page
   emit their own h1, and it wears the same centred head as the page files'
   `page-title` slot — one voice for every page's name, whoever printed it. */
.page-title, .cz-page-title {
  margin: 0;
  font-family: var(--cz-font-heading);
  font-weight: 400;
  font-size: clamp(2.1rem, 5vw, 3.3rem);
  line-height: 1.08;
  letter-spacing: 0.01em;
  text-wrap: balance;
  text-align: center;
  color: var(--r-ink);
}
/* The rubricator's lozenge under every page title. */
.page-title:not(:empty)::after, .cz-page-title::after {
  content: "";
  display: block;
  width: 0.5rem;
  height: 0.5rem;
  margin: 1.35rem auto 0;
  background: var(--cz-accent);
  transform: rotate(45deg);
}
.cz-page-title { margin-bottom: 2.25rem; }

.band { padding-block: 4rem; }
.band--head { padding-block: 2.5rem 4.5rem; }
.band--intro { padding-block: 3.5rem; }
.band--surface { background: var(--cz-surface); border-block: var(--r-hair); }
.band--surface + .band--surface { border-top: 0; }
.band--siblings { padding-block: 2rem 3rem; }

/* The home pull-quote and record bands cost nothing until they have
   something to show. */
.band--pull { display: none; }
.band--pull:has(.cz-quote) { display: block; }
.band--records { display: none; }
.band--records:has(.cz-recording) { display: block; }

/* Band labels: small caps behind a red pilcrow — the rubricator's mark. */
.eyebrow {
  margin: 0 0 2.25rem;
  text-align: center;
  font-family: var(--r-sc);
  font-size: 1.02rem;
  letter-spacing: 0.22em;
  color: var(--r-ink);
}
.eyebrow::before {
  content: "\00B6\2002";
  color: var(--cz-accent);
  font-family: var(--cz-font-heading);
  letter-spacing: 0;
}

/* Module section headings: the Fell face, one notch under the page title. */
.cz-heading,
.cz-bio-heading,
.cz-members-heading,
.cz-presskit-heading,
.cz-contact-form-heading,
.cz-works-heading,
.cz-album-title,
.cz-year-heading {
  font-family: var(--cz-font-heading);
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--r-ink);
}

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

/* margin-block, not the shorthand: the shorthand's zero inline margins
   would defeat .shell--measure's margin-inline auto centring. */
.cz-prose { margin-block: 0 1.1rem; }
.cz-inline-link {
  color: var(--cz-link);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}

/* -------------------------------------------------------------------------
   Schedule — red-letter days
   ------------------------------------------------------------------------- */

.cz-event-date {
  font-family: var(--r-sc);
  color: var(--cz-accent);
  letter-spacing: 0.04em;
}
.cz-event-heading { font-family: var(--cz-font-heading); font-weight: 400; }
/* A linked heading keeps the ink and wears a hairline underline. */
.cz-event-heading a {
  color: inherit;
  text-decoration-color: var(--cz-line);
  text-underline-offset: 0.2em;
}
.cz-event-heading a:hover {
  color: var(--cz-accent-hover);
  text-decoration-color: currentColor;
}
.cz-year-summary { font-family: var(--r-sc); letter-spacing: 0.08em; }
.cz-schedule-all { font-family: var(--r-sc); letter-spacing: 0.06em; }

/* -------------------------------------------------------------------------
   Press — the notices
   ------------------------------------------------------------------------- */

.cz-quote-text p,
.cz-press blockquote p {
  font-family: var(--cz-font-heading);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.3rem, 2.4vw, 1.7rem);
  line-height: 1.42;
  color: var(--r-ink);
}
.cz-quote-source, .cz-article-context {
  font-family: var(--r-sc);
  letter-spacing: 0.08em;
}
.cz-article-heading { font-family: var(--cz-font-heading); font-weight: 400; }
.cz-article-lede p { font-family: var(--cz-font-heading); font-style: italic; }

/* The home pull: one big rubricated notice, centred. */
.band--pull .cz-quote { text-align: center; }
.band--pull .cz-quote-text p {
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  line-height: 1.4;
}

/* -------------------------------------------------------------------------
   Recordings, videos, works, news, gallery
   ------------------------------------------------------------------------- */

/* The module paints the cover cell --cz-surface; in the detailed rows that
   cell is grid-stretched, so the wash would run far below the plate. */
.cz-recording-cover { background: transparent; }

.cz-recording-title, .cz-video-title, .cz-post-title, .cz-work-name {
  font-family: var(--cz-font-heading);
  font-weight: 400;
}
.cz-recording-credit, .cz-work-year, .cz-work-forces {
  color: var(--cz-text-muted);
}
.cz-track-heading { font-family: var(--r-sc); letter-spacing: 0.06em; }
.cz-accolade { font-family: var(--r-sc); color: var(--cz-accent); letter-spacing: 0.05em; }
.cz-post-date, .cz-quote-date, .cz-article-date { font-family: var(--r-sc); color: var(--cz-accent); }

.cz-work-summary { font-family: var(--cz-font-heading); }
.cz-works--list details > summary::marker { color: var(--cz-accent); }
.cz-work-chip { font-family: var(--r-sc); }

.cz-photo-caption, .cz-album-credit, .cz-video-caption {
  color: var(--cz-text-muted);
  font-size: 0.85rem;
}

/* -------------------------------------------------------------------------
   About, members, contact, press kit
   ------------------------------------------------------------------------- */

.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; }
@media (min-width: 56rem) {
  .about-grid:has(.about-portrait:not(:empty)) {
    grid-template-columns: minmax(0, 1fr) minmax(15rem, 21rem);
    gap: 4rem;
  }
  .about-portrait { position: sticky; top: 2rem; align-self: start; }
}

/* The members band collapses when the site has no roster. */
.members-band { display: none; }
.members-band:has(.cz-members-list) { display: block; }
.cz-member-name { font-family: var(--cz-font-heading); font-weight: 400; }
.cz-member-instrument { font-family: var(--r-sc); letter-spacing: 0.06em; }

.cz-role-org { font-family: var(--cz-font-heading); font-weight: 400; }
.cz-role-meta { font-family: var(--r-sc); color: var(--cz-accent); }

.cz-contact-heading { font-family: var(--cz-font-heading); font-weight: 400; }
.cz-contact-button {
  background: var(--cz-accent);
  color: var(--cz-on-accent);
  border: 0;
  border-radius: var(--cz-radius);
  font-family: var(--r-sc);
  font-size: 1rem;
  letter-spacing: 0.1em;
  padding: 0.65rem 1.6rem;
  cursor: pointer;
}
.cz-contact-button:hover { background: var(--cz-accent-hover); }

.cz-presskit-link { font-family: var(--r-sc); letter-spacing: 0.05em; }
.cz-presskit-affix { color: var(--cz-accent); }

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

.cz-page-images {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.5rem;
  margin: 2.5rem 0;
}
.cz-page-image {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  display: block;
}
.cz-page-quote { margin: 2.5rem 0; text-align: center; }
.cz-page-quote p {
  font-family: var(--cz-font-heading);
  font-style: italic;
  font-size: clamp(1.3rem, 2.4vw, 1.6rem);
  line-height: 1.42;
  margin: 0 0 0.6rem;
  color: var(--r-ink);
}
/* 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-family: var(--r-sc);
  font-size: 0.88rem;
  letter-spacing: 0.14em;
  color: var(--cz-accent);
}
.cz-page-links, .cz-page-downloads {
  list-style: none;
  margin: 1.75rem 0 0;
  padding: 0;
  border-top: var(--r-hair);
}
.cz-page-links li, .cz-page-downloads li { border-bottom: var(--r-hair); }
.cz-page-link, .cz-download {
  display: block;
  padding: 0.8rem 0;
  text-decoration: none;
  color: var(--cz-text);
  font-family: var(--r-sc);
  letter-spacing: 0.04em;
}
.cz-page-link:hover, .cz-download:hover { color: var(--cz-accent-hover); }
.cz-download::after { content: " \2193"; color: var(--cz-accent); }

.cz-sibling-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 0;
  align-items: baseline;
  border-top: var(--r-hair);
  padding-top: 1.5rem;
}
.cz-sibling-link, .cz-sibling-current {
  font-family: var(--r-sc);
  font-size: 0.92rem;
  letter-spacing: 0.06em;
}
.cz-sibling-nav > * + *::before {
  content: "\00B7";
  color: var(--cz-accent);
  margin-inline: 0.8rem;
}
.cz-sibling-link { color: var(--cz-text-muted); text-decoration: none; }
.cz-sibling-link:hover { color: var(--r-ink); }
.cz-sibling-current { color: var(--cz-accent); }

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

.r-band { border-top: var(--r-hair); padding-block: 4rem; }
.r-band[data-cz-index]:nth-of-type(even) { background: var(--cz-surface); }

/* One-page assembly (`.r-band` exists on no other document): the ruled line
   of contents becomes a running head — pinned, over the page ground — and
   the mast's title plate steps aside, because the hero directly below it is
   the title opening and set larger. A sticky child can't outlive its parent,
   so it is the whole mast that pins, reduced to the line. Bands clear the
   running head through the engine's `--cz-scroll-offset` hook. */
body:has(.r-band) .mast {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--cz-ground);
}
body:has(.r-band) .mast-title { display: none; }
body:has(.r-band) { --cz-scroll-offset: 3.4rem; }
@media (max-width: 56rem) {
  /* Here the contents line lives behind the Menu button; the pinned mast
     collapses to nothing but the button, which needs its own ground to
     float over passing text. The open sheet stays in the mast's flow, so it
     unrolls from the pinned top and scrolls inside itself as before. */
  body:has(.r-band) .nav-toggle { background: var(--cz-ground); }
  body:has(.r-band) { --cz-scroll-offset: 1rem; }
}

/* -------------------------------------------------------------------------
   Footer — the colophon
   ------------------------------------------------------------------------- */

.foot { margin-top: 5rem; }
/* The mirrored scotch rule: thin over thick, closing the page. */
.foot::before {
  content: "";
  display: block;
  height: 7px;
  border-top: 1px solid var(--r-ink);
  border-bottom: 4px solid var(--r-ink);
}
.foot-inner {
  padding-block: 2.75rem 3rem;
  text-align: center;
}
/* The lozenge again, opening the colophon. */
.foot-inner::before {
  content: "";
  display: block;
  width: 0.5rem;
  height: 0.5rem;
  margin: 0 auto 1.5rem;
  background: var(--cz-accent);
  transform: rotate(45deg);
}
.foot-name {
  margin: 0 0 1rem;
  font-family: var(--r-sc);
  font-size: 1.15rem;
  letter-spacing: 0.12em;
  color: var(--r-ink);
}
.foot-social { margin-bottom: 1rem; }
.foot-social:empty { display: none; }
.cz-social {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem 1.6rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.cz-social-link {
  color: var(--cz-text-muted);
  text-decoration: none;
  font-family: var(--r-sc);
  font-size: 0.92rem;
  letter-spacing: 0.08em;
}
.cz-social-link:hover { color: var(--cz-accent-hover); }
.foot-credits {
  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 is scoped to [open] — a bare display:flex would override the UA's
   dialog:not([open]) rule and paint the closed dialog (the recorded lesson). */
.r-lightbox[open] {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5vmin;
  background: rgba(24, 20, 14, 0.93);
  border: 0;
}
.r-lightbox img {
  max-width: 100%;
  max-height: 90vh;
  object-fit: contain;
}
.r-lightbox-close {
  position: absolute;
  top: 1rem;
  right: 1.25rem;
  background: none;
  border: 0;
  color: #fff;
  font: inherit;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.5rem;
}

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