/* ==========================================================================
   Projects pages (until 19 Oct 2026 one page, work.html):
   page-specific layout only; components come from components.css.
   - artist-projects.html: hero (drifting wall of sleeves), artists marquee,
     the releases catalogue (format + genre filters, search, Flip grid; work.js)
   - music-videos.html: plain hero, the two videos (cinematic facades + text laurels)
   - partner-brands.html: plain hero, the brands (ink-2, logo plates)
   - music-sync.html: plain hero, the composers' work (cream)
   The three plain heroes share .pj-hero. Use contextual tokens (--fg, --rule, --accent).
   Static markup for releases / sync / brands is rendered by tools/work-render.js.
   ========================================================================== */

/* ---- Artist Projects hero ------------------------------------------------------ */
.work-hero {
  --tile: clamp(150px, max(16.5vw, 20vh), 320px);
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding-top: calc(var(--header-h) + 4rem);
  background: var(--ink); color: var(--cream);
}
.work-hero__wall { position: absolute; inset: 0; z-index: -3; overflow: hidden; }
.work-hero__rows {
  position: absolute; left: -12%; right: -12%; top: 47%;
  display: grid; gap: clamp(.7rem, 1.2vw, 1.25rem);
  transform: translateY(-50%) rotate(-7deg);
}
.wall-row { position: relative; }
.wall-row__track { display: flex; gap: clamp(.7rem, 1.2vw, 1.25rem); width: max-content; will-change: transform; }
.wall-row:nth-child(2) .wall-row__track { margin-left: calc(var(--tile) * -.55); }
.wall-row__img {
  flex: none; width: var(--tile); height: var(--tile); object-fit: cover;
  border-radius: 3px; background: var(--ink-3);
  filter: brightness(.5) saturate(.8) contrast(1.05);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 255, 255, .04);
}
/* the first layer darkens the band under the header and the section tabs, so the tabs read over the sleeves */
.work-hero__shade {
  position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(15, 13, 12, .55) 0, rgba(15, 13, 12, .55) var(--header-h), rgba(15, 13, 12, 0) calc(var(--header-h) + 5rem)),
    linear-gradient(180deg, rgba(15, 13, 12, .82) 0%, rgba(15, 13, 12, .28) 20%, rgba(15, 13, 12, .3) 40%, rgba(15, 13, 12, .88) 66%, var(--ink) 88%),
    linear-gradient(90deg, rgba(15, 13, 12, .55) 0%, rgba(15, 13, 12, 0) 55%),
    radial-gradient(50% 40% at 8% 100%, rgba(255, 106, 43, .22), rgba(255, 106, 43, 0) 70%),
    radial-gradient(40% 40% at 90% 18%, rgba(124, 204, 191, .14), rgba(124, 204, 191, 0) 70%);
}
.work-hero__hud {
  position: absolute; z-index: 1; top: calc(var(--header-h) + 22px); left: 0; right: 0;
  display: flex; justify-content: space-between; gap: 1rem;
  color: rgba(243, 235, 224, .78); text-shadow: 0 1px 14px rgba(15, 13, 12, .9);
}
.work-hero__content { position: relative; padding-bottom: clamp(1.6rem, 4vh, 3rem); }
.work-hero__title { text-shadow: 0 2px 40px rgba(15, 13, 12, .4); }   /* size: .t-hero (shared inner-page H1 scale) */
.work-hero__foot {
  display: grid; grid-template-columns: minmax(0, 40ch) auto; justify-content: space-between; align-items: end; gap: 1.5rem clamp(2rem, 5vw, 6rem);
  margin-top: clamp(1.4rem, 3.6vh, 2.6rem); padding-top: clamp(1rem, 2.4vh, 1.5rem);
  border-top: 1px solid rgba(243, 235, 224, .14);
}
.work-hero__lead { font-size: var(--fs-lead); line-height: 1.45; color: rgba(243, 235, 224, .86); }

