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

/* =========================================================================
   Tremolo — the gig poster on the venue door.

   Ink-black ground, bone type, one hot orange. Anton carries the display
   voice (condensed, uppercase, set tight — a flyer stapled to a telephone
   pole), Inter does the reading, and JetBrains Mono is the eyebrow: the
   little tracked-out labels, dates, years and chips that give the page its
   backstage-pass texture. Bands alternate between ink and a barely lifted
   ink-2 behind hairlines; photographs get a hairline frame and stay lit like
   a stage.

   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: #0b0908;
  --cz-surface: #151210;
  --cz-text: #ede7d8;
  --cz-text-muted: #b9b2a0;
  --cz-accent: #d6401e;
  --cz-accent-hover: #ef5127;
  --cz-accent-active: #a8341a;
  --cz-accent-bright: #ff7a4a;
  --cz-accent-soft: #2a1410;
  --cz-accent-deep: #7a2410;
  --cz-on-accent: #0b0908;
  --cz-on-accent-muted: #3d1408;
  --cz-link: #ede7d8;
  --cz-link-hover: #ef5127;
  --cz-font-heading: "Anton", "Impact", "Arial Narrow", sans-serif;
  --cz-font-body: "Inter", ui-sans-serif, system-ui, sans-serif;
  --cz-line: #2b2620;
  --cz-radius: 2px;

  /* --- hooks: read by the modules with a fallback ----------------------- */
  --cz-heading-color: var(--cz-text);
  /* Chips are the source's green "FULL-LENGTH" tags: green on a green tint. */
  --cz-chip-bg: #1a2412;
  --cz-chip-fg: #8fbf3f;
  /* 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-accent);
  --cz-member-instrument-display: block;
  --cz-bio-roster-font: var(--t-mono);
  --cz-bio-roster-tracking: 0.2em;
  --cz-bio-roster-transform: uppercase;
  --cz-bio-roster-size: 0.7rem;
  --cz-bio-roster-color: var(--cz-accent);

  /* --- this design's own ------------------------------------------------ */
  --t-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --t-measure: 73.75rem;
  --t-narrow: 46rem;
  --t-gutter: 1.5rem;
  --t-rule: 1px solid var(--cz-line);
  --t-green: #8fbf3f;
  /* One inline geometry for the hero and the shell, so type over the
     photograph lines up with type on the page. */
  --t-inset: max(var(--t-gutter), calc((100vw - var(--t-measure)) / 2));
  --t-bar-height: 4rem;
  /* The engine's one-page hook: every anchored band takes this as its scroll
     margin, so a band never opens under the sticky bar. Taller than
     --t-bar-height (a min-height): with a full page set the bar's nav wraps
     to a second row and the true bar runs ~5.5rem. */
  --cz-scroll-offset: 5.75rem;
}
/* Below the menu breakpoint the nav collapses behind the toggle and the bar
   is one row again. */
@media (max-width: 56rem) {
  :root { --cz-scroll-offset: 4.25rem; }
}

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

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

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

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

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;
  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(--t-measure);
  margin-inline: auto;
  padding-inline: var(--t-gutter);
}
/* Cap the children, not the container — a capped container re-centres and
   the page title drifts off the text's left edge (quarto's lesson). */
.shell--narrow > * { max-width: var(--t-narrow); }

/* Everything numeric on the site is set in the mono: dates, years, track
   numbers, durations — the backstage-pass texture. */
.cz-event-date, .cz-track-number, .cz-track-duration, .cz-work-year, .cz-date,
.cz-post-date, .cz-quote-date, .cz-article-date, .cz-role-meta, .cz-year-heading,
.cz-recording-credit, .cz-event-chip, .cz-post-chip, .cz-work-chip, .cz-accolade,
.cz-photo-caption, .cz-album-credit, .cz-work-meta {
  font-family: var(--t-mono);
  font-variant-numeric: tabular-nums;
}

