/* Last updated: September 11, 2026. Editorial body only. No homepage hero selectors. */
.mel-editorial { background:var(--qp-canvas-soft); color:var(--qp-ink); }
.mel-section { padding:var(--space-section) 0; scroll-margin-top:100px; }
.mel-section--soft { background:var(--qp-canvas); }
.mel-title { font-family:var(--font-display); font-size:var(--type-h1); font-weight:400; line-height:1.06; letter-spacing:var(--ls-tight-md); margin:0 0 var(--sp-6); }
.mel-lead { font-family:var(--font-sans); font-size:var(--type-lead); font-weight:300; line-height:var(--type-lead-lh); margin:0 0 var(--sp-5); }
.mel-heading { font-family:var(--font-display); font-size:var(--type-h3); font-weight:400; line-height:1.3; margin:var(--sp-5) 0 var(--sp-3); }
.mel-small-heading { font-family:var(--font-sans); font-size:var(--type-h4); font-weight:600; line-height:1.4; margin:0 0 var(--sp-3); }
.mel-meta { font-family:var(--font-sans); font-size:var(--type-small); line-height:1.55; color:var(--qp-body); }
.mel-links { display:flex; flex-wrap:wrap; gap:var(--sp-4) var(--sp-6); margin-top:var(--sp-6); }
.mel-links a,.mel-meta a { color:var(--qp-cta-dark); font-size:var(--type-small); text-decoration:underline; text-underline-offset:.3em; text-decoration-thickness:1px; }
.mel-links a:hover { text-decoration-thickness:2px; }
.mel-editorial a:focus-visible,.mel-guide a:focus-visible,.mel-guide summary:focus-visible,.mel-player summary:focus-visible { outline:2px solid currentColor; outline-offset:5px; }
.mel-introduction { display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(2rem,7vw,7rem); align-items:center; }
.mel-introduction__copy .body-copy { max-width:54ch; }
.mel-portrait { margin:0; }
.mel-portrait img { display:block; width:100%; height:auto; border-radius:var(--radius-card); }
.mel-portrait figcaption { margin-top:var(--sp-4); }
.mel-section-intro { max-width:760px; margin-bottom:var(--space-section-content); }
.mel-section-intro .body-copy { max-width:52ch; }
.mel-story { display:grid; grid-template-columns:1.1fr .9fr; align-items:center; gap:clamp(2rem,6vw,6rem); }
.mel-story + .mel-story { margin-top:clamp(5rem,10vw,10rem); }
.mel-story--reverse { grid-template-columns:.9fr 1.1fr; }
.mel-story--reverse .mel-story__image { order:2; }
.mel-story__image img { display:block; width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:var(--radius-card); }
.mel-story--reverse .mel-story__image img { aspect-ratio:4/3; }
.mel-story-title { font-family:var(--font-display); font-size:var(--type-h2); font-weight:400; line-height:1.15; margin:0 0 var(--sp-5); }
.mel-section--dark { background:var(--qp-surface-dark); color:var(--qp-canvas); }
.mel-section--dark :is(.body-copy,.mel-lead) { color:var(--qp-on-dark-soft); }
.mel-section--dark .eyebrow { color:var(--qp-brand-light); }
.mel-section--dark .mel-links a { color:var(--qp-canvas); }
#intro .mel-meta { color:var(--qp-on-dark-soft); }
#intro .mel-meta a { color:var(--qp-canvas); }
.mel-making-intro { max-width:760px; }
.mel-practice-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--sp-7); margin:var(--sp-8) 0; }
.mel-wide-image { display:block; }
.mel-wide-image img { display:block; width:100%; height:auto; border-radius:var(--radius-card); }
.mel-installation-copy { display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,6vw,6rem); margin-top:var(--sp-8); }
.mel-record-grid,.mel-journal-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--sp-7); }
.mel-record,.mel-journal-grid article { min-width:0; }
.mel-record img { width:100%; aspect-ratio:1; object-fit:contain; background:var(--qp-surface-dark); border-radius:var(--radius-card); }
.mel-record .mel-links { margin-top:var(--sp-4); gap:var(--sp-3) var(--sp-5); }
.mel-player { margin-top:var(--sp-8); max-width:420px; }
.mel-player summary { cursor:pointer; font-size:var(--type-body); color:var(--qp-cta-dark); padding:var(--sp-4) 0; }
.mel-note-image img { display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; border-radius:var(--radius-card); }
.mel-journal-grid .mel-heading a { color:inherit; text-decoration:none; }
.mel-journal-grid .mel-heading a:hover { text-decoration:underline; text-underline-offset:.15em; }
.mel-journal-grid .mel-meta { margin-top:var(--sp-4); }
/* :not() here now also has to exclude .footer__copy — that paragraph lives
   inside .mel-follow too since the footer identity block was folded in, and
   without the exclusion this centred, 46ch-capped rule would fight the
   identity column's own right-aligned, full-width copy styling. */
