/* ===== Engraved Edition — composition detail page (desktop-only) =====
   Pairs with /assets/css/edition.b5755e70.css (shared hardware).

   This page was the one that never got converted. Every other main page moved
   to the edition system months of work ago; the detail page kept its original
   styling, so following a work from the catalogue landed you on a page that
   looked like a different site: a blue title, the purple gradient Buy Now that
   was explicitly rejected, and pastel buttons carrying emoji.

   Nothing here changes layout or behaviour. It restates the page in the
   vocabulary the rest of the site already speaks: ink headings, white sheets
   with a hairline and a square cast, one navy call to action. */
@media (min-width: 1025px) {
  /* ---------- 1 · The work's title ---------- */
  /* The title was a blue gradient clipped to the glyphs with a transparent
     text fill, so setting `color` on it did nothing at all — the computed
     colour was already ink while the page still rendered blue. The gradient
     and the fill both have to be undone before the ink shows. A gradient
     heading is also on the rejected list. */
  .composition-title,
  .composition-title-section h1,
  .composition-title-section h2,
  .composition-title-section .composition-name,
  .composition-detail-title {
    background-image: none !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    -webkit-text-fill-color: currentColor !important;
    color: var(--gray-950, var(--ee-ink)) !important;
    text-shadow: none !important;
    font-weight: 900 !important;
    letter-spacing: -0.022em !important;
    line-height: 1.1 !important;
  }
  .composition-title-section .composition-instrumentation,
  .composition-title-section .instrumentation {
    font-style: italic;
    color: var(--gray-700) !important;
  }

  /* ---------- 2 · Buy Now ---------- */
  /* The purple gradient is on the rejected list and had survived here only
     because this page never adopted the shared button. Solid navy, one weight,
     matching the catalogue and the featured panel exactly. */
  .composition-buy-btn {
    background: hsl(221, 45%, 22%) !important;
    background-image: none !important;
    color: #ffffff !important;
    border: 1px solid hsl(221, 45%, 18%) !important;
    border-radius: 8px !important;
    font-weight: 800 !important;
    letter-spacing: 0.005em !important;
    box-shadow: var(--ee-lift-sm) !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  }
  .composition-buy-btn:hover {
    background: hsl(221, 45%, 26%) !important;
    transform: translate(-1px, -1px);
    box-shadow: var(--ee-lift-sm-hover) !important;
  }

  /* ---------- 3 · Section jump buttons ---------- */
  /* Were frosted pastel pills with emoji glyphs. The emoji are gone from the
     markup; these become the same white plates as View Score and Learn More,
     so the whole page has one button voice instead of three. */
  .layout-nav-btn.frosted-btn,
  .cover-overlay-pill.frosted-btn {
    background: #ffffff !important;
    background-image: none !important;
    color: var(--ee-ink) !important;
    border: 1px solid rgba(2, 6, 23, 0.45) !important;
    border-radius: 8px !important;
    font-weight: 800 !important;
    box-shadow: var(--ee-lift-sm) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  }
  .layout-nav-btn.frosted-btn:hover,
  .cover-overlay-pill.frosted-btn:hover {
    background: var(--secondary-100) !important;
    transform: translate(-1px, -1px);
    box-shadow: var(--ee-lift-sm-hover) !important;
  }

  /* Glyphs, and the one place colour belongs on a secondary control.
     These three buttons carried emoji, which is why they read as cheap: an
     emoji is someone else's illustration at someone else's weight, sitting in
     a typeface that is not yours. The site already has its own icon set —
     Lucide outlines drawn as CSS masks, so they take currentColor and match the
     stroke weight of everything around them — and .ee-icon-score was drawn for
     exactly this button and never used.

     The glyph, and only the glyph, takes the work's colour: mixed 70/30 toward
     ink so it stays a mark rather than a swatch, and the label stays ink so
     legibility never depends on which cover happens to be loaded. Buy Now keeps
     the page's only solid fill, so nothing competes with it. Works with no
     cover art fall back to plain ink. */
  .layout-nav-btn.frosted-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
  }
  .layout-nav-btn.frosted-btn::before {
    background-color: color-mix(
      in oklab,
      hsl(var(--field-accent, 221 39% 13%)) 70%,
      var(--ee-ink)
    ) !important;
    width: 0.95em;
    height: 0.95em;
  }

  /* ---------- 4 · One sheet, not five ----------
     The first pass gave the sheet treatment to every region on the page, which
     is where it stopped translating. The catalogue is a few large plates with
     room around them; this page is dense and its regions are not all cards:

       #program-video-section    full-bleed 1440px band — a hairline and cast
                                 drew a border around the whole width
       .composition-program-notes  transparent, and nested inside that band
       #composition-related-news   transparent, and nested inside the top frame
       .scores-section             0x0 when there is no score, outlined anyway

     Casts inside casts and outlines around transparent wrappers read as
     clutter, and on a page this dense the clutter is the whole impression. Only
     the top frame is actually a card, so only it gets the treatment — and at
     the medium tier rather than large, because a dense page gives a plate less
     room to cast into. Layout is untouched: this only removes shadows and
     borders that should never have been added. */
  .composition-top-frame {
    border-radius: 10px !important;
    box-shadow: 0 0 0 1px var(--ee-edge), var(--ee-lift-md) !important;
    position: relative; /* hosts the drifting backdrop; does not move anything */
  }

  /* ---------- 5 · The top frame carries the work's colour ----------
     Converting this page to ink and white took its character out — the blue
     gradient title and the coloured buttons were doing the work of making it
     feel like something. Ink and white alone is correct and lifeless.

     What replaces them is not a decoration but the work itself: this page is
     about exactly one piece, so the top frame takes that piece's colour and its
     own cover drifts behind the panel, blurred past recognition. It is the same
     system as the catalogue, and this is the most natural place on the site for
     it — there is no ambiguity here about which work the colour belongs to.

     Only the top. The lower half stays as it is. */
  .composition-top-frame {
    background-color: color-mix(in oklab, hsl(var(--field-accent, 40 20% 50%)) 7%, #ffffff) !important;
    transition: background-color 0.9s ease;
  }
  body.composition-page {
    background-color: color-mix(in oklab, hsl(var(--field-accent, 40 20% 50%)) 6%, #f4efe2) !important;
    transition: background-color 0.9s ease;
  }

  /* The cover is the work, so it casts in the work's colour like every other
     plate in the system. */
  .composition-cover.has-chroma:hover,
  .composition-cover-container.has-chroma:hover,
  .has-chroma:hover > img[src*="/cover-images/"] {
    box-shadow: 10px 10px 0 hsl(var(--work-accent) / 0.42) !important;
  }

  /* ---------- 6 · Lower half matches the media page ----------
     These two are the only real cards down here, and they were still on the old
     elevation language — a blurred 5px drop, which is the one thing the whole
     system replaced. Same hairline and square cast the media cards use, so the
     bottom of this page and the media grid read as the same furniture.

     No hover tier: unlike the media cards these are not links, and a panel that
     moves when you cross it reads as a glitch. */
  .program-notes-column,
  .videos-column {
    border: 0 !important;
    border-radius: 10px !important;
    box-shadow: 0 0 0 1px var(--ee-edge), var(--ee-lift-md) !important;
  }

  /* Headings inside those sheets take the ink voice rather than link blue. */
  .composition-program-notes h2,
  .composition-program-notes h3,
  .scores-section h2,
  #program-video-section h2,
  #composition-related-news h2 {
    color: var(--gray-950, var(--ee-ink)) !important;
    font-weight: 900 !important;
    letter-spacing: -0.015em !important;
  }

  /* ---------- 5 · The cover is a plate ---------- */
  /* Same rule as the catalogue: the wrapper casts, never the image, so the
     artwork cannot slide out from under anything layered over it. */
  .composition-cover,
  .composition-cover-container {
    border-radius: 10px;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
  }
  .composition-cover img,
  .composition-cover-container img {
    border-radius: 10px !important;
    box-shadow: none !important;
  }

  /* ---------- 6 · Metadata reads as data ---------- */
  /* Duration, year and difficulty are values, so they get the tabular voice the
     catalogue table uses for the same fields. */
  .composition-meta-container .meta-value,
  .composition-meta-container .duration,
  .composition-meta-container .year {
    font-variant-numeric: tabular-nums;
  }
}