@media (max-width: 1100px) {
  .work-hero__rows { top: 42%; }
  .work-hero__foot { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .work-hero { --tile: clamp(108px, 34vw, 170px); min-height: 0; padding-top: calc(var(--header-h) + 15rem); }
  .work-hero__rows { top: calc(var(--header-h) + 9.5rem); transform: translateY(-50%) rotate(-7deg); }
  .work-hero__shade {
    background:
      linear-gradient(180deg, rgba(15, 13, 12, .55) 0, rgba(15, 13, 12, .55) var(--header-h), rgba(15, 13, 12, 0) calc(var(--header-h) + 5rem)),
      linear-gradient(180deg, rgba(15, 13, 12, .7) 0%, rgba(15, 13, 12, .15) 18%, rgba(15, 13, 12, .4) 42%, rgba(15, 13, 12, .95) 62%, var(--ink) 78%),
      radial-gradient(70% 30% at 0% 100%, rgba(255, 106, 43, .2), rgba(255, 106, 43, 0) 70%);
  }
  .work-hero__hud { top: calc(var(--header-h) + 8px); }
  .work-hero__span { display: none; }
  .work-hero__lead { font-size: 1.04rem; }
}

/* ---- Plain hero (Music Videos, Partner Brands, Music Sync) -------------------------- */
.pj-hero {
  position: relative; isolation: isolate; overflow: hidden;
  padding: calc(var(--header-h) + clamp(2.5rem, 7vh, 5.5rem)) 0 clamp(3rem, 6vw, 5rem);
  background: var(--ink); color: var(--cream);
}
/* both glows fade out inside the hero: the section below starts on plain ink, with no line between them */
.pj-hero__glow {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(48% 42% at 86% 8%, rgba(124, 204, 191, .13), transparent 70%),
    radial-gradient(40% 48% at 2% 52%, rgba(255, 106, 43, .12), transparent 70%);
}
.pj-hero__top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .75rem 2rem; margin-bottom: clamp(1.5rem, 4vh, 2.75rem); }
.pj-hero__count { display: flex; align-items: center; gap: 1.2rem; color: var(--muted); }
.pj-hero__foot {
  display: grid; grid-template-columns: minmax(0, 46ch) auto; justify-content: space-between; align-items: end; gap: 1.5rem 3rem;
  margin-top: clamp(2rem, 4.5vw, 3.5rem); padding-top: clamp(1.1rem, 2.4vh, 1.6rem); border-top: 1px solid var(--rule);
}
.pj-hero__lead { font-size: var(--fs-lead); line-height: 1.5; color: rgba(243, 235, 224, .86); }
.pj-hero__lead em { font-style: italic; color: var(--fg); }
@media (max-width: 760px) {
  .pj-hero { padding-top: calc(var(--header-h) + 2.25rem); }
  .pj-hero__foot { grid-template-columns: 1fr; }
  .pj-hero__lead { font-size: 1.04rem; }
}

/* ---- Artists marquee ---------------------------------------------------------- */
.artists {
  position: relative; overflow: hidden;
  padding-block: clamp(1.6rem, 3.6vw, 3rem);
  border-block: 1px solid var(--rule);
  background: linear-gradient(180deg, var(--ink), var(--ink-2));
}
.artists__row {
  display: grid; grid-template-columns: minmax(0, 13.5rem) minmax(0, 1fr); align-items: center;
  gap: clamp(1rem, 2.5vw, 2.5rem); padding-left: var(--edge);
}
.artists__label { color: var(--muted); }
.artists__marquee { --marquee-gap: clamp(1rem, 2vw, 2rem); }
.artists__marquee .marquee__item {
  display: inline-flex; align-items: center; gap: var(--marquee-gap);
  font-family: var(--font-display); font-variation-settings: var(--soft);
  font-size: clamp(1.7rem, 3.4vw, 3.6rem); font-weight: 330; letter-spacing: -.03em; line-height: 1.1;
}
.artists__marquee .marquee__item em { font-weight: 300; color: rgba(243, 235, 224, .62); }
.artists__marquee .marquee__sep { font-size: .4em; color: rgba(124, 204, 191, .6); font-family: var(--font-ui); }
@media (max-width: 760px) {
  .artists__row { grid-template-columns: 1fr; gap: .9rem; }
}