/* -------------------------------------------------------------------------
   Masthead — sticky, translucent, blurred over whatever scrolls under it
   ------------------------------------------------------------------------- */

.bar {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(11, 9, 8, 0.88);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: var(--t-rule);
}
.bar-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  min-height: var(--t-bar-height);
  padding-block: 0.75rem;
}

.mark { text-decoration: none; color: inherit; display: inline-flex; align-items: center; }
/* The wordmark: the name in the display face with the design's orange full
   stop after it — the source's STRIKE<span>.</span>MACVAY. A logo file
   replaces the lot. */
.cz-wordmark {
  font-family: var(--cz-font-heading);
  font-weight: 400;
  font-size: 1.375rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cz-text);
  white-space: nowrap;
  line-height: 1;
}
.cz-wordmark::after { content: "."; color: var(--cz-accent); }
.cz-logo { display: block; }
.cz-logo--wide { width: auto; max-height: 2.25rem; }
.cz-logo--square { height: 2.25rem; width: auto; }

/* Nav: tracked caps at three-quarter opacity, orange on hover, the current
   page underlined; the last top-level item is the filled call-to-action. */
.cz-nav-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 1.35rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.cz-nav-link {
  display: inline-block;
  text-decoration: none;
  color: var(--cz-text);
  opacity: 0.75;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding-block: 0.25rem;
  border-bottom: 2px solid transparent;
  transition: opacity 0.2s, color 0.2s;
}
.cz-nav-link:hover { opacity: 1; color: var(--cz-accent); }
.cz-nav-link--current { opacity: 1; border-bottom-color: var(--cz-accent); }

.nav > .cz-nav-list > .cz-nav-item:last-child > .cz-nav-link {
  opacity: 1;
  background: var(--cz-accent);
  color: var(--cz-on-accent);
  font-weight: 800;
  padding: 0.55rem 1rem;
  border-radius: var(--cz-radius);
  border-bottom: 0;
  transition: transform 0.15s, background 0.15s;
}
.nav > .cz-nav-list > .cz-nav-item:last-child > .cz-nav-link:hover {
  background: var(--cz-accent-hover);
  transform: translateY(-1px);
}
.nav > .cz-nav-list > .cz-nav-item:last-child > .cz-nav-link--current {
  background: var(--cz-accent-active);
}

/* A group: heading in the row, members on a line beneath — no pointer-only
   dropdowns. Top-aligned so the second line doesn't drag siblings down. */
.cz-nav-group { display: flex; flex-direction: column; gap: 0.15rem; align-self: flex-start; }
.cz-nav-heading {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cz-text);
  opacity: 0.75;
  padding-block: 0.25rem;
}
.cz-nav-group--current .cz-nav-heading { opacity: 1; }
.cz-nav-group .cz-nav-list { gap: 0.15rem 0.9rem; }
.cz-nav-group .cz-nav-link {
  font-family: var(--t-mono);
  letter-spacing: 0.04em;
  text-transform: none;
  font-weight: 400;
  font-size: 0.75rem;
}

/* The three-bar toggle, drawn in CSS so the icon inherits the bone. */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0.5rem;
  background: none;
  border: var(--t-rule);
  border-radius: var(--cz-radius);
  cursor: pointer;
}
.nav-toggle-bar { display: block; height: 2px; background: var(--cz-text); }
.nav-toggle[aria-expanded="true"] { border-color: var(--cz-accent); }

@media (max-width: 56rem) {
  .nav-toggle { display: flex; }
  .nav { display: none; flex-basis: 100%; }
  .nav.is-open { display: block; }
  .cz-nav-list { flex-direction: column; align-items: stretch; gap: 0.15rem; padding-block: 0.75rem 1rem; }
  .cz-nav-link { display: block; padding-block: 0.6rem; border-bottom: var(--t-rule); }
  .cz-nav-group { align-self: stretch; }
  .cz-nav-group .cz-nav-list { padding: 0 0 0.25rem 1rem; }
  .nav > .cz-nav-list > .cz-nav-item:last-child { margin-top: 0.75rem; }
  .nav > .cz-nav-list > .cz-nav-item:last-child > .cz-nav-link { text-align: center; }
}

