/* Shared spacing only. Type, colour, media proportions and grid composition
   remain in the existing styles. All page templates load this file last. */
:root {
  --page-top:26px;
  --column-gap:3vw;
  --brand-gap:28px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --page-gutter: var(--space-6);
  --page-bottom: 64px;
  --section-gap: var(--space-8);
  --year-gap: var(--space-12);
  --paragraph-gap: var(--space-7);
  --card-row-gap: var(--space-8);
  --card-column-gap: var(--space-7);
  --caption-gap: 10px;
  --nav-gap: 9px;
  --fact-column-gap: 18px;
  --fact-row-padding: var(--space-1);
  --intro-copy-gap: var(--space-4);
  --media-copy-gap: var(--space-6);
  --cv-column-gap: 18px;
  --field-label-gap: 6px;
  --nav-link-padding: 2px;
}
/* Keep the content width stable when navigating between short and long pages. */
html { scrollbar-gutter: stable; }
body { margin: 0; }
.shell { margin: 0 auto; padding: var(--page-top) var(--page-gutter) var(--page-bottom); column-gap: var(--column-gap); row-gap: 0; }
.shell > header { padding: 0 var(--space-5) 0 0; }
.shell > header .brand { margin: 0 0 var(--brand-gap); gap: var(--brand-logo-gap); }
.shell > header nav { gap: var(--nav-gap); }
.shell > header nav a { padding: var(--nav-link-padding) 0; }
.shell > main { padding: 0; }
.intro { padding: var(--space-1) 0 var(--section-gap); }
.intro h1 { margin: 0; }
.intro p { margin: var(--intro-copy-gap) 0 0; }
.content, .cv, .catalogue, .works-catalogue, .year-group { padding: 0; }
.year-group + .year-group { margin-top: var(--year-gap); }
.year-group h2 { margin: 0 0 var(--space-3); }
.title-grid, .work-grid { gap: var(--card-row-gap) var(--card-column-gap); }
.work-choice { padding: 0; }
.work-choice span { margin-top: var(--caption-gap); }
.work-info { padding-top: var(--caption-gap); }
.work-title { margin: 0; }
.work-year { margin: var(--space-1) 0 0; }
.detail-back { margin: var(--space-1) 0 var(--space-5); }
.detail-copy { padding: var(--media-copy-gap) 0 0; }
.detail-copy h2 { margin: 0 0 var(--space-4); }
.detail-description { margin: 0 0 var(--space-6); }
.detail-facts, .detail-facts dd { margin: 0; }
.detail-facts > div { gap: var(--fact-column-gap); padding: var(--fact-row-padding) 0; }
.detail-facts > div:has(.recognition-list) { margin-top: var(--space-4); }
.recognition-list { gap: var(--space-2); }
.detail-back-bottom { margin: var(--space-6) 0 0; }
.prose p, .terms > p { margin: 0 0 var(--paragraph-gap); }
.prose p:last-child, .terms > p:last-child { margin-bottom: 0; }
.cv-section { gap: var(--space-8); padding: 0 0 var(--section-gap); }
.cv-section + .cv-section { padding-top: var(--section-gap); }
.cv-section:last-child { padding-bottom: 0; }
.cv-row { column-gap: var(--cv-column-gap); margin: 0 0 var(--space-5); }
.cv-row:last-child { margin-bottom: 0; }
.entry { margin: 0; }
.subentry { margin: var(--space-1) 0 0; }
details { margin-top: var(--space-4); }
summary { padding: var(--space-2) 0; }
.formats { padding: var(--space-1) 0 var(--space-3); }
.work--formats .work-info { padding-top: 0; }
.available-formats { margin: 0; }
.format { padding: var(--space-5) 0; }
.format h3 { margin: 0 0 var(--space-2); gap: var(--space-4); }
.format p { margin: 0; }
.enquire { margin-top: var(--space-4); }
.format .enquire { margin-top: var(--space-3); }
.enquiry-page main { column-gap: var(--space-12); }
.breadcrumbs { margin: var(--space-1) 0 var(--section-gap); gap: var(--space-2); }
.work-preview h1 { margin: 0 0 var(--space-4); }
.tier { margin: 0 0 var(--space-5); }
.terms { margin: 0 0 var(--paragraph-gap); }
#contact h2 { margin: var(--space-2) 0 var(--space-3); }
#contact p { margin: 0; }
label { margin-top: var(--space-5); }
input, textarea { margin-top: var(--field-label-gap); padding: 10px var(--space-3); }
button { margin-top: var(--space-6); padding: 10px var(--space-4); }
fieldset { margin: 0; padding: 0; }
.note, #email-draft p { margin: var(--space-3) 0 0; }
.note:empty { margin: 0; }
#draft-title { margin: var(--section-gap) 0 var(--space-3); }
#open-email { margin-left: var(--space-4); }
.contact-details p { margin: 0; }
.contact-details p + p { margin-top: var(--space-5); }
.contact-details .contact-location { margin-top: var(--paragraph-gap); }
.contact-details a { gap: var(--space-2); }
/* Deliberately quiet landing caption and compact audio control. */
.landing-work { margin: 0; }
.landing-media { margin-top: var(--space-1); }
.landing-caption { margin: 6px 0 0; }
.sound-toggle { margin: 0; padding: 7px 10px; }
/* Desktop content starts beside the first navigation item, below the brand. */
@media (min-width:761px) {
  :root {
    --content-start: calc(var(--brand-logo-width) * 399 / 892 + var(--brand-logo-gap) + var(--brand-logo-width) * 57 / 1000 + var(--brand-gap) - 2px);
  }
  .shell > main { padding-top: var(--content-start); }
}
@media (max-width:1100px) {
  .enquiry-page main { column-gap: var(--space-7); }
  .cv-section { gap: var(--space-6); }
}
@media (max-width:760px) {
  :root { --page-top:18px; --column-gap:14px; --brand-gap:24px; --page-gutter:14px; --page-bottom:48px; --section-gap:var(--space-7); --year-gap:var(--space-10); --card-row-gap:var(--space-7); --card-column-gap:var(--space-4); --nav-gap:7px; --fact-column-gap:var(--space-3); }
  .shell > header { padding: 0; }
  .cv-section { gap: var(--space-4); padding-bottom: var(--space-6); }
  .cv-section + .cv-section { padding-top: var(--space-6); }
  .cv-section:last-child { padding-bottom: 0; }
  :root { --cv-column-gap: var(--space-3); }
  .work-preview { margin: 0 0 var(--space-6); }
  .landing-caption { margin-top: 2px; }
  .landing-media .sound-toggle { padding: 3px 5px; }
}
@media (max-width:440px) {
  :root { --page-top:14px; --column-gap:12px; --brand-gap:20px; --page-gutter:10px; --page-bottom:40px; --fact-column-gap:var(--space-1); --fact-row-padding:6px; }
  :root { --media-copy-gap: var(--space-5); --cv-column-gap: 10px; }
  .format h3 { gap: var(--space-3); }
}