/* ---- Artist Projects: the releases catalogue -------------------------------------- */
.catalogue-section { overflow-x: clip; background: var(--ink); padding-bottom: var(--space-6); }   /* the "Show all" rule + button already closes the section */
.catalogue-head { gap: 1.25rem; margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.catalogue-head__title { max-width: none; }
.catalogue-head__aside {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 1.5rem 3rem;
  padding-top: 1.4rem; border-top: 1px solid var(--rule); color: var(--fg-muted);
}
.catalogue-head__aside p { max-width: 54ch; }

/* filter bar: sticks under the header while the grid scrolls (desktop/tablet) */
.catalogue-bar {
  position: relative; z-index: 20;
  display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem;
  margin-bottom: .75rem;
}
html:not(.js) .catalogue-bar, html:not(.js) .catalogue-genres { display: none; }   /* filters need JS; without it every sleeve is listed */
.catalogue-bar__filters { display: flex; flex-wrap: wrap; gap: .45rem; }
.catalogue-bar__filters .chip--filter, .catalogue-genres .chip--filter { background: rgba(15, 13, 12, .4); }
.catalogue-bar__filters .chip--filter[aria-pressed="true"], .catalogue-genres .chip--filter[aria-pressed="true"] { background: var(--mint); }
/* genre groups: a second row of the same chips under the toolbar (not sticky: ten chips take two lines) */
.catalogue-genres { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.catalogue-bar__search { position: relative; flex: 0 1 300px; min-width: 220px; }
.catalogue-bar__input {
  min-height: 46px; padding: .6rem 2.8rem .6rem 2.7rem; border-radius: var(--r-pill);
  background: rgba(15, 13, 12, .45); font-size: .95rem;
}
.catalogue-bar__input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.catalogue-bar__search-icon { position: absolute; left: 1rem; top: 50%; width: 1rem; height: 1rem; transform: translateY(-50%); color: var(--fg-muted); pointer-events: none; }
.catalogue-bar__clear {
  position: absolute; right: .3rem; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  color: var(--fg); font-size: 1.3rem; line-height: 1; transition: background-color .3s, color .3s;
}
.catalogue-bar__clear:hover, .catalogue-bar__clear:focus-visible { background: var(--mint); color: var(--ink); }
/* the status names every active filter ("13 of 66 featured releases · EPs · Folk & Americana"): it takes the
   rest of the first row and wraps inside it (two short lines fit the chips' height) rather than adding a row */
.catalogue-bar__status { flex: 1 1 14rem; min-width: 0; text-align: right; text-wrap: balance; color: var(--fg-muted); }
.catalogue-bar__status [data-status-count] { color: var(--fg); }
@media (min-width: 761px) {
  .catalogue-bar {
    position: sticky; top: calc(var(--header-h) + .6rem);
    padding: .5rem .55rem .5rem .6rem; border: 1px solid var(--rule); border-radius: var(--r-pill);
    background: rgba(23, 20, 19, .78);
    -webkit-backdrop-filter: blur(16px) saturate(1.1); backdrop-filter: blur(16px) saturate(1.1);
    box-shadow: 0 20px 50px -30px rgba(0, 0, 0, .9);
    transition: top .55s var(--ease-out);
  }
  /* the header slides away on scroll-down: the bar follows it up */
  body:has(.site-header.is-hidden) .catalogue-bar { top: .75rem; }
  .catalogue-bar__status { padding-right: .8rem; }
  .catalogue-genres { padding-inline: calc(.6rem + 1px); }   /* lines up with the chips inside the bar */
}
@media (min-width: 761px) and (max-width: 1100px) {
  .catalogue-bar { border-radius: var(--r-lg); padding: .6rem; }
  .catalogue-bar__search { flex: 1 1 260px; }
}
@media (max-width: 760px) {
  .catalogue-bar { gap: .7rem; }
  /* both chip rows scroll sideways, edge to edge */
  .catalogue-bar__filters, .catalogue-genres {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; width: calc(100% + var(--gutter) * 2);
    margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter);
  }
  .catalogue-bar__filters::-webkit-scrollbar, .catalogue-genres::-webkit-scrollbar { display: none; }
  .catalogue-bar__filters .chip--filter, .catalogue-genres .chip--filter { flex: none; }
  .catalogue-bar__search { flex: 1 1 100%; }
  .catalogue-bar__status { flex-basis: 100%; text-align: left; text-wrap: pretty; }
}

/* the grid of sleeves */
.catalogue {
  position: relative;
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(2rem, 3.4vw, 3.4rem) clamp(1rem, 2vw, 2.2rem);
}
.catalogue__item { position: relative; z-index: 1; }
.catalogue__item:hover, .catalogue__item:focus-within { z-index: 3; }
.release--grid { --release-w: 100%; gap: .85rem; }
.release--grid .release__info { padding-right: .25rem; gap: .25rem; }
.release--grid .release__artist { font-size: clamp(1.02rem, 1.15vw, 1.22rem); }
.release--grid .release__title { font-size: clamp(.92rem, 1vw, 1.02rem); }
.release--grid .release__meta { font-size: .68rem; line-height: 1.5; }
.release img { -webkit-user-drag: none; }
/* vinyl hover only (?hover=vinyl, components.css): right-hand column records slide out to the left instead (class set by work.js) */
[data-release-hover="vinyl"] .release.is-flip:hover .release__sleeve, [data-release-hover="vinyl"] .release.is-flip:focus-visible .release__sleeve { transform: translateX(10%) rotate(1.5deg); }
[data-release-hover="vinyl"] .release.is-flip:hover .release__vinyl, [data-release-hover="vinyl"] .release.is-flip:focus-visible .release__vinyl { transform: translateX(-40%); }
/* covers fade in once decoded (class set by work.js only) */
.release__sleeve img { transition: opacity .45s var(--ease-soft); }
/* spotlight (?hover=spotlight, 22 Oct 2026; the default is lift since Kais's pick the same day): over the grid
   the other sleeves dim, so the hovered one stands in
   the light (it still lifts and shows its liner notes). The dim is on .release, not the grid item, because GSAP
   writes the item's inline opacity (reveal, Flip). Un-dimming waits a beat, so crossing the gap between two
   covers does not flash the whole grid; the newly hovered cover lights at once. Hover devices only; keyboard
   focus gets the same light. */
[data-release-hover="spotlight"] .catalogue .release { transition: opacity .5s var(--ease-soft) .15s; }
[data-release-hover="spotlight"] .catalogue .release:hover,
[data-release-hover="spotlight"] .catalogue .release:focus-visible { transition-delay: 0s; }
@media (hover: hover) {
  [data-release-hover="spotlight"] .catalogue:has(.release:hover) .release:not(:hover) { opacity: .32; transition-delay: 0s; }
}
[data-release-hover="spotlight"] .catalogue:has(.release:focus-visible) .release:not(:focus-visible) { opacity: .32; transition-delay: 0s; }
/* ...and the spotlit cover expands out (1.1x, against lift's 1.015) and rises a little, with a deeper shadow,
   above its dimmed neighbours (.release:hover z-index 3). It grows from its bottom edge, into the gaps above and
   beside it, never over its own caption. With reduced motion it still expands, as an instant change without the
   rise (the site's reduced-motion rule makes every transition instant), so the cover in the light is bigger
   there too (Eric, 22 Oct 2026). */
:root[data-release-hover="spotlight"] .catalogue .release { --release-lift: translateY(-6px) scale(1.1); }
:root[data-release-hover="spotlight"] .catalogue .release__sleeve { transform-origin: 50% 100%; }
@media (prefers-reduced-motion: reduce) {
  :root[data-release-hover="spotlight"] .catalogue .release { --release-lift: scale(1.1); }
}
@media (hover: hover) {
  :root[data-release-hover="spotlight"] .catalogue .release:hover .release__sleeve { box-shadow: 0 48px 90px -30px rgba(0, 0, 0, .95), 0 0 0 1px rgba(255, 255, 255, .1); }
}
:root[data-release-hover="spotlight"] .catalogue .release:focus-visible .release__sleeve { box-shadow: 0 48px 90px -30px rgba(0, 0, 0, .95), 0 0 0 1px rgba(255, 255, 255, .1); }
/* the focus ring sits on the cover, so it scales with it and wraps the whole expanded cover */
:root[data-release-hover="spotlight"] .catalogue .release:focus-visible { outline: none; }
:root[data-release-hover="spotlight"] .catalogue .release:focus-visible .release__sleeve { outline: 2px solid var(--focus, var(--mint)); outline-offset: 5px; }
/* 4 to 2 columns: the gaps are smaller, so the cover expands a little less (1.07) and keeps clear of the
   caption above and of its neighbours */
@media (max-width: 1199px) {
  :root[data-release-hover="spotlight"] .catalogue .release { --release-lift: translateY(-4px) scale(1.07); }
}
@media (max-width: 1199px) and (prefers-reduced-motion: reduce) {
  :root[data-release-hover="spotlight"] .catalogue .release { --release-lift: scale(1.07); }
}
/* one cover in the light at a time: when the pointer is on a cover and another one has keyboard focus (Tab while
   hovering; focus handed back after a dialog), the hovered one wins and the focused one rests dimmed */
[data-release-hover="spotlight"] .catalogue:has(.release:focus-visible) .release:not(:focus-visible):not(:hover) { opacity: .32; }
[data-release-hover="spotlight"] .catalogue:has(.release:focus-visible) .release:hover { opacity: 1; }
@media (hover: hover) {
  [data-release-hover="spotlight"] .catalogue:has(.release:hover) .release:focus-visible:not(:hover) { opacity: .32; }
  :root[data-release-hover="spotlight"] .catalogue:has(.release:hover) .release:focus-visible:not(:hover) .release__sleeve { transform: none; box-shadow: 0 24px 50px -18px rgba(0, 0, 0, .85), 0 0 0 1px rgba(255, 255, 255, .06); }
  :root[data-release-hover="spotlight"] .catalogue:has(.release:hover) .release:focus-visible:not(:hover) .release__notes { opacity: 0; visibility: hidden; transform: var(--release-notes-off); }
}
.release__sleeve img.is-loading { opacity: 0; }
@media (max-width: 1599px) { .catalogue { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 1199px) { .catalogue { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 899px) { .catalogue { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 599px) {
  .catalogue { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.9rem .9rem; }
  .release--grid .release__artist { font-size: 1rem; }
  .release--grid .release__title { font-size: .9rem; }
  .release--grid .release__meta { font-size: .64rem; letter-spacing: .06em; }
}

.catalogue-more { display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.5rem); margin-top: clamp(3rem, 6vw, 5rem); }
.catalogue-more[hidden] { display: none; }
.catalogue-more__rule { flex: 1; height: 1px; background: var(--rule); }
.catalogue-more__btn .btn__icon { margin-right: -.85rem; }
.catalogue-more__btn:hover .btn__icon { transform: translateY(2px); }
@media (max-width: 560px) { .catalogue-more__rule { display: none; } .catalogue-more__btn { width: 100%; } }

.catalogue-empty {
  display: grid; justify-items: center; gap: 1rem; text-align: center;
  padding: clamp(3rem, 8vw, 6rem) 1rem; border: 1px dashed var(--rule-strong); border-radius: var(--r-md);
}
.catalogue-empty[hidden] { display: none; }
.catalogue-empty__title { font-size: var(--fs-d3); line-height: 1; letter-spacing: -.025em; }
.catalogue-empty__q { color: var(--fg); }

/* ---- Music Videos: the two videos ------------------------------------------------- */
/* right under the hero (its title and lead are the section's head): the first video starts close below it */
.mv { position: relative; isolation: isolate; overflow: hidden; background: #0A0908; padding-top: clamp(1rem, 3vw, 2.5rem); }
.mv__glow {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  /* the ink fades (hero above, footer below) sit on top so the glows never meet the section edges as a hard line */
  background:
    linear-gradient(180deg, var(--ink) 0%, rgba(15, 13, 12, 0) 14%, rgba(15, 13, 12, 0) 86%, var(--ink) 100%),
    radial-gradient(45% 32% at 85% 22%, rgba(255, 106, 43, .12), transparent 70%),
    radial-gradient(40% 30% at 5% 60%, rgba(124, 204, 191, .07), transparent 70%);
}
.mv-item {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gap); row-gap: clamp(2rem, 4vw, 3.5rem);
  align-items: end;
}
.mv-item + .mv-item { margin-top: clamp(5rem, 10vw, 9rem); }
.mv-item__facade { grid-column: 1 / span 8; grid-row: 1; box-shadow: 0 50px 110px -40px rgba(0, 0, 0, .95), 0 0 0 1px rgba(255, 255, 255, .05); }
.mv-item__facade > img { object-position: 50% 40%; }
.mv-item__intro { grid-column: 9 / -1; grid-row: 1; position: relative; z-index: 2; display: grid; gap: 1rem; align-content: end; padding-bottom: .5rem; }
.mv-item__name {
  font-family: var(--font-display); font-variation-settings: var(--soft); font-weight: 340; font-style: italic;
  font-size: clamp(3.4rem, 8.4vw, 9.6rem); line-height: .86; letter-spacing: -.045em;
  margin-left: clamp(-9rem, -7vw, -2rem); text-shadow: 0 8px 50px rgba(10, 9, 8, .7);
}
.mv-item__artist { color: var(--mint); }
.mv-item__text { color: var(--fg-muted); max-width: 40ch; }
/* mirrored lockup for the second video */
.mv-item--flip .mv-item__facade { grid-column: 5 / -1; }
.mv-item--flip .mv-item__intro { grid-column: 1 / span 4; justify-items: end; text-align: right; }
.mv-item--flip .mv-item__name { margin-left: 0; margin-right: clamp(-9rem, -7vw, -2rem); }
.mv-item--flip .mv-item__text { justify-self: end; }
.mv-item__awards { grid-column: 1 / -1; grid-row: 2; display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 10fr); gap: 1rem var(--grid-gap); align-items: start; padding-top: 1.5rem; border-top: 1px solid var(--rule); }
.mv-item__awards-label { color: var(--fg-muted); }
.mv-item__awards-label span { color: var(--fg); }   /* the count inline at label size, not a display numeral (22 Oct) */
.mv-item__awards-label span::before { content: "\00B7\00A0"; color: var(--fg-muted); }

/* text laurels: a wreath drawn once (SVG <symbol>), the award itself is text */
.laurels { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: clamp(1rem, 2vw, 1.75rem) var(--grid-gap); }
.laurel {
  flex: 0 1 calc((100% - var(--grid-gap) * 2) / 3);
  display: grid; grid-template-columns: clamp(1.7rem, 2.2vw, 2.3rem) minmax(0, 1fr) clamp(1.7rem, 2.2vw, 2.3rem); align-items: center; gap: .35rem;
  padding: .6rem .25rem; color: var(--fg);
}
.laurel__branch { width: 100%; aspect-ratio: 44 / 124; height: auto; color: rgba(243, 235, 224, .3); transition: transform .8s var(--ease-out), color .5s; transform-origin: 70% 90%; }
.laurel__branch--r { transform: scaleX(-1); }
.laurel.is-win .laurel__branch { color: var(--mint); }
.laurel:hover .laurel__branch { transform: rotate(-6deg); }
.laurel:hover .laurel__branch--r { transform: scaleX(-1) rotate(-6deg); }
.laurel__text { display: grid; justify-items: center; gap: .3rem; text-align: center; }
.laurel__result {
  font-family: var(--font-display); font-variation-settings: var(--soft); font-style: italic; font-weight: 340;
  font-size: clamp(1.25rem, 1.7vw, 1.75rem); line-height: 1.02; letter-spacing: -.02em; color: var(--fg-muted);
}
.laurel.is-win .laurel__result { color: var(--fg); }
.laurel__award { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--fg); line-height: 1.45; max-width: 26ch; }
.laurel__festival { font-size: var(--fs-xs); color: var(--fg-muted); line-height: 1.35; max-width: 28ch; }
.laurel__country { color: var(--mint); font-size: .64rem; }
.mv__foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem 2rem; margin-top: clamp(4rem, 8vw, 7rem); padding-top: 1.25rem; border-top: 1px solid var(--rule); }