/* The nav is a flex item beside the brand; without a shrink allowance it
   takes its intrinsic single-line width and the list inside never wraps —
   it just runs off the page at laptop widths. */
.bar-row .nav { flex: 1 1 12rem; min-width: 0; }
.bar-row .cz-nav-list { justify-content: flex-end; }
@media (max-width: 56rem) {
  .bar-row .cz-nav-list { justify-content: flex-start; }
}

/* -------------------------------------------------------------------------
   Hero — the viewport is the poster
   ------------------------------------------------------------------------- */

.cz-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  min-height: 34vh;
  padding: 5rem var(--t-inset) 3.5rem;
  background: #000;
  overflow: hidden;
}
.cz-hero:has(.cz-hero-image) { min-height: calc(92svh - var(--t-bar-height)); }
/* The photograph sits back — contrast up, opacity down — so the name reads
   over any patch of it; the source did exactly this. */
.cz-hero-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  filter: contrast(1.08) saturate(1.05);
  opacity: 0.7;
}
/* The scrim: dark into the ground at the foot, a lean from the left. */
.cz-hero:has(.cz-hero-image)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(0deg, var(--cz-ground) 4%, rgba(11, 9, 8, 0.25) 42%, rgba(11, 9, 8, 0.55) 100%),
    linear-gradient(100deg, rgba(11, 9, 8, 0.85) 0%, rgba(11, 9, 8, 0.15) 55%);
}
.cz-hero-name {
  position: relative;
  z-index: 2;
  order: 2;
  font-family: var(--cz-font-heading);
  font-weight: 400;
  font-size: clamp(3.25rem, 10vw, 8rem);
  line-height: 0.92;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--cz-text);
  margin: 0;
}
/* The tagline is the eyebrow — mono, orange, a short rule before it — and
   rides above the name (order 1), where the source puts it. */
.cz-hero-tagline {
  position: relative;
  z-index: 2;
  order: 1;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin: 0 0 0.9rem;
  font-family: var(--t-mono);
  font-size: 0.75rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--cz-accent);
}
.cz-hero-tagline::before { content: ""; width: 1.4rem; height: 2px; background: var(--cz-accent); flex: none; }
.cz-hero-credit {
  position: absolute;
  right: var(--t-gutter);
  bottom: 0.9rem;
  z-index: 2;
  margin: 0;
  font-family: var(--t-mono);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cz-text-muted);
}

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

/* The per-page art direction: a full-bleed cover under the bar, scrimmed
   into the ground so the page title reads as printed over its foot. */
.page-cover { position: relative; }
.page-cover .cz-page-backdrop {
  display: block;
  width: 100%;
  height: 44vh;
  object-fit: cover;
  filter: contrast(1.08) saturate(1.05);
  opacity: 0.7;
}
.page-cover:has(.cz-page-backdrop)::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--cz-ground) 0%, rgba(11, 9, 8, 0.25) 45%, rgba(11, 9, 8, 0) 75%);
}
.page-cover:has(.cz-page-backdrop) + .main .page-head { padding-top: 1rem; }

.page-head { padding-block: 4.5rem 0; }
.page-title, .cz-page-title {
  font-family: var(--cz-font-heading);
  font-weight: 400;
  font-size: clamp(2.125rem, 4.5vw, 3.5rem);
  line-height: 0.95;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--cz-text);
  margin: 0 0 1.5rem;
}

.band { padding-block: 5rem; }
.band--head { padding-block: 1.75rem 5.5rem; }
.band--intro { padding-block: 4.5rem 3.5rem; }
.band--surface { background: var(--cz-surface); border-block: var(--t-rule); }
.band--siblings { padding-block: 2rem; border-top: var(--t-rule); }