.mel-follow p:not(.eyebrow):not(.footer__copy) { color:var(--qp-on-dark-soft); max-width:46ch; margin:var(--sp-5) auto; }
@media(max-width:800px) {
 .mel-introduction,.mel-story,.mel-story--reverse,.mel-installation-copy { grid-template-columns:1fr; }
 .mel-portrait { max-width:480px; }
 .mel-story--reverse .mel-story__image { order:0; }
 .mel-story__image img { aspect-ratio:4/3; }
 .mel-practice-grid { grid-template-columns:1fr; gap:var(--sp-6); }
 .mel-record-grid,.mel-journal-grid { grid-template-columns:1fr; gap:var(--sp-8); }
 .mel-record img { max-height:420px; }
 .mel-editorial .container { min-width:0; }
}

/* Guideline presentation. Specimens inherit their real component styles. */
.mel-guide { background:var(--qp-canvas-soft); }
.mel-guide-cover { padding:var(--sp-10) 0; background:var(--qp-surface-dark); color:var(--qp-canvas); }
.mel-guide-cover .eyebrow { color:var(--qp-brand-light); }
.mel-guide-cover .mel-lead { max-width:44ch; }
.mel-guide-cover .mel-links a { color:var(--qp-canvas); }
.mel-guide-meta { display:flex; flex-wrap:wrap; gap:var(--sp-4) var(--sp-6); margin-top:var(--sp-7); font-size:var(--type-small); color:var(--qp-on-dark-soft); }
.mel-guide-nav { display:flex; flex-wrap:wrap; gap:var(--sp-4) var(--sp-6); padding-top:var(--sp-5); padding-bottom:var(--sp-5); border-bottom:1px solid var(--qp-ink); }
.mel-guide-nav a { color:var(--qp-ink); font-size:var(--type-small); text-decoration:none; }
.mel-guide-nav a:hover { text-decoration:underline; }
.mel-guide-section { padding:var(--sp-9) 0; scroll-margin-top:100px; }
.mel-guide-section:nth-of-type(even) { background:var(--qp-canvas); }
.mel-guide-intro { max-width:64ch; margin-bottom:var(--sp-7); }
.mel-foundation { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--sp-7); margin:var(--sp-7) 0; }
.mel-foundation > div { border-left:1px solid var(--qp-brand); padding-left:var(--sp-5); }
.mel-mood { display:flex; flex-wrap:wrap; gap:var(--sp-3); margin-bottom:var(--sp-6); }
.mel-mood span { background:var(--qp-canvas); padding:var(--sp-3) var(--sp-5); border-radius:var(--radius-pill); }
.mel-guide .dg-brand-logos { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:var(--sp-4); }
.mel-guide .dg-brand-logos figure { margin:0; min-width:0; border:1px solid var(--qp-ink); border-radius:4px; overflow:hidden; background:var(--qp-canvas-soft); }
.mel-guide .dg-brand-logo-canvas { display:flex; align-items:center; justify-content:center; min-height:200px; padding:var(--sp-6); }
.mel-guide .dg-brand-logo-canvas.is-dark { background:var(--qp-surface-dark); }
.mel-guide .dg-brand-logo-canvas img { max-width:100%; width:auto; max-height:120px; height:auto; }
.mel-guide .dg-brand-logos figcaption { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; padding:var(--sp-5); gap:var(--sp-4); }
.mel-guide .dg-brand-logos h3 { font:600 1rem/1.5 var(--font-sans); margin:0; }
.mel-guide .dg-brand-logos p { font-size:var(--type-small); margin:var(--sp-1) 0 0; }
.mel-guide .dg-brand-logo-links { display:flex; gap:var(--sp-4); }
.mel-guide .dg-brand-logo-links a { color:var(--qp-ink); font-size:var(--type-small); text-decoration:underline; text-underline-offset:.25em; }
/* 8 photos, 4 columns, exactly 2 clean rows — a 5-column grid always left an
   odd, gapped last row. height:auto is not decorative here: WordPress writes
   a literal width/height attribute onto every <img>, and that attribute-based
   size wins over aspect-ratio unless height is explicitly overridden, which
   is why these were rendering as tall, oddly-cropped slivers instead of the
   3:2 landscape tiles aspect-ratio was already asking for. */