@media (max-width: 1100px) {
  .mv-item__facade, .mv-item--flip .mv-item__facade { grid-column: 1 / -1; grid-row: 1; }
  .mv-item__intro, .mv-item--flip .mv-item__intro { grid-column: 1 / -1; grid-row: 2; justify-items: start; text-align: left; margin-top: calc(clamp(2rem, 4vw, 3.5rem) * -1 + .5rem); }
  .mv-item__name, .mv-item--flip .mv-item__name { margin: 0; }
  .mv-item--flip .mv-item__text { justify-self: start; }
  .mv-item__awards { grid-row: 3; grid-template-columns: 1fr; }
  .laurel { flex-basis: calc((100% - var(--grid-gap)) / 2); }
}
@media (max-width: 600px) {
  .mv-item__name { font-size: clamp(3.2rem, 17vw, 4.6rem); }
  .mv-item__facade .facade__label .facade__meta:first-child { display: none; }
  .laurels { gap: .25rem .75rem; }
  .laurel { flex-basis: 100%; grid-template-columns: 1.6rem minmax(0, 1fr) 1.6rem; padding-block: .75rem; border-bottom: 1px dashed var(--rule); }
  .laurel__festival { max-width: none; }
}

/* ---- Music Sync: the composers' work (cream) ----------------------------------------- */
/* right under the hero (its title and lead are the section's head): the clients line starts close below it */
.sync { padding-top: clamp(3rem, 6vw, 5.5rem); }
.sync-clients {
  display: grid; grid-template-columns: minmax(0, 13.5rem) minmax(0, 1fr); align-items: baseline; gap: 1rem clamp(1rem, 2.5vw, 2.5rem);
  padding-block: clamp(1.4rem, 3vw, 2.2rem); margin-bottom: clamp(4rem, 8vw, 7rem);
  border-block: 1px solid var(--rule-strong);
}
.sync-clients__label { color: var(--fg-muted); }
.sync-clients__list {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .1em .45em;
  font-family: var(--font-display); font-variation-settings: var(--soft); font-weight: 360;
  font-size: clamp(1.6rem, 3.3vw, 3.5rem); line-height: 1.08; letter-spacing: -.03em;
}
.sync-clients__sep { color: var(--accent); font-weight: 300; font-style: italic; }