/* Adjacent surface bands would double their rules. */
.band--surface + .band--surface { border-top: 0; }

/* The band label: mono caps behind a short orange dash. */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin: 0 0 0.9rem;
  font-family: var(--t-mono);
  font-size: 0.75rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--cz-accent);
}
.eyebrow::before {
  content: "";
  flex: none;
  width: 1.4rem;
  height: 2px;
  background: var(--cz-accent);
}
.band > .shell > .eyebrow { margin-bottom: 2rem; }

/* Module section headings: the display face, uppercase, one notch under
   the page title. */
.cz-heading {
  font-family: var(--cz-font-heading);
  font-weight: 400;
  font-size: 1.75rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--cz-text);
}
.cz-year-heading {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--cz-accent);
}

.cz-empty { color: var(--cz-text-muted); font-family: var(--t-mono); font-size: 0.85rem; }

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

/* Photographs on the page get the source's hairline frame. */
.cz-photo-img, .cz-post-image img, .cz-page-image, .cz-work-img, .cz-video-still,
.cz-bio-portrait, .cz-member-portrait img {
  border: var(--t-rule);
}

/* -------------------------------------------------------------------------
   About — portrait with an orange frame set behind it, prose beside
   ------------------------------------------------------------------------- */

.about-grid { display: grid; gap: 2.5rem; align-items: start; }
.about-portrait { position: relative; margin: 0; }
.about-portrait:empty { display: none; }
.about-portrait:not(:empty)::before {
  content: "";
  position: absolute;
  inset: 0.875rem -0.875rem -0.875rem 0.875rem;
  border: 2px solid var(--cz-accent);
  z-index: 0;
}
.cz-bio-portrait {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  filter: grayscale(0.15) contrast(1.05);
}
@media (min-width: 56rem) {
  .about-grid:has(.about-portrait:not(:empty)) {
    grid-template-columns: minmax(16rem, 0.85fr) minmax(0, 1.15fr);
    gap: 4rem;
  }
  .about-portrait { position: sticky; top: calc(var(--t-bar-height) + 2rem); }
}

.cz-bio p, .cz-bio-section p { color: var(--cz-text-muted); }
.cz-bio-section p strong { color: var(--cz-text); }
.cz-bio-section--lead p { color: var(--cz-text); font-size: 1.125rem; }
.cz-bio-heading, .cz-roles-heading, .cz-members-heading {
  font-family: var(--t-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cz-accent);
}
/* The highlighted run boxes off like the source's facts strip: a rule above,
   a lifted panel behind. */
.cz-bio-section--panel {
  background: rgba(255, 255, 255, 0.02);
  border: var(--t-rule);
  border-radius: var(--cz-radius);
  padding: 1.5rem 1.5rem 0.75rem;
}

/* Roles as the source's Reaper timeline: a rule down the left, an orange
   dot per chapter, the years in orange mono. */
.cz-roles--steps { border-left: 2px solid var(--cz-line); padding-left: 1.5rem; }
.cz-roles--steps .cz-role { position: relative; gap: 0; }
.cz-roles--steps .cz-role::before {
  content: "";
  position: absolute;
  left: calc(-1.5rem - 6px);
  top: 0.45rem;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--cz-accent);
}
.cz-roles--steps .cz-role-step { display: none; }
.cz-role-meta { color: var(--cz-accent); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.06em; }
.cz-role-org { font-family: var(--cz-font-body); font-weight: 700; }
.cz-role-body p { color: var(--cz-text-muted); font-size: 0.95rem; }