.mel-guide-photos { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--sp-5); }
.mel-guide-photos img { width:100%; height:auto; aspect-ratio:3/2; object-fit:cover; border-radius:var(--radius-card); }
.mel-guide-photos a { color:inherit; text-decoration:none; }
.mel-guide-photos span { display:block; margin-top:var(--sp-3); }
.mel-pattern-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--sp-5); }
.mel-pattern-grid figure,.mel-icon-grid figure { margin:0; }
.mel-pattern-grid img { width:100%; aspect-ratio:3/2; object-fit:cover; }
.mel-icon-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:var(--sp-7) var(--sp-4); }
.mel-icon-grid img { display:block; width:28px; height:28px; margin-bottom:var(--sp-3); }
.mel-icon-grid figcaption { overflow-wrap:anywhere; }
/* Every swatch is a bordered card — swatch, then a divider, then a bold
   caps usage line — so a white or near-white fill (canvas-soft, cta-light,
   primary-5, grey-5...) never just disappears against the page. The stroke
   is not optional here; it's what makes this read as one system instead of
   a pile of loose colour rectangles. */
.mel-colours { display:flex; flex-wrap:wrap; gap:var(--sp-4); margin:var(--sp-5) 0 var(--sp-8); }
.mel-colours .dg-chip { flex:1 1 150px; min-width:0; margin:0; border:1px solid var(--qp-hairline-strong); border-radius:var(--radius-card); overflow:hidden; background:var(--qp-surface-card); }
.mel-colours--greys { flex-wrap:nowrap; overflow-x:auto; padding-bottom:var(--sp-3); }
.mel-colours--greys .dg-chip { min-width:150px; }
.mel-guide .dg-chip__fill { height:100px; border-bottom:1px solid var(--qp-hairline-strong); }
.mel-guide .dg-chip__meta { display:flex; flex-direction:column; gap:var(--sp-1); padding:var(--sp-4); }
.mel-guide .dg-chip__name { font-weight:600; }
.mel-guide :is(.dg-chip__hex,.dg-chip__token) { font-family:monospace; font-size:var(--type-small); color:var(--qp-muted); overflow-wrap:anywhere; }
.mel-guide .dg-chip__role { display:block; margin-top:var(--sp-2); padding-top:var(--sp-2); border-top:1px solid var(--qp-hairline); font-size:var(--type-micro); font-weight:700; letter-spacing:var(--ls-wide-xs); text-transform:uppercase; color:var(--qp-muted); }
.mel-type-row { display:grid; grid-template-columns:minmax(0,1fr) minmax(220px,.7fr); gap:var(--sp-7); padding:var(--sp-6) 0; align-items:center; }
.mel-type-label { font:600 var(--type-small)/1.5 var(--font-sans); margin:0 0 var(--sp-4); }
.mel-type-info { color:var(--qp-body); font:400 var(--type-small)/1.6 var(--font-sans); overflow-wrap:anywhere; }
.mel-type-info p { margin:var(--sp-2) 0; }
.mel-type-sample > [data-type-sample]:not(.btn) { margin:0; color:var(--qp-ink); }
.mel-type-sample .hero__lead { max-width:100%; }
.mel-space-grid { display:flex; flex-wrap:wrap; gap:var(--sp-6); margin:var(--sp-6) 0 var(--sp-8); }
.mel-space-grid > div { display:flex; flex-direction:column; width:135px; gap:var(--sp-2); }
.mel-space-grid span { height:24px; background:var(--qp-primary-3); display:block; }
.mel-space-grid small { overflow-wrap:anywhere; }
.mel-radius-grid { display:flex; flex-wrap:wrap; gap:var(--sp-7); margin:var(--sp-6) 0 var(--sp-8); }
.mel-radius-grid span { display:block; width:96px; height:80px; background:var(--qp-primary-3); margin-bottom:var(--sp-4); }
.mel-button-demo { display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-5); }
@media(max-width:1100px) {
 .mel-guide .dg-brand-logos { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media(max-width:900px) {
 .mel-guide .dg-brand-logos { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .mel-foundation { grid-template-columns:1fr; }
 .mel-foundation > div { border:0; padding:0; }
 .mel-guide-photos { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .mel-icon-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media(max-width:600px) {
 .mel-guide-cover { padding:var(--sp-8) 0; }
 .mel-guide .dg-brand-logos { grid-template-columns:1fr; }
 .mel-type-row { grid-template-columns:minmax(0,1fr); gap:var(--sp-4); }
 .mel-pattern-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .mel-guide-photos { gap:var(--sp-4); }
 .mel-guide-nav { gap:var(--sp-3) var(--sp-5); }
}

/* Clean project reading pages; original poems and credits remain.
   No max-width of its own: it sits inside .container and should fill the
   same box the hero and the More-from section use, not a narrower column
   with its own left/right edges. */
.mel-project { max-width:none; }
.mel-project > p, .mel-project > .mel-lead { max-width: 760px; }
.mel-project h2,.mel-project h3 { font-family:var(--font-display); font-weight:400; }
.mel-project img { display:block; max-height:650px; object-fit:contain; }
/* Text beside its image instead of stacked above it. Photo always on the
   left, text always on the right — every track, no alternating. The
   --reverse modifier below is what used to alternate this; it's still
   harmless to leave on a block (order:1/order:2 there agrees with the
   order:0/order:1 here on which side is which), but nothing new should add
   it going forward. */
.mel-project-split { display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-8); align-items:center; margin:0 0 var(--sp-6); }
.mel-project-split__media { order:0; }
.mel-project-split__text { order:1; }
.mel-project-split__text p { max-width:none; }
/* height:auto matters here: WordPress writes the image's real width/height as
   HTML attributes, and width:100% alone lets the browser use the literal
   height attribute once the width is scaled down — same bug as the Design
   Guidelines photo grid. On Spákonufell that turned a 1400x1400 source photo
   into a 1400px-tall box even after its width shrank to fit the column,
   stretching the whole split row and reading as a giant gap in the section. */
.mel-project-split__media img { max-height:none; width:100%; height:auto; margin:0; }
@media (max-width:760px) { .mel-project-split { grid-template-columns:1fr; } }
/* Smaller inline photo, paired with its own track's writing rather than the
   full-bleed cover treatment the album-level split uses. */
.mel-project-split--compact .mel-project-split__media img { max-width:280px; margin:0 auto; border-radius:var(--radius-card); }
/* Alternates the pair: image and text swap sides from one track to the next. */
.mel-project-split--reverse .mel-project-split__text { order:2; }
.mel-project-split--reverse .mel-project-split__media { order:1; }

/* Was a <details>/<summary> disclosure — the album was hidden behind the
   browser's native triangle marker until clicked, so a page about the music
   opened with no music on it. Changed September 12, 2026, then rebuilt into
   two columns September 13: writeup on the left, player on the right,
   instead of a full-width heading-and-player with the writeup stacked
   somewhere below it. Every project page (Wildroot & Amber, Spákonufell,
   Talking to the Trees) uses this same shape now. */
.mel-project-listen {
  display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-8); align-items:start;
  margin:0 0 var(--sp-8);
}
.mel-project-listen__player h2 { margin:0 0 var(--sp-4); }
.mel-project-listen__player iframe { display:block; width:100%; }
/* Spákonufell pairs its cover art with the player, stacked above it, since
   that page (unlike Wildroot & Amber and Talking to the Trees) has a cover
   image but no per-track splits to put it in. height:auto for the same
   reason as .mel-project-split__media img above. */
.mel-project-listen__player img { display:block; width:100%; height:auto; border-radius:var(--radius-card); margin:0 0 var(--sp-5); }
.mel-project-listen__text .mel-lead { margin-top:var(--sp-3); }
@media (max-width:760px) { .mel-project-listen { grid-template-columns:1fr; } }
.mel-project a { overflow-wrap:anywhere; }

/* Wildroot & Amber rebuild, September 12, 2026. The intro line and the
   Angela Luo credit used to sit in one long undifferentiated dump at the
   bottom of the page, after every track split — nothing tied them to the
   track images above. Now: a short lead under the hero, a bordered credit
   block once (not repeated per track), and each track's poem lives inside
   that track's own split, beside its own photo. */
.mel-project-intro { max-width:640px; margin:0 0 var(--sp-7); }
.mel-project-intro .mel-lead { margin-top:var(--sp-3); }

.mel-project-credit {
  max-width:640px; margin:0 0 var(--sp-8); padding:var(--sp-6) 0;
  border-top:1px solid var(--qp-hairline); border-bottom:1px solid var(--qp-hairline);
}
.mel-project-credit h2 { font-size:var(--type-h4); margin:0 0 var(--sp-3); }
.mel-project-credit p { color:var(--qp-muted); font-size:var(--type-small); }

/* Poems read as poems: a narrow measure so lines break where Lara put them
   rather than re-wrapping to the column's full width, and each fragment's
   label set off above its lines instead of run in with them. "the pulse"
   fragments are the one recurring refrain across every track, so they're the
   one visual variant — italic — rather than a fifth heading style. */
.mel-poem { max-width:46ch; margin-top:var(--sp-6); }
.mel-poem p { margin:0 0 var(--sp-5); line-height:1.7; }
.mel-poem p strong {
  display:block; margin-bottom:var(--sp-2);
  font-size:var(--type-micro); font-weight:700; letter-spacing:var(--ls-wide-xs);
  text-transform:uppercase; color:var(--qp-muted);
}
.mel-poem__pulse { font-style:italic; }

/* Each track's poem collapses behind a toggle — five full fragment suites
   shown open at once made the page very long. Custom summary marker (a
   plain +/− swap) instead of the browser's default triangle, same reasoning
   as the Bandcamp "arrow" removed earlier: a deliberate, styled affordance
   reads as part of the page; the native marker reads as an accident. */
.mel-poem-toggle { margin-top:var(--sp-5); max-width:46ch; }
.mel-poem-toggle summary {
  cursor:pointer; list-style:none; display:flex; align-items:center; gap:var(--sp-2);
  font-size:var(--type-small); font-weight:700; letter-spacing:var(--ls-wide-xs);
  text-transform:uppercase; color:var(--qp-cta-dark);
}
.mel-poem-toggle summary::-webkit-details-marker { display:none; }
.mel-poem-toggle summary::before { content:'+'; font-size:1rem; font-weight:400; line-height:1; }
.mel-poem-toggle[open] summary::before { content:'\2212'; }
.mel-poem-toggle[open] summary { margin-bottom:var(--sp-2); }
.mel-poem-toggle .mel-poem { margin-top:var(--sp-4); }

/* Root of Memory has no cover image of its own yet, so it closes the page as
   a plain poem rather than forcing a split layout around an empty column. */
.mel-project-solo { max-width:46ch; margin:var(--sp-9) auto 0; }
.mel-project-solo h2 { margin-bottom:var(--sp-2); }

/* Collaborator credits: circular photo, name, short bio. 4 columns, as many
   rows as the list needs. A person with no supplied photo gets a plain
   initial disc rather than a missing-image icon. */
.mel-credits-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--sp-7) var(--sp-5); margin:var(--sp-6) 0 var(--sp-8); }
.mel-credit { text-align:center; }
.mel-credit .mel-credit__photo,
.mel-credit .mel-credit__photo--placeholder { width:120px; height:120px; margin:0 auto var(--sp-4); }
.mel-credit img.mel-credit__photo { border-radius:var(--radius-circle); object-fit:cover; max-height:none; }
.mel-credit__photo--placeholder {
  display:flex; align-items:center; justify-content:center;
  border-radius:var(--radius-circle); background:var(--qp-primary-4);
  font-family:var(--font-display); font-size:var(--type-h3); color:var(--qp-primary-1);
}
.mel-credit h3 { font-size:var(--type-h4); margin:0 0 var(--sp-2); }
.mel-credit p { font-size:var(--type-small); line-height:var(--type-small-lh); color:var(--qp-body); margin:0; }
@media (max-width:760px) { .mel-credits-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* page-project.php nav: same "transparent over the photo, solid once scrolled"
   handling site.css already gives single-post.php, at the same selector
   specificity as body.nav-solid .nav so it actually wins instead of tying
   with it. functions.php adds .nav-solid to every interior page. */
body.page-template-page-project-php.nav-solid .nav {
  background: linear-gradient(to bottom, rgba(12, 10, 9, .42), transparent);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
body.page-template-page-project-php.nav-solid .nav .nav__logo-light { display: block; }
body.page-template-page-project-php.nav-solid .nav .nav__logo-dark { display: none; }
body.page-template-page-project-php.nav-solid .nav.scrolled {
  background: var(--qp-white-solid);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
body.page-template-page-project-php.nav-solid .nav.scrolled .nav__logo-light { display: none; }
body.page-template-page-project-php.nav-solid .nav.scrolled .nav__logo-dark { display: block; }
body.page-template-page-project-php.nav-solid .nav .nav__contact {
  background: transparent;
  border-color: var(--qp-on-dark-muted);
}
body.page-template-page-project-php.nav-solid .nav .nav__contact img { filter: brightness(0) invert(1); }
body.page-template-page-project-php.nav-solid .nav.scrolled .nav__contact,
body.page-template-page-project-php.nav-solid .nav.scrolled .nav__contact:hover {
  background: var(--qp-cta);
  border-color: var(--qp-cta-dark);
}
body.page-template-page-project-php.nav-solid .nav.scrolled .nav__contact img { filter: brightness(0); }

.hero + .page-main { padding-top: var(--sp-8); }
/* Experiment: one supplied texture, washed almost to nothing, behind the
   "More from" shelf on project pages — the only place on the site trying a
   pattern so far. Cards sit on top and mostly cover it; it only really shows
   in the gaps and the padding above the grid. Drop the background-image line
   to back this out if it doesn't earn its place. */
.mel-project-more {
  margin-top: var(--sp-10); padding-top: var(--sp-9); border-top: 1px solid var(--qp-hairline);
  background-image: linear-gradient(rgba(255,255,255,.92), rgba(255,255,255,.92)), url('assets-Patterns/thumbs/005.webp');
  background-size: auto, 260px;
}

/* Project hero: bottom-left eyebrow/title/excerpt over a short bottom
   gradient — the image reads clearly everywhere except a band behind the
   text, not the near-full-height wash .hero__bg--photo uses by default.
   .hero__body keeps the same box as .container (no override on its own
   width/centering) so its left edge lines up with the rest of the page;
   only the text inside is left-aligned instead of centred.

   A later "Hero — Mel overrides" block (below, for the homepage) redeclares
   bare .hero with justify-content:center and wins the tie against the base
   rule by source order. .hero--project.hero (two classes on the same
   element) is more specific than either, so this wins regardless of order
   and the homepage's own hero is untouched. */
.hero--project.hero { justify-content: flex-end; padding-bottom: var(--sp-11); min-height: 50vh; }
.hero--project .hero__bg--photo {
  background-image:
    linear-gradient(to top,
      rgba(12, 10, 9, .88) 0%,
      rgba(12, 10, 9, .55) 22%,
      transparent 48%),
    var(--hero-image, none);
}
.hero--project .hero__body {
  text-align: left;
}
.hero--project .hero__body > * {
  margin-left: 0;
  max-width: 640px;
}
/* Title, not Display: a project page is a page title, not the homepage.
   .mel-title is the system's Title role (fluid, well under Display's fixed
   112px) — it just needs colour and legibility restored for sitting on a
   photo, which the plain on-light role doesn't carry. */
.hero--project .mel-title { color: var(--qp-canvas); margin-bottom: var(--sp-3); }
.hero--project .mel-title,
.hero--project .hero__lead { text-shadow: 0 2px 14px rgba(12, 10, 9, .6); }

.mel-meta { font-weight:400; }

/* Center the residency introduction without changing its story layouts. */
#music > .container > .mel-section-intro { text-align:center; margin-inline:auto; }
#music > .container > .mel-section-intro .body-copy { margin-inline:auto; }
.mel-record .audio-embed { width:100%; max-width:100%; }
.mel-record .audio-embed__player { display:block; width:100%; border:0; }

/* Homepage tonal progression: each section is lighter than the last. */
body.home #intro { background:var(--qp-home-intro); }
body.home #music { background:var(--qp-home-residencies); }
body.home #making { background:var(--qp-home-making); }
body.home #recordings { background:var(--qp-home-listening); }
body.home #journal { background:var(--qp-home-journal); }
body.home .mel-follow { background:var(--qp-home-follow); }
body.home .mel-section,
body.home .mel-follow { color:var(--qp-canvas-soft); }
body.home .mel-section :is(.body-copy,.mel-lead,.mel-meta),
body.home .mel-follow p:not(.eyebrow):not(.footer__copy) { color:var(--qp-canvas); }
body.home .mel-section .eyebrow,
body.home .mel-follow .eyebrow { color:var(--qp-mint); }
body.home .mel-section :is(.mel-links a,.mel-meta a) { color:var(--qp-canvas-soft); }

#music > .container > .mel-section-intro { margin-bottom:0; }

/* Editorial hierarchy: restrained section headings and compact album update. */
.mel-section-title { font-family:var(--font-display); font-weight:400; text-wrap:balance; }
.mel-section-title { font-size:var(--type-h2); line-height:var(--type-h2-lh); letter-spacing:var(--ls-tight-xs); margin:0 0 var(--sp-5); }
.mel-story-title { letter-spacing:var(--ls-tight-xs); text-wrap:balance; }
.mel-section :is(.body-copy,.mel-lead) { max-width:54ch; }
.mel-section .body-copy p:last-child { margin-bottom:0; }
.mel-section .eyebrow { margin-bottom:var(--sp-4); }
#music,#making { padding-block:var(--space-section-compact); }
.mel-practice-grid { margin-block:var(--sp-7); }
.mel-heading { text-wrap:balance; }
body.home .mel-follow { padding-block:var(--space-section-compact); }
@media(min-width:801px) {
 .mel-record .audio-embed { min-height:720px; }
}
@media(max-width:800px) {
 .mel-story__copy { order:-1; }
 .mel-story--reverse .mel-story__image { order:0; }
 .mel-record { width:100%; max-width:350px; margin-inline:auto; }
}

#intro .mel-heading,#journal > .container > .mel-section-intro > .mel-heading { margin-top:0; margin-bottom:var(--sp-5); }