.composer { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gap); row-gap: 2rem; align-items: start; }
.composer + .composer { margin-top: clamp(4.5rem, 9vw, 8rem); padding-top: clamp(2.5rem, 5vw, 4rem); border-top: 1px solid var(--rule-strong); }
.composer__head { grid-column: 1 / span 3; position: sticky; top: calc(var(--header-h) + 1.5rem); display: grid; gap: 1.25rem; transition: top .55s var(--ease-out); }
body:has(.site-header.is-hidden) .composer__head { top: 1.5rem; }
.composer__portrait { width: clamp(84px, 7vw, 120px); aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: var(--cream-2); box-shadow: 0 0 0 1px var(--rule); }
.composer__portrait img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.25) contrast(1.02); }
.composer__id { display: grid; gap: .55rem; justify-items: start; }
.composer__kicker { color: var(--fg-muted); }
.composer__name { font-family: var(--font-display); font-variation-settings: var(--soft); font-weight: 360; font-size: clamp(2rem, 3vw, 3.2rem); line-height: .95; letter-spacing: -.03em; }
.composer__role { color: var(--accent); }
.composer__count { display: grid; gap: .2rem; color: var(--fg-muted); }
.composer__count span:first-child { color: var(--fg); }
.composer__groups { grid-column: 4 / -1; display: grid; gap: clamp(2.5rem, 5vw, 4rem); }