.members-band:has(.cz-members-list) {
  margin-top: 1.5rem;
  padding-block: 4rem 4.5rem;
  border-top: var(--t-rule);
}
.cz-members--cards .cz-member {
  background: rgba(255, 255, 255, 0.02);
  border: var(--t-rule);
}
.cz-member-instrument {
  font-family: var(--t-mono);
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

/* -------------------------------------------------------------------------
   Schedule — the source's booking-panel texture: mono dates, hairline rows
   ------------------------------------------------------------------------- */

.cz-schedule--list .cz-event { padding: 1.35rem 0; }
.cz-schedule--list .cz-event:hover { background: rgba(214, 64, 30, 0.04); }
.cz-event-date { color: var(--cz-accent); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.06em; }
.cz-event-heading { font-family: var(--cz-font-body); font-weight: 700; font-size: 1.0625rem; }
.cz-event-meta, .cz-event-note { color: var(--cz-text-muted); font-size: 0.9375rem; }
.cz-event-programme { color: var(--cz-text-muted); font-size: 0.9375rem; }
.cz-event-links a {
  font-family: var(--t-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cz-accent);
  text-decoration: none;
  border-bottom: 1px solid var(--cz-accent);
}
.cz-event-links a:hover { color: var(--cz-accent-hover); }
.cz-schedule-all { font-family: var(--t-mono); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; }
.cz-schedule-all a { color: var(--cz-accent); }
.cz-past-header, .cz-past-heading { font-family: var(--t-mono); letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.8rem; }

/* -------------------------------------------------------------------------
   Recordings — the discography table: number, title, tag, year
   ------------------------------------------------------------------------- */

.cz-recording-title { font-family: var(--cz-font-body); font-weight: 700; }
.cz-recordings--detailed .cz-recording-title { font-size: 1.25rem; }
.cz-recordings--detailed .cz-recording { padding: 1.75rem 0; }
.cz-recordings--detailed .cz-recording:hover { background: rgba(214, 64, 30, 0.04); }
@media (min-width: 48rem) {
  .cz-recordings--detailed .cz-recording { grid-template-columns: 11rem 1fr; gap: 2rem; }
}
.cz-recording-cover { border: var(--t-rule); align-self: start; }
.cz-recording-links, .cz-work-links, .cz-event-links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; }
.cz-recording-links a, .cz-work-links a, .cz-event-links a { white-space: normal; }
.cz-recording-credit { font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; }
.cz-recording-blurb { color: var(--cz-text-muted); font-size: 0.95rem; }
.cz-recording-tracks { font-family: var(--t-mono); font-size: 0.8rem; }
.cz-track-heading { font-family: var(--t-mono); color: var(--cz-accent); font-size: 0.7rem; letter-spacing: 0.15em; text-transform: uppercase; }
.cz-recording-links a, .cz-work-links a {
  font-family: var(--t-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cz-accent);
  text-decoration: none;
  border-bottom: 1px solid var(--cz-accent);
}
.cz-recording-links a:hover, .cz-work-links a:hover { color: var(--cz-accent-hover); }
.cz-accolade {
  display: inline-block;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--t-green);
  border: 1px solid rgba(143, 191, 63, 0.4);
  padding: 0.2rem 0.6rem;
  border-radius: var(--cz-radius);
}

/* -------------------------------------------------------------------------
   Videos — bordered cards, orange play disc
   ------------------------------------------------------------------------- */

.cz-video-frame { background: rgba(255, 255, 255, 0.02); border: var(--t-rule); }
.cz-video-still { border: 0; }
.cz-video-play { width: 3.25rem; height: 3.25rem; border-radius: 50%; background: rgba(214, 64, 30, 0.9); }
.cz-video-title { font-family: var(--cz-font-body); font-weight: 700; font-size: 0.9375rem; line-height: 1.3; }
.cz-video-caption { font-family: var(--cz-font-body); font-weight: 700; font-size: 0.875rem; }

/* -------------------------------------------------------------------------
   Gallery — three across, hairline frames, a lift on hover
   ------------------------------------------------------------------------- */

