`.
This replaced a `--surface` class each page file set by hand, which read
correctly on ten fixed pages and could not survive anybody moving one. */
.page-regions > section.band:nth-of-type(even) {
background: var(--cz-surface);
border-block: var(--o-rule);
}
/* Adjacent surface bands would double their rules. A photograph between them
is not adjacency, so the general sibling combinator would be wrong here. */
.page-regions > section.band:nth-of-type(even) + section.band:nth-of-type(even) {
border-top: 0;
}
/* A band the author placed whose region rendered nothing at all — an empty
press kit, a page's own writing on a page that has none — would be 9rem of
surface colour where the page should have ended. Gated on `[data-cz-item]`,
the engine's own region hook that every module emits, so the rule does not
have to be revisited each time a placement is added to the palette.
The page's name is not a region and carries no hook, so it is spared by
name; a module with an empty inventory *does* emit its hook and keeps its
band, which is right — the author chose it, and "New dates are being
confirmed." is the answer. */
.page-regions > .band:not(:has([data-cz-item])):not(:has(.cz-page-title)) {
display: none;
}
/* The band label: tracked caps behind a short carmine dash. */
.eyebrow {
display: flex;
align-items: center;
gap: 0.8rem;
margin: 0 0 2.25rem;
font-size: 0.72rem;
/* The body face's weight, not the heading face's — the eyebrow sets no
family, so it inherits --cz-font-body from `body`. It looked like a
heading in the source and is a body-face label, which is exactly the
confusion a literal 500 in both places hid. */
font-weight: var(--cz-font-body-weight, 500);
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--cz-text-muted);
}
.eyebrow::before {
content: "";
width: 2rem;
height: 2px;
background: var(--cz-accent);
}
/* Module section headings: the didone, one notch under the page title. */
.cz-heading {
font-family: var(--cz-font-heading);
letter-spacing: 0.01em;
color: var(--cz-text);
}
/* The heading face, everywhere it heads something.
-----------------------------------------------
The eleven modules each reach for --cz-font-heading and then answer the
weight question for themselves, three different ways: 500 in six of them,
nothing at all in the schedule's event title (a , so it inherits 400 and
comes out *lighter* than the programme line under it), and the UA's bold in
the four that render an — which on a face with one weight is not bold
at all but a synthesised smear of its 400. All three are literals, and a
literal is the thing this design is giving up: 500 is one step over body in
Bodoni, the tamest register Syne has, already a slab in Oswald, and nothing
whatever in DM Serif Display, Instrument Serif, Marcellus, Prata and
Italiana, which ship one weight each. So ottavo answers it once, and asks
the face rather than telling it.
The figures go lining in the same breath, and it is a statement about this
design rather than about any face: a concert poster sets its numbers as
capitals. Cormorant Garamond defaults to old-style, which is right in a
book and wrong here — curated *Programme* rendered "Vol. 1" as "Vol. ɪ",
"Disc 1" as "Disc ɪ", and dropped the 2026 dividing the diary to x-height
beside the lining figures in the date column an inch to its left. On a
musician's site the numerals are opus numbers, catalogue numbers, volume
numbers and years, so this is most of what the reader is scanning for. */
.cz-heading,
.cz-year-heading,
.cz-year-summary,
.cz-bio-heading,
.cz-members-heading,
.cz-member-name,
.cz-role-org,
.cz-works-heading,
.cz-work-summary,
.cz-work-title,
.cz-post-title,
.cz-article-heading,
.cz-recording-title,
.cz-track-heading,
.cz-video-title,
.cz-event-heading,
.cz-contact-heading,
.cz-contact-form-heading,
.cz-presskit-heading {
font-weight: var(--cz-font-heading-weight, 500);
font-variant-numeric: lining-nums;
}
/* The rank that cannot come from ink.
----------------------------------
Every failure the type audit found was at item scale — a role heading, an
event title, a recording title — and none at the hero or the page title,
which came through all seventeen faces intact. That is the design's own
doing: the scale is enormous at the top (a 6.25rem hero over a 3.6rem page
title) and collapses at the bottom, where an item title arrived from its
module at 1.05–1.15rem — five to fifteen per cent over the sentence beneath
it — and left the weight step to carry the rest of the distance. On a face
with no step there is nothing to carry it, and a narrow display serif at
1.05rem reads smaller *and* lighter than the body text it is heading.
Size is the one signal that means the same thing in every face: 1.25rem
measures larger than 1rem whatever is drawing it, where a weight, a stroke
contrast and an x-height all vary with the family. The other four
candidates were looked at and set aside — case, because tracked capitals
are already this design's word for "label" (the eyebrow, the nav, the
roster, the wordmark) and a concert title is not a label; colour, because
the one accent is spoken for and a diary of carmine event names would
shout; tracking and space, because neither of them restores rank against
the line directly underneath, which is the actual failure.
Two tiers, because the modules ship eleven opinions about a scale they
cannot see the rest of. `--lead` and the like keep their own steps: a
module rule with two classes outranks these. */
.cz-heading,
.cz-year-heading,
.cz-year-summary,
.cz-bio-heading,
.cz-members-heading,
.cz-works-heading {
font-size: var(--o-heading-section);
line-height: 1.25;
}
.cz-member-name,
.cz-role-org,
.cz-work-summary,
.cz-work-title,
.cz-post-title,
.cz-article-heading,
.cz-recording-title,
.cz-video-title,
.cz-event-heading,
.cz-contact-heading,
.cz-contact-form-heading {
font-size: var(--o-heading-item);
line-height: 1.3;
}
/* A third rung, for the one heading that sits inside a block which shrank.
The track listing is 0.9rem, so a work title heading a disc inherited that
and came out the same size as "1. Allegro" beneath it — carried only by
full-ink colour against the lines' muted grey, which a hairline display
serif loses (Salon, Programme and Manuscript all showed it; Poster did
not, which is why it survived the first pass). 1.05rem is a step over its
own tracks and stays well under the recording title above it, which is
what a sub-heading has to do in both directions at once. */
.cz-track-heading { font-size: 1.05rem; }
.cz-empty { color: var(--cz-text-muted); font-style: italic; }
.cz-prose { max-width: var(--o-narrow); margin: 0 0 1.1rem; }
.cz-inline-link {
color: var(--cz-link);
text-decoration: underline;
text-underline-offset: 0.18em;
text-decoration-thickness: 1px;
}
/* -------------------------------------------------------------------------
About
------------------------------------------------------------------------- */
.about-grid { display: grid; gap: 2.5rem; }
.about-portrait { margin: 0; }
.about-portrait:empty { display: none; }
.cz-bio-portrait { display: block; width: 100%; height: auto; border-radius: var(--cz-radius); }
@media (min-width: 56rem) {
.about-grid:has(.about-portrait:not(:empty)) {
grid-template-columns: minmax(16rem, 24rem) minmax(0, 1fr);
gap: 3.5rem;
}
.about-portrait { position: sticky; top: 2rem; align-self: start; }
}
/* A roster on a site with no roster is a band of nothing: a soloist's site
carries this placement by default and has no members to put in it. The
module emits its region hook either way, so this is gated on the list
itself rather than on the hook the general rule above uses. */
.band--roster:not(:has(.cz-members-list)) { display: none; }
/* -------------------------------------------------------------------------
Press — the pull quotes are the showpiece
------------------------------------------------------------------------- */
.cz-press blockquote p,
.cz-press-quote p {
font-family: var(--cz-font-heading);
font-style: italic;
font-weight: 400;
font-size: clamp(1.35rem, 2.6vw, 1.8rem);
line-height: 1.35;
letter-spacing: 0.005em;
color: var(--cz-text);
}
/* -------------------------------------------------------------------------
Custom pages
------------------------------------------------------------------------- */
.cz-page-images {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
gap: 1.25rem;
margin: 2.25rem 0;
}
.cz-page-image {
width: 100%;
aspect-ratio: 3 / 2;
object-fit: cover;
display: block;
border-radius: var(--cz-radius);
}
.cz-page-quote { margin: 2.25rem 0; padding-left: 1.5rem; border-left: 3px solid var(--cz-accent); }
.cz-page-quote p {
font-family: var(--cz-font-heading);
font-style: italic;
font-size: 1.35rem;
line-height: 1.4;
margin: 0 0 0.5rem;
}
.cz-page-quote cite {
font-style: normal;
font-size: 0.72rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--cz-text-muted);
}
.cz-page-links, .cz-page-downloads {
list-style: none;
margin: 1.75rem 0 0;
padding: 0;
border-top: var(--o-rule);
}
.cz-page-links li, .cz-page-downloads li { border-bottom: var(--o-rule); }
.cz-page-link, .cz-download {
display: block;
padding: 0.8rem 0;
text-decoration: none;
color: var(--cz-text);
}
.cz-page-link:hover, .cz-download:hover { color: var(--cz-accent-bright); }
.cz-download::after { content: " ↓"; color: var(--cz-accent-bright); }
.cz-sibling-nav {
display: flex;
flex-wrap: wrap;
gap: 0.5rem 1.5rem;
align-items: baseline;
}
.cz-sibling-link, .cz-sibling-current {
font-size: 0.72rem;
letter-spacing: 0.16em;
text-transform: uppercase;
}
.cz-sibling-link { color: var(--cz-text-muted); text-decoration: none; }
.cz-sibling-link:hover { color: var(--cz-text); }
.cz-sibling-current { color: var(--cz-text); border-bottom: 2px solid var(--cz-accent); }
/* -------------------------------------------------------------------------
One-page assembly
------------------------------------------------------------------------- */
.o-section { border-top: var(--o-rule); padding-block: 4.5rem; }
.o-section[data-cz-index]:nth-of-type(even) { background: var(--cz-surface); }
/* -------------------------------------------------------------------------
Footer
------------------------------------------------------------------------- */
.foot {
border-top: var(--o-rule);
padding-block: 3.5rem;
margin-top: 5rem;
}
.foot-grid {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: 1.25rem 2rem;
}
.foot-name {
font-family: var(--cz-font-heading);
font-weight: var(--cz-font-heading-weight, 500);
font-size: 1rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--cz-text);
margin: 0;
}
.cz-social {
display: flex;
flex-wrap: wrap;
gap: 0.4rem 1.4rem;
list-style: none;
margin: 0;
padding: 0;
}
.cz-social-link {
color: var(--cz-text-muted);
text-decoration: none;
font-size: 0.72rem;
letter-spacing: 0.16em;
text-transform: uppercase;
border-bottom: 1px solid transparent;
}
.cz-social-link:hover { color: var(--cz-text); border-bottom-color: var(--cz-accent); }
.foot-credits {
flex-basis: 100%;
margin: 0;
font-size: 0.8rem;
color: var(--cz-text-muted);
}
.cz-credit-link { color: var(--cz-text); }
.cz-credit-dot { display: inline-block; text-decoration: none; }
.cz-nowrap { white-space: nowrap; }
/* -------------------------------------------------------------------------
Lightbox (site.js)
------------------------------------------------------------------------- */
/* display 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). */
.o-lightbox[open] {
position: fixed;
inset: 0;
z-index: 50;
display: flex;
align-items: center;
justify-content: center;
padding: 5vmin;
background: rgba(10, 8, 12, 0.94);
border: 0;
}
.o-lightbox img {
max-width: 100%;
max-height: 90vh;
object-fit: contain;
}
.o-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; }
}