.sync-group__title {
  display: flex; align-items: baseline; gap: 1rem; padding-bottom: .8rem; margin-bottom: 1.4rem;
  border-bottom: 1px solid var(--rule-strong); color: var(--fg);
}
.sync-group__count { margin-left: auto; color: var(--fg-muted); }
.sync-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1.5rem, 2.4vw, 2.2rem) clamp(1rem, 1.6vw, 1.5rem); }
.sync-item--feature { grid-column: span 2; grid-row: span 2; }
.sync-group--n2 .sync-item { grid-column: span 2; }
.sync-group--n3 .sync-item:first-child { grid-column: span 2; grid-row: span 2; }
.sync-card { position: relative; display: flex; flex-direction: column; gap: .8rem; height: 100%; color: var(--fg); }
.sync-card__media { --ratio: 922 / 637; flex: none; box-shadow: 0 24px 50px -30px rgba(15, 13, 12, .6); }
.sync-item--feature .sync-card__media, .sync-group--n3 .sync-item:first-child .sync-card__media { flex: 1 1 auto; aspect-ratio: auto; min-height: 260px; }
.sync-card__media .facade__play { --s: clamp(52px, 4.6vw, 72px); width: var(--s); margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2); }
.sync-card__tc { position: absolute; z-index: 2; top: .75rem; left: .85rem; color: rgba(243, 235, 224, .85); font-size: .64rem; }
.sync-card:hover .sync-card__media > img, .sync-card:focus-visible .sync-card__media > img { transform: scale(1.04); filter: saturate(1.05) brightness(1); }
.sync-card:hover .facade__play, .sync-card:focus-visible .facade__play { transform: scale(1.1); background: var(--mint); color: var(--ink); border-color: var(--mint); }
.sync-card__text { display: grid; gap: .25rem; }
.sync-card__title { font-family: var(--font-display); font-variation-settings: var(--soft); font-weight: 420; font-size: clamp(1.1rem, 1.3vw, 1.35rem); line-height: 1.12; letter-spacing: -.01em; transition: color .3s; }
.sync-item--feature .sync-card__title { font-size: clamp(1.4rem, 2vw, 2rem); }
.sync-card__sub { font-size: var(--fs-xs); color: var(--fg-muted); line-height: 1.4; }
.sync-card__desc { margin-top: .45rem; max-width: 52ch; font-size: var(--fs-small); line-height: 1.5; color: var(--fg-muted); }
.sync-card__meta { color: var(--accent); font-size: .64rem; margin-top: .2rem; opacity: 0; transform: translateY(4px); transition: opacity .35s, transform .5s var(--ease-out); }
.sync-card:hover .sync-card__meta, .sync-card:focus-visible .sync-card__meta { opacity: 1; transform: none; }
.sync-card:focus-visible { outline: 2px solid var(--focus, var(--mint-deep)); outline-offset: 6px; border-radius: var(--r-sm); }