@media (min-width: 40rem) { .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); } }
.cz-photo-img { transition: transform 0.25s, filter 0.25s; }
.cz-photo-link:hover .cz-photo-img { transform: scale(1.015); filter: brightness(1.05); }
.cz-album-title { font-family: var(--cz-font-heading); text-transform: uppercase; letter-spacing: 0.02em; font-weight: 400; }
.cz-photo-caption, .cz-album-credit { font-size: 0.72rem; letter-spacing: 0.04em; color: var(--cz-text-muted); }

/* -------------------------------------------------------------------------
   Press — quotes set large in the body face, the source in mono
   ------------------------------------------------------------------------- */

.cz-quote { border-left: 2px solid var(--cz-accent); padding-left: 1.25rem; }
.cz-quote-text {
  font-style: normal;
  font-weight: 500;
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  line-height: 1.45;
  color: var(--cz-text);
}
.cz-quote-source, .cz-article-context {
  font-family: var(--t-mono);
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--cz-accent);
}
.cz-article-heading { font-family: var(--cz-font-body); font-weight: 700; }
.cz-article-lede { color: var(--cz-text); font-weight: 500; }
.cz-article-body p { color: var(--cz-text-muted); }

/* -------------------------------------------------------------------------
   News — cards with a chip date
   ------------------------------------------------------------------------- */

.cz-news--cards .cz-post { background: rgba(255, 255, 255, 0.02); border: var(--t-rule); }
.cz-post-title { font-family: var(--cz-font-body); font-weight: 700; }
.cz-post-body p { color: var(--cz-text-muted); }
.cz-post-chip { font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; }

/* -------------------------------------------------------------------------
   Works — the catalogue's disclosure rows
   ------------------------------------------------------------------------- */

.cz-works-heading { font-family: var(--t-mono); font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--cz-accent); }
.cz-work-summary:hover { background: rgba(214, 64, 30, 0.04); }
.cz-work-title, .cz-work-name { font-family: var(--cz-font-body); }
.cz-work-name { font-weight: 700; }
.cz-work-forces, .cz-work-text p { color: var(--cz-text-muted); }
.cz-work-chip { font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; }

/* -------------------------------------------------------------------------
   Contact — the booking panel: bordered cards, orange send button
   ------------------------------------------------------------------------- */

.cz-contact-card { background: rgba(255, 255, 255, 0.015); }
.cz-contact--cards .cz-contact-card { border: var(--t-rule); }
.cz-contact-heading {
  font-family: var(--t-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cz-accent);
}
.cz-contact-details, .cz-contact-address { color: var(--cz-text-muted); }
.cz-contact-link { color: var(--cz-text); }
.cz-contact-form { border: var(--t-rule); background: rgba(255, 255, 255, 0.015); padding: 2rem; }
.cz-contact-form-heading { font-family: var(--cz-font-heading); text-transform: uppercase; letter-spacing: 0.02em; font-weight: 400; font-size: 1.5rem; }
.cz-contact-form-text { color: var(--cz-text-muted); font-family: var(--t-mono); font-size: 0.8rem; }
.cz-contact-field {
  background: var(--cz-ground);
  border: var(--t-rule);
  color: var(--cz-text);
  border-radius: var(--cz-radius);
}
.cz-contact-button {
  font-family: var(--cz-font-body);
  font-weight: 800;
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: var(--cz-radius);
  transition: transform 0.15s, background 0.15s;
}
.cz-contact-button:hover { transform: translateY(-2px); }

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

.cz-presskit-heading { font-family: var(--cz-font-heading); text-transform: uppercase; letter-spacing: 0.02em; font-weight: 400; }
.cz-presskit-link { font-family: var(--t-mono); font-size: 0.8rem; }

/* -------------------------------------------------------------------------
   Custom pages — the sections read as the source's timeline and cards
   ------------------------------------------------------------------------- */

.custom-page { padding-top: 4.5rem; }
.custom-page .cz-prose { color: var(--cz-text-muted); }
.custom-page .cz-prose:first-of-type { color: var(--cz-text); font-size: 1.125rem; }

