/* Local typography study. All editorial changes scoped below the approved hero. */
body.mel-study .mel-editorial .mel-section { padding-block:clamp(80px,10vw,160px); }
body.mel-study .mel-editorial .container { max-width:1280px; }
body.mel-study .mel-editorial .eyebrow { font-size:11px; letter-spacing:.16em; font-weight:400; margin-bottom:28px; }
body.mel-study .mel-editorial .body-copy { font-size:16px; line-height:1.85; max-width:43ch; font-weight:300; }
body.mel-study .mel-editorial .body-copy p+p { margin-top:1.25em; }
body.mel-study #intro .mel-heading { font-size:clamp(42px,5.4vw,76px); line-height:1.06; letter-spacing:-.025em; margin-bottom:36px; }
body.mel-study #intro .mel-introduction { grid-template-columns:1.2fr 1fr; gap:9vw; align-items:center; }
body.mel-study #intro .mel-portrait { max-width:440px; }
body.mel-study #music .mel-section-title { font-size:clamp(48px,6.7vw,94px); line-height:1.04; letter-spacing:-.028em; margin-bottom:32px; }
body.mel-study #music .mel-section-intro { max-width:900px; }
body.mel-study .mel-story { grid-template-columns:1fr 1fr; gap:clamp(48px,7vw,100px); align-items:center; }
body.mel-study .mel-story-title { font-size:clamp(56px,6.8vw,96px); font-weight:300; line-height:.98; letter-spacing:-.035em; margin:0 0 32px; text-wrap:initial; }
body.mel-study #mel-japan-title { max-width:7ch; }
body.mel-study .mel-story .mel-lead { font-family:var(--font-display); font-size:clamp(25px,2.5vw,34px); line-height:1.25; font-weight:300; margin-bottom:28px; }
body.mel-study .mel-story__image img { border-radius:2px; }
body.mel-study #japan .mel-story__image img { aspect-ratio:4/5; object-fit:cover; }
body.mel-study #iceland .mel-story-title { font-size:clamp(52px,6.1vw,86px); }
body.mel-study .mel-editorial .mel-links { margin-top:34px; }
body.mel-study .mel-editorial .mel-links a { font-size:12px; letter-spacing:.03em; padding-bottom:8px; border-bottom:1px solid #ffffff50; text-decoration:none; }
body.mel-study #making .mel-section-title,body.mel-study #recordings .mel-section-title { font-size:clamp(42px,5vw,68px); line-height:1.08; }
body.mel-study #journal > .container > .mel-section-intro > .mel-heading { font-size:clamp(38px,4.5vw,60px); line-height:1.12; }
@media(max-width:800px) {
 body.mel-study #intro .mel-introduction,body.mel-study .mel-story { grid-template-columns:1fr; gap:40px; }
 body.mel-study .mel-editorial .body-copy { font-size:16px; }
 body.mel-study #mel-japan-title { max-width:9ch; }
 body.mel-study #iceland .mel-story-title { font-size:clamp(42px,10vw,65px); }
}

/* September 12: drifting photographs, quieter type, continuous atmosphere. */
body.mel-study .nav { position:absolute; top:0; background:transparent; backdrop-filter:none; }
body.mel-study .nav.scrolled { background:transparent; backdrop-filter:none; }
body.mel-study .nav .nav__logo-light { display:block; }
body.mel-study .nav .nav__logo-dark { display:none; }
body.mel-study .nav .nav__contact { background:transparent; border-color:#ffffff50; }
body.mel-study .nav .nav__contact img { filter:brightness(0) invert(1); }
body.mel-study .hero__field { filter:saturate(.36) sepia(.12) brightness(.73) contrast(.92); opacity:.82; mask-image:linear-gradient(to bottom,black 55%,#000b 80%,transparent 100%); }
body.mel-study .hero { background:#181615; }
body.mel-study .mel-editorial { background:linear-gradient(#181615 0%,#282625 40%,#3c3a39 75%,#484645 100%); overflow:clip; }
body.mel-study .mel-editorial .mel-section { background:transparent; padding-block:clamp(5rem,10vw,9rem); }
body.mel-study .mel-editorial .eyebrow,body.mel-study .mel-follow .eyebrow { display:none; }
body.mel-study #intro .mel-heading { font-size:clamp(2.6rem,4.25vw,3.8rem); font-weight:300; line-height:1.1; letter-spacing:-.02em; margin-bottom:2rem; }
body.mel-study #music .mel-section-title { font-size:clamp(2.8rem,5.2vw,4.7rem); line-height:1.08; letter-spacing:-.022em; }
body.mel-study .mel-story-title { font-size:clamp(3rem,5.35vw,4.8rem); line-height:1.04; letter-spacing:-.025em; font-weight:300; margin-bottom:1.6rem; }
body.mel-study #mel-japan-title { max-width:9ch; }
body.mel-study #iceland .mel-story-title { font-size:clamp(2.8rem,5.15vw,4.6rem); }
body.mel-study .mel-story .mel-lead { font-size:clamp(1.35rem,2vw,1.7rem); line-height:1.4; margin-bottom:1.8rem; max-width:29ch; }
body.mel-study .mel-editorial .body-copy { line-height:1.8; max-width:42ch; }
body.mel-study .mel-editorial .mel-links a { font-size:.875rem; letter-spacing:0; }
body.mel-study #making .mel-section-title,body.mel-study #recordings .mel-section-title { font-size:clamp(2.4rem,4.3vw,3.6rem); line-height:1.12; max-width:21ch; }
body.mel-study #journal > .container > .mel-section-intro > .mel-heading { font-size:clamp(2.3rem,3.9vw,3.3rem); }
body.mel-study .mel-story,body.mel-study .mel-introduction { position:relative; isolation:isolate; }
body.mel-study .mel-story__image,body.mel-study .mel-portrait { position:relative; z-index:1; }
body.mel-study .mel-story__copy,body.mel-study .mel-introduction__copy { position:relative; z-index:2; }
body.mel-study .mel-story__image img,body.mel-study .mel-portrait img { filter:saturate(.65) contrast(.94); }
.cinema-fragment { display:none; }
body.mel-study .cinema-fragment { display:block; position:absolute; z-index:0; width:17%; aspect-ratio:4/5; object-fit:cover; pointer-events:none; opacity:.17; filter:saturate(.25) brightness(.7) blur(1px); border-radius:2px; }
body.mel-study .cinema-fragment--near { left:-5%; top:-13%; }
body.mel-study .cinema-fragment--far { right:-6%; bottom:-10%; width:12%; opacity:.1; filter:saturate(.2) brightness(.6) blur(2px); }
body.mel-study .cinema-image { transform:translate3d(0,var(--cinema-y,0px),0) rotate(var(--cinema-angle,0deg)) scale(var(--cinema-scale,1)); transform-origin:50% 50%; }
body.mel-study .cinema-copy { transform:translate3d(0,var(--cinema-copy-y,0px),0); }
@media(max-width:800px) {
 body.mel-study .cinema-fragment--near { width:26%; top:-4%; left:-7%; }
 body.mel-study .cinema-fragment--far { width:20%; right:-8%; bottom:-5%; }
 body.mel-study .mel-story-title { font-size:clamp(2.9rem,10vw,4rem); }
 body.mel-study #iceland .mel-story-title { font-size:clamp(2.6rem,9vw,4rem); }
}
@media(prefers-reduced-motion:reduce) {
 body.mel-study .cinema-image,body.mel-study .cinema-copy { transform:none; }
 body.mel-study .cinema-fragment { display:none; }
}

/* Brighter hero, one photo radius, and scroll-led chapter transitions. */
body.mel-study { --mel-photo-radius:10px; }
body.mel-study .hero__field { filter:saturate(.82) contrast(1.04) brightness(1.05); opacity:1; mask-image:linear-gradient(to bottom,black 85%,#000c 95%,transparent 100%); }
body.mel-study .mel-editorial img { border-radius:var(--mel-photo-radius); }
.scroll-word { display:inline; }
body.mel-study .scroll-word { opacity:var(--word-opacity,1); }
.chapter-sequence { display:none; }
body.mel-study .chapter-sequence { display:block; height:180vh; position:relative; margin-top:3rem; }
body.mel-study .chapter-sequence__stage { position:sticky; top:7vh; height:86vh; display:grid; grid-template-columns:1fr minmax(0,1.5fr) 1fr; align-items:center; gap:3vw; }
.chapter-sequence__photos { position:relative; height:min(62vh,570px); }
.chapter-sequence__photo { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform-origin:50% 90%; box-shadow:0 20px 60px #0003; }
.chapter-sequence__photo:first-child { z-index:2; }
.chapter-sequence__photo:last-child { transform:rotate(4deg) scale(.96); }
/* No longer a link (it duplicated "Explore the project" below it) - plain
   heading, real <h2> now instead of a div so it matches the intro's heading
   level. */
/* Same size as the intro's "A violin, a voice." heading (#intro .mel-heading
   below) so the two big statements on this page read at one consistent
   scale, not two. */
.chapter-sequence__title { font:300 clamp(2.6rem,4.25vw,3.8rem)/1.1 var(--font-display); letter-spacing:-.02em; color:inherit; }
.chapter-sequence__caption { font:300 1rem/1.7 var(--font-sans); max-width:22ch; }
@media(max-width:800px) {
 body.mel-study .chapter-sequence { height:160vh; }
 body.mel-study .chapter-sequence__stage { grid-template-columns:1fr; grid-template-rows:auto minmax(0,1fr) auto; height:80svh; top:10svh; gap:1.5rem; }
 .chapter-sequence__photos { height:100%; width:85%; margin:auto; }
 .chapter-sequence__title,.chapter-sequence__caption { text-align:center; margin:0 auto; max-width:30ch; }
}
@media(prefers-reduced-motion:reduce) {
 body.mel-study .scroll-word { opacity:1; }
 body.mel-study .chapter-sequence { height:auto; }
 body.mel-study .chapter-sequence__stage { position:static; height:auto; display:block; }
 body.mel-study .chapter-sequence__photos { display:grid; grid-template-columns:1fr 1fr; gap:1rem; height:auto; width:100%; margin:2rem 0; }
 body.mel-study .chapter-sequence__photo { position:static; transform:none!important; opacity:1!important; height:auto; aspect-ratio:4/5; }
 .chapter-sequence__title,.chapter-sequence__caption { max-width:none; text-align:center; }
}

/* Three-project integration, retained alongside the original sections for review. */
body.mel-study .chapter-sequence { height:260vh; }
body.mel-study #trees .mel-story-title { font-size:clamp(2.8rem,4.8vw,4.3rem); max-width:11ch; }
body.mel-study #trees .mel-story__image img { aspect-ratio:4/5; object-fit:cover; }
@media(max-width:800px) { body.mel-study .chapter-sequence { height:240vh; } }
@media(prefers-reduced-motion:reduce) {
 body.mel-study .chapter-sequence { height:auto; }
 body.mel-study .chapter-sequence__photos { grid-template-columns:repeat(3,minmax(0,1fr)); }
}

/* Project writing now lives with the cards rather than in duplicate sections. */
body.mel-study .chapter-sequence__stage { grid-template-columns:.85fr minmax(0,1.35fr) 1fr; gap:3vw; }
.chapter-sequence__caption { max-width:32ch; }
.chapter-lead { font:300 clamp(1.25rem,1.75vw,1.65rem)/1.4 var(--font-display); margin:0 0 1rem; }
.chapter-excerpt { font:300 1rem/1.7 var(--font-sans); margin:1.25rem 0; }
.chapter-explore { display:inline-block; font:400 .875rem/1.5 var(--font-sans); color:inherit; text-decoration:none; border-bottom:1px solid #ffffff60; padding-bottom:5px; margin-top:.5rem; }
.chapter-explore:hover { border-color:currentColor; }
.chapter-explore:focus-visible { outline:2px solid currentColor; outline-offset:6px; }
.chapter-static { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:2.5rem; margin-block:3rem; }
.chapter-static article { min-width:0; }
.chapter-static img { width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; border-radius:10px; }
.chapter-static h2 { font:300 2rem/1.15 var(--font-display); margin:1.5rem 0; }
body.mel-study .chapter-static { display:none; }
@media(max-width:800px) {
 body.mel-study .chapter-sequence__stage { grid-template-columns:1fr; grid-template-rows:auto minmax(100px,1fr) auto; gap:1rem; height:88svh; top:4svh; }
 .chapter-sequence__caption { max-width:42ch; text-align:left; }
 .chapter-sequence__caption .chapter-lead { display:none; }
 .chapter-excerpt { line-height:1.6; margin:.5rem 0; }
 .chapter-static { grid-template-columns:1fr; }
}
@media(prefers-reduced-motion:reduce), (max-height:650px) {
 body.mel-study .chapter-sequence { display:none; }
 body.mel-study .chapter-static { display:grid; }
}

/* Listening room: one real player, three deliberate album choices. */
body.home #recordings.mel-listening { background:#222321; }
.listening-room { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr); gap:clamp(3rem,8vw,8rem); align-items:start; }
.listening-room__selection { padding-top:1.25rem; }
#recordings #mel-recordings-title { font:300 clamp(4rem,7.2vw,6.6rem)/1 var(--font-display); letter-spacing:-.035em; margin:0 0 1.5rem; }
.listening-invitation { font:300 1rem/1.6 var(--font-sans); color:#d5d7d2; margin:1.5rem 0 2.75rem; }
.listen-choices { border-top:1px solid #ffffff30; }
.listen-choice { display:flex; width:100%; gap:1rem; align-items:center; text-align:left; background:transparent; color:#c6c7c1; border:0; border-bottom:1px solid #ffffff30; padding:1.65rem .5rem; cursor:pointer; transition:color .2s,background .2s; }
.listen-choice__number { font:400 .75rem/1.5 var(--font-sans); opacity:.65; }
.listen-choice__name { font:300 clamp(1.5rem,2.3vw,2rem)/1.15 var(--font-display); flex:1; }
.listen-choice__status { font:400 .75rem/1.5 var(--font-sans); }
.listen-choice[aria-pressed=true] { color:#f5f5ef; background:#ffffff08; }
.listen-choice[aria-pressed=true] .listen-choice__status { color:#b4e5c3; }
.listen-choice:hover { color:white; background:#ffffff0c; }
.listen-choice:focus-visible,.listen-links a:focus-visible { outline:2px solid #b4e5c3; outline-offset:5px; }
.listen-details { margin-top:2rem; min-height:5rem; max-width:39ch; font:300 1rem/1.75 var(--font-sans); color:#d5d7d2; }
.listen-links { display:flex; gap:1.5rem; flex-wrap:wrap; margin-top:1.5rem; }
.listen-links a { font:400 .875rem/1.5 var(--font-sans); color:#ededed; text-decoration:none; border-bottom:1px solid #ffffff60; padding-bottom:5px; }
.listening-room__player { width:100%; max-width:420px; justify-self:end; overflow:hidden; border-radius:10px; background:#fff; box-shadow:0 24px 80px #0004; }
@media(max-width:800px) {
 .listening-room { grid-template-columns:1fr; gap:2.5rem; }
 .listening-room__selection { padding-top:0; }
 #recordings #mel-recordings-title { font-size:4rem; }
 .listen-choice { padding:1.2rem .25rem; }
 .listen-details { min-height:0; margin-top:1.5rem; }
 .listening-room__player { justify-self:center; }
 .listening-invitation { margin-bottom:1.75rem; }
}
@media(prefers-reduced-motion:reduce) { .listen-choice { transition:none; } }

/* Returning journal fragments drift through the outer margins. */
.falling-posts { position:fixed; inset:0; z-index:4; pointer-events:none; overflow:hidden; }
.falling-post { position:absolute; top:0; width:clamp(68px,7vw,116px); aspect-ratio:1; border-radius:10px; overflow:hidden; transform:translate3d(var(--fall-x,0px),var(--fall-y,-200px),0) rotate(var(--fall-angle,0deg)); opacity:.3; pointer-events:auto; transition:opacity .25s; color:white; box-shadow:0 8px 28px #0002; }
.falling-post img { width:100%; height:100%; object-fit:cover; filter:saturate(.65); }
.falling-post span { position:absolute; bottom:0; right:0; left:0; padding:24px 8px 8px; font:400 10px/1.3 Inter,sans-serif; text-align:right; background:linear-gradient(transparent,#000b); }
.falling-post:hover,.falling-post:focus-visible { opacity:1; outline:2px solid #eee; outline-offset:3px; }
@media(max-width:1099px),(prefers-reduced-motion:reduce) { .falling-posts { display:none; } }


/* Still introduction, slowly floating portrait. */
body.mel-study #intro .mel-introduction__copy { transform:none; }
body.mel-study #intro .scroll-word { opacity:1; }
body.mel-study #intro .mel-portrait { animation:mel-portrait-float 14s ease-in-out -3.5s infinite; transform-origin:center; }

@keyframes mel-portrait-float {
  0%,100% { transform:translate3d(-14px,24px,0) rotate(-1deg) scale(.985); }
  50% { transform:translate3d(16px,-26px,0) rotate(1deg) scale(1.015); }
}
@media(max-width:800px) {
 body.mel-study #intro .mel-portrait { animation-name:mel-portrait-float-small; }
 @keyframes mel-portrait-float-small {
  0%,100% { transform:translate3d(-4px,12px,0) rotate(-.4deg); }
  50% { transform:translate3d(4px,-12px,0) rotate(.4deg); }
 }
}
@media(prefers-reduced-motion:reduce) {
 body.mel-study #intro .mel-portrait { animation:none; transform:none; }
}

/* The portrait now follows gently varied destinations rather than a fixed loop. */
body.mel-study #intro .mel-portrait { animation:none; }


/* Blend the hero edge into the introduction instead of clipping into a band. */
body.mel-study .hero::after { content:""; position:absolute; inset:auto 0 0; height:clamp(100px,18vh,190px); background:linear-gradient(transparent,#181615); pointer-events:none; z-index:2; }
body.mel-study .hero__scroll { z-index:3; }


/* Return to a stronger floating movement, with no tilt. */
body.mel-study #intro .mel-portrait { animation:mel-portrait-float-open 14s ease-in-out -3.5s infinite; }
@keyframes mel-portrait-float-open {
  0%,100% { transform:translate3d(-22px,36px,0); }
  50% { transform:translate3d(22px,-36px,0); }
}
@media(max-width:800px) {
 body.mel-study #intro .mel-portrait { animation-name:mel-portrait-float-open-small; }
 @keyframes mel-portrait-float-open-small {
  0%,100% { transform:translate3d(-7px,20px,0); }
  50% { transform:translate3d(7px,-20px,0); }
 }
}
@media(prefers-reduced-motion:reduce) { body.mel-study #intro .mel-portrait { animation:none; transform:none; } }


/* Independent wandering photos; captions retain their fixed reading position. */
body.mel-study #intro .mel-portrait { animation:none; }
#journal .mel-note-image { display:block; }
/* Bring the date and title up snug against the photo instead of floating
   below it, and tighten the gap between the date and its title. */
#journal .mel-journal-grid .mel-meta { margin-top:1rem; }
#journal .mel-journal-grid .mel-heading { margin-top:.4rem; }
@media(prefers-reduced-motion:reduce) {
 body.mel-study #intro .mel-portrait,body.mel-study #journal .mel-note-image { transform:none!important; }
}

/* Depth scales around each photograph’s centre, without moving the text layout. */
body.mel-study #intro .mel-portrait,body.mel-study #journal .mel-note-image { transform-origin:50% 50%; }

/* The introduction becomes a second hero photo field, with click-to-enlarge images. */
body.mel-study #intro.intro-gallery { position:relative; isolation:isolate; min-height:100svh; padding:0; overflow:hidden; }
body.mel-study #intro.intro-gallery .mel-introduction { display:flex; justify-content:center; align-items:center; min-height:100svh; padding-block:8rem; pointer-events:none; }
body.mel-study #intro.intro-gallery .mel-introduction__copy { width:min(100%,620px); text-align:center; position:relative; z-index:2; padding:2rem; background:radial-gradient(ellipse,#181615f5 25%,#181615cc 58%,#18161500 75%); }
body.mel-study #intro.intro-gallery .body-copy { margin-inline:auto; }
body.mel-study #intro.intro-gallery .mel-links { justify-content:center; pointer-events:auto; }
.intro-photo-field { position:absolute; inset:0; z-index:0; }
.intro-photo { position:absolute; transform:translate(-50%,-50%); border:1px solid #ffffff30; border-radius:10px; padding:0; background:transparent; overflow:hidden; cursor:pointer; }
.intro-photo img { display:block; width:100%; height:100%; object-fit:cover; filter:blur(var(--depth-blur,0px)); }
.intro-photo:hover,.intro-photo:focus-visible { border-color:#ffffffd0; outline:1px solid #fff8; }
.intro-photo:focus-visible { opacity:1!important; }
.intro-lightbox { padding:0; border:0; background:transparent; width:100vw; max-width:100vw; height:100dvh; max-height:100dvh; color:white; }
.intro-lightbox::backdrop { background:#0c0a09ee; backdrop-filter:blur(10px); }
.intro-lightbox[open] { display:grid; grid-template-columns:64px minmax(0,1fr) 64px; align-items:center; gap:1rem; padding:4rem 2rem 2rem; }
.intro-lightbox figure { margin:0; text-align:center; pointer-events:none; }
.intro-lightbox figure img { display:block; margin:auto; width:auto; max-width:100%; height:auto; max-height:80dvh; object-fit:contain; border-radius:10px; }
.intro-lightbox figcaption { margin-top:1rem; font:400 .875rem/1.4 var(--font-sans); }
.intro-lightbox button { width:48px; height:48px; border:1px solid #fff6; border-radius:50%; color:white; background:#181615; font-size:1.5rem; cursor:pointer; }
.intro-lightbox button:focus-visible { outline:2px solid white; outline-offset:4px; }
.intro-lightbox__close { position:absolute; right:24px; top:16px; }
body.mel-study #intro.intro-gallery--static .mel-introduction { min-height:auto; }
#intro.intro-gallery--static .intro-photo-field { position:relative; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; padding:2rem; }
#intro.intro-gallery--static .intro-photo { position:relative; transform:none; width:100%; aspect-ratio:1; }
@media(max-width:600px) {
 body.mel-study #intro.intro-gallery .mel-introduction__copy { padding:1.5rem 0; }
 body.mel-study #intro.intro-gallery .mel-introduction { min-height:90svh; }
 body.mel-study #intro.intro-gallery .body-copy { font-size:1rem; max-width:31ch; }
 .intro-lightbox[open] { grid-template-columns:40px minmax(0,1fr) 40px; padding:4rem .5rem 1rem; gap:.3rem; }
 .intro-lightbox button { width:36px;height:36px; }
 #intro.intro-gallery--static .intro-photo-field { grid-template-columns:repeat(2,minmax(0,1fr)); }
}


/* Compact introduction: copy on the left, a clear photo field on the right. */
body.mel-study #intro.intro-gallery { min-height:0; padding-block:clamp(3rem,6vw,5rem); }
body.mel-study #intro.intro-gallery .mel-introduction { display:grid; grid-template-columns:1fr 1fr; gap:6vw; min-height:0; padding-block:0; align-items:center; }
body.mel-study #intro.intro-gallery .mel-introduction__copy { grid-column:1; width:100%; padding:0; text-align:left; background:none; }
body.mel-study #intro.intro-gallery .body-copy { margin-inline:0; }
body.mel-study #intro.intro-gallery .mel-links { justify-content:flex-start; }
#intro.intro-gallery .intro-photo-field { position:relative; grid-column:2; grid-row:1; inset:auto; height:clamp(360px,37vw,520px); width:100%; overflow:hidden; }
#intro .intro-photo img { filter:none; }
#intro.intro-gallery--static .intro-photo-field { padding:0; height:auto; }
@media(max-width:800px) {
 body.mel-study #intro.intro-gallery .mel-introduction { grid-template-columns:1fr; gap:2rem; }
 body.mel-study #intro.intro-gallery .mel-introduction__copy { padding:0; }
 #intro.intro-gallery .intro-photo-field { grid-column:1; grid-row:2; height:320px; }
 body.mel-study #intro.intro-gallery .body-copy { max-width:42ch; }
 #intro.intro-gallery--static .intro-photo-field { height:auto; }
}


/* Let the field cross the column boundary; fade individual photos, not the column. */
body.mel-study #intro.intro-gallery:not(.intro-gallery--static) .intro-photo-field { overflow:visible; }
body.mel-study #intro.intro-gallery .mel-introduction__copy { z-index:2; }

/* Borderless composited photo surfaces prevent moving hairline trails (a
   border on a continuously-transformed element leaves a trailing hairline).
   Outline is unaffected by that and already proven safe here via
   :focus-visible, so hover reuses the same technique instead of border. */
#intro .intro-photo { border:0; outline:none; backface-visibility:hidden; will-change:transform,opacity; cursor:pointer; }
#intro .intro-photo:hover,
#intro .intro-photo:focus-visible { outline:2px solid white; outline-offset:3px; }
#intro .intro-photo img { border-radius:inherit; }


/* A deliberate dark-to-light progression across the complete homepage. */
body.mel-study #top { background:var(--qp-surface-dark); }
body.mel-study .mel-editorial { background:none; }
body.mel-study #intro.intro-gallery { background:var(--qp-home-intro); }
body.mel-study #music { background:var(--qp-home-residencies); }
body.mel-study #making { background:var(--qp-home-making); }
body.mel-study #recordings.mel-listening { background:var(--qp-home-listening); }
body.mel-study #journal { background:var(--qp-home-journal); }
/* This section is now the true bottom of the page — the footer bar it used
   to hand off to is gone on the front page (its wordmark + copy line moved
   into .mel-closing__col--identity below), so it sits on the final tone
   directly (--qp-home-footer) instead of the mid tone with a gradient down
   to a footer that no longer follows it. Padding tightened September 12,
   2026 alongside the two-column rebuild — a stacked heading-then-buttons-
   then-footer layout needed more breathing room than two columns that share
   a single row do. */
body.home #listen.mel-closing { background:var(--qp-home-footer); color:#fafafa; padding-block:clamp(2.5rem,5vw,4rem); text-align:left; }

/* Same bottom-edge blend as .hero::after, carried down every section so one
   colour dissolves into the next instead of cutting hard at the boundary.
   #listen.mel-closing is not part of this chain: it is the last section, so
   there is nothing below it to blend into. */
body.mel-study #intro.intro-gallery,
body.mel-study #music,
body.mel-study #making,
body.mel-study #recordings.mel-listening,
body.mel-study #journal { position:relative; }
body.mel-study #intro.intro-gallery::after,
body.mel-study #music::after,
body.mel-study #making::after,
body.mel-study #recordings.mel-listening::after,
body.mel-study #journal::after {
  content:""; position:absolute; inset:auto 0 0; height:clamp(100px,18vh,190px);
  pointer-events:none; z-index:1;
}
body.mel-study #intro.intro-gallery::after { background:linear-gradient(transparent,var(--qp-home-residencies)); }
body.mel-study #music::after { background:linear-gradient(transparent,var(--qp-home-making)); }
body.mel-study #making::after { background:linear-gradient(transparent,var(--qp-home-listening)); }
body.mel-study #recordings.mel-listening::after { background:linear-gradient(transparent,var(--qp-home-journal)); }
body.mel-study #journal::after { background:linear-gradient(transparent,var(--qp-home-follow)); }

/* The .mel-closing__* rules (the two-column CTA + footer-identity layout)
   used to live here, but this stylesheet only loads on the front page
   (see functions.php) and that layout is now the shared footer on every
   page — moved to site.css so interior pages get it too. See site.css's
   Footer section. */


/* Closing invitation uses the canonical section-heading role. */
#listen.mel-closing #cta-heading { font-family:var(--font-display); font-size:var(--type-h2); line-height:var(--type-h2-lh); font-weight:400; font-style:normal; letter-spacing:var(--ls-tight-xs); max-width:22ch; text-wrap:balance; }

/* A single generous film replaces the practice columns. */
#making .mel-performance-video { margin-top:clamp(32px,5vw,64px); aspect-ratio:16/9; overflow:hidden; border-radius:var(--mel-photo-radius,10px); background:#181615; }
#making .mel-performance-video iframe { display:block; width:100%; height:100%; border:0; border-radius:inherit; }
#making .mel-video-caption { display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; margin-top:18px; font-size:var(--type-body,1rem); }
#making .mel-video-caption a { color:inherit; text-underline-offset:6px; }

/* Let the hero dissolve into the introduction at the photo entrance edge. */
body.mel-study .hero { border-bottom:0; }
body.mel-study .hero::after { height:clamp(160px,28vh,320px); background:linear-gradient(to bottom,transparent 0%,#18161580 50%,#181615 100%); }
body.mel-study .hero__field { mask-image:linear-gradient(to bottom,black 66%,#000b 83%,transparent 100%); }

/* Small pill buttons, matching the closing CTA's Follow/Write/Listen row
   instead of a flat underlined text list. */
.mel-video-choices {display:flex;flex-wrap:wrap;gap:.6rem;margin-top:26px;}
.mel-video-choices button {font:400 .85rem/1.4 var(--font-sans);color:#fafafa;background:transparent;border:1px solid #ffffff4d;border-radius:var(--radius-pill);padding:.55rem 1.05rem;cursor:pointer;opacity:.75;transition:opacity .2s ease,border-color .2s ease,background .2s ease;}
.mel-video-choices button[aria-pressed=true] {opacity:1;border-color:#fafafa;background:#ffffff1a;}
.mel-video-choices button:hover,.mel-video-choices button:focus-visible {opacity:1;border-color:#fafafa;}

/* Photo buttons opt back into hit testing inside the transparent layout. */
#intro .intro-photo { pointer-events:auto; }