@media (max-width: 1100px) {
  .composer__head { grid-column: 1 / -1; position: static; grid-template-columns: auto 1fr; align-items: center; column-gap: 1.5rem; }
  .composer__groups { grid-column: 1 / -1; }
  .sync-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sync-item--feature, .sync-group--n3 .sync-item:first-child { grid-column: 1 / -1; grid-row: auto; }
  .sync-item--feature .sync-card__media, .sync-group--n3 .sync-item:first-child .sync-card__media { flex: none; aspect-ratio: 16 / 9; min-height: 0; }
  .sync-group--n2 .sync-item { grid-column: auto; }
  .sync-card__meta { opacity: 1; transform: none; }
}
@media (max-width: 760px) {
  .sync-clients { grid-template-columns: 1fr; }
  .sync-clients__list { font-size: clamp(1.5rem, 7.4vw, 2.2rem); }
}
@media (max-width: 600px) {
  /* compact rows: thumbnail left, title right (the feature keeps its full-width frame) */
  .sync-grid { grid-template-columns: 1fr; gap: .9rem; }
  .sync-item:not(.sync-item--feature) .sync-card { display: grid; grid-template-columns: minmax(0, 44%) minmax(0, 1fr); align-items: center; gap: 1rem; }
  .sync-group--n3 .sync-item:first-child .sync-card { display: flex; align-items: stretch; }
  .sync-item:not(.sync-item--feature) .sync-card__media .facade__play { --s: 40px; }
  .sync-card__tc { display: none; }
  .sync-card__meta { display: none; }
  .composer__portrait { width: 72px; }
}