.cz-page-images {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1rem;
  margin: 2.25rem 0;
}
.cz-page-image {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  display: block;
}
.cz-page-quote { margin: 2.25rem 0; padding-left: 1.25rem; border-left: 2px solid var(--cz-accent); }
.cz-page-quote p {
  font-weight: 500;
  font-size: 1.25rem;
  line-height: 1.45;
  margin: 0 0 0.5rem;
}
.cz-page-quote cite {
  font-family: var(--t-mono);
  font-style: normal;
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--cz-accent);
}
.cz-page-links, .cz-page-downloads {
  list-style: none;
  margin: 1.75rem 0 0;
  padding: 0;
  border-top: var(--t-rule);
}
.cz-page-links li, .cz-page-downloads li { border-bottom: var(--t-rule); }
.cz-page-link, .cz-download {
  display: block;
  padding: 0.8rem 0;
  text-decoration: none;
  color: var(--cz-text);
  font-family: var(--t-mono);
  font-size: 0.85rem;
}
.cz-page-link:hover, .cz-download:hover { color: var(--cz-accent); }
.cz-download::after { content: " ↓"; 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-family: var(--t-mono);
  font-size: 0.72rem;
  letter-spacing: 0.15em;
  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 — bands alternate ink / ink-2 between hairlines
   ------------------------------------------------------------------------- */

/* 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. */
.t-section { border-top: var(--t-rule); scroll-margin-top: var(--cz-scroll-offset); }
.t-section[data-cz-index]:nth-of-type(even) { background: var(--cz-surface); }
/* A page body already opens with .band--head's own top padding and its
   surface bands would double up inside a lifted section: flatten them. */
.t-section .band--surface { background: transparent; border-block: 0; }
.t-section .page-head { padding-top: 5rem; }

/* -------------------------------------------------------------------------
   Footer — brand and description left, "Elsewhere" right, mono bottom line
   ------------------------------------------------------------------------- */

.foot { padding-block: 5rem 2.5rem; margin-top: 4rem; border-top: var(--t-rule); }
.foot-grid {
  display: grid;
  gap: 2.5rem 3rem;
  margin-bottom: 3.5rem;
}
@media (min-width: 48rem) { .foot-grid { grid-template-columns: 1.3fr 1fr; } }
.foot-name {
  font-family: var(--cz-font-heading);
  font-weight: 400;
  font-size: 1.625rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cz-text);
  margin: 0 0 0.75rem;
  line-height: 1;
}
.foot-name::after { content: "."; color: var(--cz-accent); }
.foot-tagline { margin: 0; max-width: 21rem; font-size: 0.9rem; color: var(--cz-text-muted); line-height: 1.7; }
.foot-tagline:empty { display: none; }
.foot-label {
  font-family: var(--t-mono);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cz-accent);
  margin: 0 0 1rem;
}
.cz-social {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.cz-social-link { color: var(--cz-text-muted); text-decoration: none; font-size: 0.9rem; }
.cz-social-link:hover { color: var(--cz-text); }
.foot-bottom {
  border-top: var(--t-rule);
  padding-top: 1.5rem;
  font-family: var(--t-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cz-text-muted);
}
.foot-credits { margin: 0; }
.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 (quarto's lesson). */
.t-lightbox[open] {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5vmin;
  background: rgba(5, 4, 3, 0.94);
  border: 0;
  max-width: none;
  max-height: none;
  width: 100%;
  height: 100%;
}
.t-lightbox img {
  max-width: min(90vw, 56rem);
  max-height: 85vh;
  object-fit: contain;
  border: var(--t-rule);
}
.t-lightbox-close {
  position: absolute;
  top: 1rem;
  right: 1.5rem;
  background: none;
  border: 0;
  color: var(--cz-text);
  font: inherit;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.5rem;
}

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