:root {
  --project-paper: #fbfcfe;
  --project-white: #fff;
  --project-ink: #263c4b;
  --project-muted: #647780;
  --project-line: #dfe6e9;
  --project-field-line: #d1dfe9;
  --project-link: #1d5d9f;
  --project-green: #65867c;
  --project-blue-wash: #eaf3fb;
  --project-serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --project-sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body.project-site {
  color: var(--project-ink);
  background: var(--project-paper);
  font-family: var(--project-sans);
  -webkit-text-size-adjust: 100%;
}

.project-site button, .project-site input, .project-site select, .project-site textarea { font-family: inherit; }
.project-site [hidden] { display: none !important; }
.project-site a { color: var(--project-link); text-underline-offset: 3px; }
.project-site a:visited { color: var(--project-link); }
.project-site :focus-visible { outline: 2px solid var(--project-link); outline-offset: 3px; }
.project-site main.page-content { color: var(--project-ink); background: var(--project-paper); }
.project-site main.page-content a { color: var(--project-link); }
.project-site main.page-content h2, .project-site main.page-content h3 { font-family: var(--project-serif); font-weight: 400; }
.project-site main.page-content h2 { font-size: 22px; }
.project-site main.page-content h3 { font-size: 17px; }
.project-site .post > .post-header { display: none; }
.project-site.page-about .post-content,
.project-site.page-josquin .post-content,
.project-site.page-documentation .post-content { padding-top: 12px; }
.project-site .page-content > .wrapper { max-width: 1060px; padding-left: 30px; padding-right: 30px; box-sizing: border-box; }
.project-site.page-about .page-content > .wrapper { max-width: 900px; }
.project-site.page-about .post-content > p { max-width: 760px; margin: 0 auto 13px; line-height: 1.58; }
.project-site.page-about .post-content > .section-header { max-width: 800px; margin-left: auto; margin-right: auto; }
.project-site.page-recently-added .page-content > .wrapper { max-width: 800px; }
.project-site .section-header h4 { color: var(--project-muted); }
.project-site .section-header.page-title h4 { color: var(--project-ink); font-family: var(--project-serif); font-size: 24px; font-weight: 400; }
.project-site .section-header::after { background: linear-gradient(to right, var(--project-line), transparent); }

/* The same navigation on every page, including the full-width score view. */
.project-site .site-header { background: linear-gradient(100deg, #f5eedc 0%, #f8f3e8 24%, #fafaf7 53%, #fff 90%); border-top: 0; border-bottom: 1px solid var(--project-line); min-height: 0; backdrop-filter: none; }
.project-site .site-header .wrapper { max-width: 1180px; width: 100%; padding: 16px 32px; box-sizing: border-box; }
.project-site .site-header .header-main { flex-wrap: nowrap; gap: 24px; }
.project-site .site-title { margin: 0; flex-shrink: 0; }
.project-site .site-title img { width: 190px; height: auto; mix-blend-mode: darken; }
.project-site .site-nav { flex: 1; max-width: 530px; margin-left: 38px; }
.project-site .site-nav .trigger { width: 100%; justify-content: space-between; gap: 35px; }
.project-site .site-nav .page-link { font: 400 18px/1.25 var(--project-serif); letter-spacing: 0; color: #35454e; padding: 8px 0; white-space: nowrap; }
.project-site .site-nav .page-link:hover { color: var(--project-link); background: transparent; }
.project-site .site-nav .dropdown-trigger { gap: 5px; }
.project-site .site-nav .dropdown-content { width: max-content; min-width: 0; background: var(--project-white); border: 1px solid var(--project-line); border-radius: 7px; padding: 4px; box-shadow: 0 10px 28px rgb(32 48 59 / 13%); backdrop-filter: none; }
.project-site .site-nav .dropdown-content a { padding: 7px 10px; border-radius: 4px; font-size: 17px; }
.project-site .site-nav .dropdown-content a:hover, .project-site .site-nav .dropdown-content a:focus-visible { background: transparent; color: var(--project-link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.project-site .site-nav .trigger > .page-link[aria-current="page"] { text-decoration: underline; text-decoration-color: #86a9ca; text-underline-offset: 7px; }

.project-site .site-footer { padding: 20px 32px; color: var(--project-muted); background: var(--project-paper); border-top: 1px solid var(--project-line); font-size: 14px; backdrop-filter: none; }
.project-site .footer-title { color: var(--project-ink); font-weight: 500; }
.project-site .site-footer a, .project-site .footer-contact-button { color: var(--project-link); font-weight: 400; }
.project-site .site-footer .footer-email { color: var(--project-muted); }
.project-site .footer-right { gap: 12px; }
.project-site .footer-inner { max-width: 1000px; }
.project-site.page-about .footer-inner { max-width: 760px; }
.project-site.page-recently-added .footer-inner { max-width: 740px; }
.project-site.page-home .footer-inner { max-width: 1116px; }
.project-site.page-work .footer-inner { max-width: none; }

/* Keep the catalogue geometry, filtering, and compact row density. */
.project-site table.general { font-family: var(--project-sans); color: var(--project-ink); background: var(--project-white); border-color: var(--project-line); border-radius: 10px; box-shadow: 0 5px 18px rgb(35 54 65 / 4.5%); backdrop-filter: none; }
.project-site table.general th { color: var(--project-ink); background: #edf3f8; border-color: var(--project-line); }
.project-site table.general td { border-color: var(--project-line); }
.project-site table.general tr:nth-child(even) { background: #f6f8fa; }
.project-site table.general tbody tr:hover { background: #eef5fc; }
.project-site table.general .work-subtitle, .project-site table.general .first-name { color: var(--project-muted); }
.project-site #search-interface .right-group { border-left-color: var(--project-line); }
.project-site #search-interface #input { color: var(--project-ink); background-color: var(--project-white); border-color: var(--project-field-line); border-radius: 4px; box-shadow: 0 2px 8px rgb(53 92 124 / 4%); }
.project-site #search-interface #input::placeholder { color: var(--project-muted); }
.project-site #search-interface #input:focus { outline: none; border-color: var(--project-field-line); background-color: #f6faff; box-shadow: none; }
.project-site #search-interface select, .project-site #search-interface .dropdown-toggle { color: var(--project-ink); background-color: var(--project-white); border-color: var(--project-line); font-family: var(--project-sans); }
.project-site #search-interface select:hover, .project-site #search-interface .dropdown-toggle:hover { background-color: #f6faff; border-color: #b7ccdf; }
.project-site #search-interface select:focus, .project-site #search-interface .dropdown-toggle:focus { border-color: #86a9ca; box-shadow: 0 0 0 2px rgb(80 130 175 / 12%); }
.project-site #search-interface #dropdowns > div::before, .project-site #search-interface #dropdowns > div > div::before { color: var(--project-ink); }
.project-site #search-count { color: var(--project-muted); }
.project-site .text-checkbox-label input { accent-color: #689bca; }
.project-site .custom-dropdown .dropdown-content { background-color: var(--project-white); border-color: var(--project-line); }
.project-site .mensuration-item:hover, .project-site .mensuration-item.selected, .project-site .selected-mensuration { background: var(--project-blue-wash); border-color: #b7ccdf; }

/* Reading columns and portrait sizes retain their existing page rules. */
.project-site .team-member { border-bottom-color: var(--project-line); }
.project-site .team-member .role, .project-site .review-block figcaption, .project-site .see-scores { color: var(--project-muted); }
.project-site .process-steps li::before, .project-site .workflow-list > li::before { color: var(--project-ink); background: var(--project-blue-wash); }
.project-site .toc-container { border-right-color: var(--project-line); }
.project-site .toc-container h4 { color: var(--project-muted); }
.project-site .toc-container li a { color: var(--project-link); }
.project-site .main-content section::after { background: linear-gradient(to right, var(--project-line), transparent); }
.project-site .main-content code, .project-site .url-block { color: var(--project-ink); background: var(--project-white); border-color: var(--project-line); }
.project-site .review-block blockquote, .project-site .collaboration-block h3 { color: var(--project-ink); }

/* Keep the work page's metadata, toolbar, score, and analysis panels in place. */
.project-site.page-work #work-info { background: #f7f9fa; border-color: var(--project-line); }
.project-site.page-work #work-info td::before { color: var(--project-ink); }
.project-site.page-work .work-item b, .project-site.page-work .commentary-sources > b { color: var(--project-ink); }
.project-site.page-work .work-action-link, .project-site.page-work .work-action-link:hover { color: var(--project-link); }
.project-site.page-work .button, .project-site.page-work .analysis-toggle.button { color: var(--project-ink); background: var(--project-white); border-color: var(--project-line); }
.project-site.page-work .button:hover { background: var(--project-blue-wash); border-color: #b7ccdf; }
/* The toolbar already has heavier borders. Keep its existing contrast. */
.project-site.page-work .button-container { --project-line: #e4eaed; }
.project-site.page-work .button-container .button, .project-site.page-work .button-container .accidentals-switch { border-width: 2px; }
.project-site.page-work .filter-toggle.button.active, .project-site.page-work .analysis-toggle.button.active { color: var(--project-white); background: #3277ab; border-color: #3277ab; }
.project-site.page-work .audio-toggle { color: var(--project-link); background: var(--project-blue-wash); border-color: var(--project-link); }
.project-site.page-work .accidentals-switch { color: var(--project-ink); background: #eff3f7; border-color: var(--project-line); }
.project-site.page-work .accidentals-switch[aria-checked="true"] .switch-track { background: #689bca; }
.project-site.page-work .error-report-open { color: #805644; background: #f4e9e2; border-color: #dfcac0; }
.project-site.page-work .error-report-open:hover { color: #714a39; background: #ecddd3; border-color: #cdb3a5; }
.project-site.page-work .commentary-toggle { color: var(--project-link); background: var(--project-blue-wash); border-color: #b7ccdf; }
.project-site.page-work .work-score-credit { --work-credit-label-color: var(--project-muted); --work-credit-link-color: var(--project-link); --work-credit-text-color: var(--project-muted); }
.project-site.page-work .citation-open, .project-site.page-work .commentary-notes { color: var(--project-muted); }
.project-site.page-work .external-note, .project-site.page-work .analysis-panel { color: var(--project-ink); background: #f7f9fa; border-color: var(--project-line); }
.project-site .contact-form-dialog, .project-site .error-report-dialog, .project-site .citation-dialog { color: var(--project-ink); background: var(--project-white); border-color: var(--project-line); font-family: var(--project-sans); }

/* Contact and error reports share the site's reading and control styles. */
.project-site :is(.contact-form-modal, .error-report-modal) { z-index: 1100; }
.project-site :is(.contact-form-backdrop, .error-report-backdrop) { background: rgb(38 60 75 / 32%); }
.project-site :is(.contact-form-modal, .error-report-modal) :is(.contact-form-dialog, .error-report-dialog) {
  padding: 24px;
  max-height: min(720px, calc(100dvh - 48px));
  border-color: var(--project-line);
  border-radius: 10px;
  background: var(--project-white);
  box-shadow: 0 18px 60px rgb(32 48 59 / 20%);
  font: 400 15px/1.5 var(--project-sans);
}
.project-site :is(.contact-form-modal, .error-report-modal) :is(.contact-form-header, .error-report-header) {
  position: relative;
  margin: -24px -24px 14px;
  padding: 24px 24px 12px;
  border-bottom: 1px solid transparent;
  border-radius: 10px 10px 0 0;
  background: linear-gradient(110deg, #f8f3e8, #fcfcfa 48%, #fff 85%);
  background-clip: padding-box;
}
.project-site :is(.contact-form-modal, .error-report-modal) :is(.contact-form-header, .error-report-header)::after {
  content: "";
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 0;
  height: 1px;
  background: var(--project-line);
}
.project-site :is(.contact-form-modal, .error-report-modal) h2 {
  margin: 0;
  color: var(--project-ink);
  font: 400 24px/1.25 var(--project-serif);
}
.project-site :is(.contact-form-modal, .error-report-modal) :is(.contact-form-close, .error-report-close) {
  color: var(--project-muted);
  border-color: transparent;
  background: transparent;
  border-radius: 5px;
}
.project-site :is(.contact-form-modal, .error-report-modal) :is(.contact-form-close, .error-report-close):hover {
  color: var(--project-link);
  background: var(--project-blue-wash);
  border-color: transparent;
}
.project-site :is(.contact-form-modal, .error-report-modal) :focus-visible { outline: 2px solid var(--project-link); outline-offset: 3px; }
.project-site :is(.contact-form-modal, .error-report-modal) :is(.contact-form-intro, .error-report-intro) {
  margin: 0 0 18px;
  color: var(--project-muted);
  font-size: 14px;
  line-height: 1.5;
}
.project-site :is(.contact-form-field, .error-report-field) { margin-bottom: 14px; }
.project-site :is(.contact-form-field, .error-report-field) label,
.project-site .error-report-label { margin-bottom: 6px; color: var(--project-ink); font-size: 14px; font-weight: 500; }
.project-site :is(.contact-form-field, .error-report-field) :is(textarea, input[type="email"], input[type="text"]) {
  padding: 10px 12px;
  color: var(--project-ink);
  background: var(--project-paper);
  border: 1px solid var(--project-field-line);
  border-radius: 5px;
  font: 400 15px/1.5 var(--project-sans);
}
.project-site :is(.contact-form-field, .error-report-field) :is(textarea, input)::placeholder { color: var(--project-muted); opacity: 1; }
.project-site :is(.contact-form-field, .error-report-field) :is(textarea, input):focus {
  background: #f6faff;
  border-color: #86a9ca;
  box-shadow: 0 0 0 2px rgb(80 130 175 / 12%);
  outline: none;
}
.project-site :is(.error-report-target-display, .contact-form-config-note, .error-report-config-note) {
  padding: 10px 12px;
  color: var(--project-muted);
  background: #f6f8fa;
  border-color: var(--project-line);
  border-radius: 5px;
  font-size: 14px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.project-site :is(.contact-form-actions, .error-report-actions) { gap: 10px; margin-top: 16px; }
.project-site :is(.contact-form-modal, .error-report-modal) :is(.contact-form-button, .button) {
  height: auto;
  min-height: 38px;
  padding: 8px 12px;
  color: var(--project-ink);
  background: var(--project-white);
  border: 1px solid var(--project-line);
  border-radius: 5px;
  box-shadow: none;
  font: 400 14px/1.4 var(--project-sans);
}
.project-site :is(.contact-form-modal, .error-report-modal) :is(.contact-form-cancel, .error-report-cancel):hover { background: #f6f8fa; border-color: var(--project-field-line); }
.project-site :is(.contact-form-modal, .error-report-modal) :is(.contact-form-submit, .error-report-submit) {
  color: var(--project-link);
  background: var(--project-blue-wash);
  border-color: #cee0ee;
  font-weight: 500;
}
.project-site :is(.contact-form-modal, .error-report-modal) :is(.contact-form-submit, .error-report-submit):is(:hover, :focus-visible) { color: var(--project-link); background: #dcebf7; border-color: #c6daeb; }
.project-site :is(.contact-form-status, .error-report-status, .contact-form-success-instruction, .error-report-success-instruction) { color: var(--project-muted); font-size: 14px; line-height: 1.5; }
.project-site :is(.contact-form-status--error, .error-report-status--error) { color: #9b463e; }
.project-site :is(.contact-form-success-message, .error-report-success-message) { color: var(--project-green); font: 400 24px/1.3 var(--project-serif); white-space: normal; }
.project-site :is(.contact-form-modal--success, .error-report-modal--success) :is(.contact-form-header, .error-report-header) { position: static; margin: 0; padding: 0; border: 0; background: transparent; }
.project-site :is(.contact-form-modal--success, .error-report-modal--success) :is(.contact-form-header, .error-report-header)::after { display: none; }

@media (max-width: 600px) {
  .project-site :is(.contact-form-modal, .error-report-modal) { padding: 12px; }
  .project-site :is(.contact-form-modal, .error-report-modal) :is(.contact-form-dialog, .error-report-dialog) { padding: 18px; max-height: calc(100dvh - 24px); border-radius: 8px; }
  .project-site :is(.contact-form-modal, .error-report-modal) :is(.contact-form-header, .error-report-header) { margin: -18px -18px 14px; padding: 18px 18px 12px; border-radius: 8px 8px 0 0; }
  .project-site :is(.contact-form-modal, .error-report-modal) :is(.contact-form-header, .error-report-header)::after { left: 18px; right: 18px; }
  .project-site :is(.contact-form-modal--success, .error-report-modal--success) :is(.contact-form-header, .error-report-header) { margin: 0; padding: 0; }
  .project-site :is(.contact-form-modal, .error-report-modal) h2 { font-size: 22px; }
  .project-site :is(.contact-form-field, .error-report-field) :is(textarea, input[type="email"], input[type="text"]) { font-size: 16px; }
  .project-site :is(.contact-form-modal, .error-report-modal) :is(.contact-form-button, .button) { min-height: 42px; }
}

@media (max-width: 940px) and (min-width: 769px) {
  .project-site .site-header .wrapper { padding: 14px 24px; }
  .project-site .site-title img { width: 166px; }
  .project-site .site-nav { margin-left: 18px; }
  .project-site .site-nav .trigger { gap: 22px; }
  .project-site .site-nav .page-link { font-size: 17px; }
}

@media (max-width: 768px) {
  .project-site .page-content > .wrapper { max-width: 100%; padding-left: 0; padding-right: 0; }
  .project-site .section-header.page-title h4 { font-size: 22px; }
  .project-site main.page-content h2 { font-size: 20px; }
  .project-site main.page-content h3 { font-size: 16px; }
  .project-site .site-header .wrapper { padding: 14px 20px; }
  .project-site .site-title img { width: 164px; height: auto; }
  .project-site .site-nav { flex: 0 0 auto; margin-left: auto; max-width: none; }
  .project-site .site-nav .trigger { width: min(280px, calc(100vw - 40px)); background: var(--project-white); border-color: var(--project-line); gap: 0; }
  .project-site .site-nav .page-link { padding: 10px 11px; font-size: 18px; }
  .project-site .site-nav .dropdown > .dropdown-trigger.page-link { display: none !important; }
  .project-site .site-nav .dropdown-content { display: block; position: static; width: auto; border: 0; box-shadow: none; margin: 0; padding: 0; background: transparent; }
  .project-site .site-nav .dropdown-content a { padding: 10px 11px; font-size: 18px; }
  .project-site .site-nav .dropdown-trigger[aria-expanded="true"] + .dropdown-content { display: block; }
  .project-site .site-nav label[for="nav-trigger"] { color: var(--project-ink); background: var(--project-white); border-color: var(--project-line); }
  .project-site .site-footer { padding: 19px 20px; }
  .project-site .footer-inner { flex-wrap: wrap; }
}