/* sync closing line */
.sync__foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1.25rem 2rem; margin-top: clamp(4rem, 8vw, 7rem); padding-top: 1.5rem; border-top: 1px solid var(--rule-strong); }
.sync__foot-text { font-family: var(--font-display); font-variation-settings: var(--soft); font-size: var(--fs-h4); line-height: 1.15; letter-spacing: -.015em; max-width: 26ch; }
.sync__foot .cluster { --cluster-gap: 1rem 1.75rem; align-items: center; }

/* ---- Partner Brands (charcoal, logos on cream plates) --------------------------------- */
/* right under the hero (its title and lead are the section's head): the first row starts close below it */
.brands { padding-top: clamp(2.5rem, 5vw, 4.5rem); }
/* 13 plates in 4, 3 or 2 columns: the last row always holds one plate, and the closing tile
   takes the rest of that row (--cols minus one cells) at the height of one plate */
.brand-grid {
  --cols: 4; --gap-x: var(--grid-gap);
  container-type: inline-size;
  display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: clamp(2rem, 3.4vw, 3rem) var(--gap-x); align-items: start;
}
.brand { display: grid; gap: 1rem; align-content: start; }
.brand__plate {
  position: relative; display: grid; place-items: center; aspect-ratio: 16 / 10; overflow: hidden;
  border-radius: var(--r-sm); background: var(--cream);
  box-shadow: 0 30px 60px -36px rgba(0, 0, 0, .9);
  transition: transform .8s var(--ease-out), background-color .5s;
}
.brand__plate::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(135deg, rgba(255, 255, 255, .35), transparent 45%, rgba(15, 13, 12, .06)); }
.brand__plate img {
  max-width: 72%; max-height: 46%; width: auto; height: auto; object-fit: contain;
  mix-blend-mode: multiply; filter: grayscale(1) contrast(1.15);
  transition: filter .6s var(--ease-out), transform .9s var(--ease-out);
}
.brand__plate--square img { max-height: 62%; max-width: 50%; }
.brand__plate--wide img { max-width: 80%; max-height: 40%; }
.brand:hover .brand__plate { transform: translateY(-4px) rotate(-.6deg); background: #F8F2E9; }
.brand:hover .brand__plate img { filter: none; transform: scale(1.04); }
.brand__body { display: grid; gap: .45rem; }
.brand__name { font-family: var(--font-display); font-variation-settings: var(--soft); font-weight: 400; font-size: clamp(1.15rem, 1.4vw, 1.45rem); line-height: 1.12; letter-spacing: -.012em; }
.brand__types { display: flex; flex-wrap: wrap; gap: .35rem; }
/* closing tile: an empty plate (dashed outline) one plate high (a plate is a column wide at 16:10); mint on hover */
.brand--cta { grid-column: span 3; }
.brand__cta {
  aspect-ratio: auto; height: calc((100cqw - (var(--cols) - 1) * var(--gap-x)) / var(--cols) * .625);
  align-content: center; justify-items: start; gap: .5rem; padding: 1rem clamp(1rem, 2.4vw, 2rem); place-items: center start;
  background: transparent; color: var(--fg); border: 1px dashed var(--rule-strong); box-shadow: none;
  transition: transform .8s var(--ease-out), background-color .5s, border-color .5s, color .5s;
}
.brand__cta::after { display: none; }
.brand__cta-title { font-family: var(--font-display); font-variation-settings: var(--soft); font-style: italic; font-weight: 340; font-size: clamp(1.5rem, 2.4vw, 2.4rem); line-height: 1; letter-spacing: -.02em; }
.brand__cta-meta { font-size: .62rem; letter-spacing: .06em; color: var(--fg-muted); transition: color .5s; }
.brand__cta:hover, .brand__cta:focus-visible { background: var(--mint); border-color: var(--mint); color: var(--ink); transform: translateY(-4px); }
.brand__cta:hover .brand__cta-meta, .brand__cta:focus-visible .brand__cta-meta { color: rgba(15, 13, 12, .75); }
@media (hover: none) { .brand__plate img { filter: none; } }
@media (max-width: 1100px) {
  .brand-grid { --cols: 3; }
  .brand--cta { grid-column: span 2; }
}
@media (max-width: 700px) {
  .brand-grid { --cols: 2; --gap-x: .85rem; gap: 1.75rem var(--gap-x); }
  .brand--cta { grid-column: span 1; }
  .brand__cta-title { font-size: 1.5rem; }
  .brand__name { font-size: 1.02rem; }
  .brand__types .tag { font-size: .62rem; white-space: normal; }
}