/* ===== Engraved Edition — composition detail page (desktop-only) =====
   Pairs with /assets/css/edition.0c59d036.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;
    /* The large cast, the same as the catalogue's featured card.
       It was the medium tier on the reasoning that a dense page gives a plate
       less room to cast into — true in isolation, but these are the same object
       seen twice, and the two pages sitting side by side made the mismatch more
       noticeable than the tighter cast was worth. */
    box-shadow: 0 0 0 1px var(--ee-edge), var(--ee-lift-lg) !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. */
  /* Glass, not a white card. The score now runs behind this panel, and an
     opaque base meant it was drawn and never seen — the same mistake the
     catalogue's featured card made before it was glassed. Blur only has to
     destroy detail at letterform frequency to keep the type readable, which is
     what makes the translucency safe.

     The white here is translucent; without backdrop-filter the panel stays
     nearly solid, because translucency without blur is what was rejected. */
  .composition-top-frame {
    /* Plain white, as the featured card is. The accent used to be mixed in at
       7% so the panel took the work's colour, but the card takes none, and on a
       work with a cool cover — WindSprints is blue — 7% of it turned the panel
       grey-green next to the card's warm white. The band behind still carries
       the work's hue, which is where that colour belongs; the plate over it
       stays neutral so the two pages read as the same material. */
    background-color: rgba(255, 255, 255, 0.88) !important;
    transition: background-color 0.9s ease;
    /* One edge, not three. It carried a 3px white border AND a 1px ink ring AND
       a cast — which is what read as cut off: a thick light band between the
       panel and everything behind it. */
    border: 0 !important;
    /* Room to print in. It was 8px 12px against the featured card's 16px 32px,
       so the same content sat half as far from its own edge here as it does
       there. */
    padding: 16px 32px !important;
  }
  @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .composition-top-frame {
      /* The card's glass exactly: blur(3px) saturate(1.28) over 0.38 alpha.
         This was blur(9px) at 0.50, three times the blur and denser with it,
         which made the score behind the panel a wash here and legible detail on
         the catalogue — the same plate over the same animation, reading as two
         different materials.

         0.333 rather than 0.38 in the mix because the 7% accent is opaque and
         lifts what it is mixed into: 0.07 + 0.93 x 0.333 lands at 0.38. The
         tint stays, so the panel still takes the work's colour; only the
         strength of the glass changes. */
      background-color: rgba(255, 255, 255, var(--nr-glass, 0.38)) !important;
      -webkit-backdrop-filter: blur(3px) saturate(1.28);
      backdrop-filter: blur(3px) saturate(1.28);
    }
  }

  /* will-change is a hint for the duration of an animation, not a permanent
     property, and p-3da015f954.css leaves "transform, opacity" on every
     .reveal-section for the life of the page. An element promising to change
     its opacity is a backdrop root, and the panel's own wrappers are reveal
     sections that do not contain the score — so the panel's backdrop stopped
     at them and came back empty. Released once revealed, which is when the
     hint has done its job anyway. */
  .composition-page .reveal-section.revealed {
    will-change: auto !important;
    /* And the animation must stop holding a transform once it has finished.
       .reveal-section animates with fill-mode "both", so the final keyframe's
       transform — an identity matrix, visually nothing — stays on the element
       for the life of the page. An ancestor with a transform is a backdrop
       root, and the wrapper between the panel and the score is one of these
       sections, so the panel's backdrop stopped there and came back empty.

       fill-mode none hands the element back to these declarations when the
       animation ends, which are the same values the last keyframe held. The
       reveal still plays: keyframes outrank normal declarations while running.
       Verified by raising the blur to 40px — the staves behind the panel now
       disappear, where before the render did not change by a pixel. */
    animation-fill-mode: none !important;
    opacity: 1;
    transform: none;
  }

  /* The band runs the full width of the window, like the catalogue's does.
     It sat inside the page's gutters, so the score stopped 25px short of each
     edge and read as a panel with a picture in it rather than as the page the
     work is printed on. The padding puts the content back exactly where it was
     — only the surface widens. */
  section.composition-main {
    /* !important and a tag qualifier because the page's own layout sets width
       on this section, and a bare class loses to it. */
    width: 100vw !important;
    max-width: none !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    /* Half the difference between the window and the band puts the content back
       exactly where it was; the existing gutter is added on top of it. */
    padding-left: calc(1.5rem + (100vw - 100%) / 2) !important;
    padding-right: calc(1.5rem + (100vw - 100%) / 2) !important;
  }
  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;
  }
}

  /* ---------- The head of the page ----------
     The rule under the title was a 2px light-grey line — the default UI divider
     this design set out to replace. Everything else on the site parts sections
     with an ink hairline, so this does too: thinner, darker, and the same rule
     the transport and the masthead already draw.

     The scoring under the title is set the way the catalogue sets it, in
     italic. It is the same line of text about the same work; there was no
     reason for it to be roman here and italic there. */
  .composition-title-container {
    /* No rule here. The score rolls behind the glass, so the panel already has
       horizontals running through it; a divider at hairline weight just reads
       as a stray staff line that stops at the panel edge. Space parts the
       blocks instead, which the staff cannot imitate. */
    border-bottom: 0 !important;
    padding-bottom: 0 !important;
    /* Nothing here: the buy button brings its own 8px, which is the whole gap
       the featured card leaves between the scoring and its action row. */
    margin-bottom: 0 !important;
  }
  .composition-instrument {
    font-style: italic !important;
    font-size: 1.02rem !important;
    color: var(--gray-700) !important;
    line-height: 1.35 !important;
    /* The featured card's rhythm exactly: 2px off the title, then 8px to the
       actions. The scoring sits with the title as one block and the buttons
       start their own, rather than three evenly spaced things in a column. */
    margin-top: 2px !important;
  }

  /* The 2px above was measured but not delivered, because the title carries
     8px of its own bottom padding — invisible, so the gap read as 10px and
     went on looking wrong after the margin was already right. */
  .composition-title {
    padding-bottom: 0 !important;
    line-height: 1.1 !important;
  }

  /* The action row is the featured card's, to the pixel: 44px tall, 0.9rem,
     the same padding. The buy button was 41px at 18.4px type, which made it
     both shorter and louder than the one it is meant to be a second printing
     of, and the secondary buttons were 32px against the card's 44px. */
  .composition-top-frame .composition-buy-btn,
  .composition-top-frame .layout-nav-btn {
    min-height: 44px !important;
    padding: 7.68px 12.8px !important;
    font-size: 0.9rem !important;
    line-height: 1.1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* The second action row was as far from the buy button as the buy button was
     from the title, which made three separated bands where the card has two.
     The two rows are one group. */
  .composition-buy-btn {
    margin-bottom: 2px !important;
  }
  .composition-nav-buttons,
  .composition-actions-secondary {
    margin-top: 2px !important;
  }
  /* The audio block is one plate holding the transport and the credit line
     under it, rather than a box around the transport with the credit floating
     loose beneath. .composition-audio-player is the element that already
     contains both, so the plate belongs there — putting it on the wrapper drew
     a box around the player alone and left the credit outside it.

     Translucent rather than solid: this panel is glass over a rolling score,
     and an opaque plate here punched a hole in the one thing the page is built
     around. The edge is soft for the same reason — an ink hairline at full
     strength read as a second frame inside the frame.

     Three classes deep, and not for decoration: p-3da015f954.css carries a
     "neutralize global media-styles.css card chrome" rule that strips
     background, border, padding and radius from .composition-page
     .composition-audio-player with !important. That is the same specificity as
     a two-class selector and it loads later, so it won every tie. The extra
     class is what makes this rule outrank it rather than draw with it. */
  .composition-page .composition-top-frame .composition-audio-player {
    /* The new release's audio block, copied off it rather than interpreted.
       There it is two nested elements — an outer plate carrying the edge and
       the radius, and a cream body carrying the fill and the padding. Here one
       element does both jobs, so it takes the outer's border and radius and the
       inner's background and padding. Measured values, not chosen ones. */
    background: rgb(249, 247, 241) !important;
    border: 1px solid rgba(2, 6, 23, 0.35) !important;
    border-radius: 8px !important;
    padding: 13.6px 16px !important;
  }
  @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .composition-page .composition-top-frame .composition-audio-player {
      -webkit-backdrop-filter: blur(7px) saturate(1.2);
      backdrop-filter: blur(7px) saturate(1.2);
    }
  }
  /* The credit line is inside the plate now, so it loses the outdent that was
     holding it clear of the box above it. */
  .composition-top-frame .performance-info {
    margin-left: 0 !important;
  }

  /* The caption under the cover. Both halves were the same 14.4px grey at
     different weights, so "2025" and the commission read as one run-on line of
     body copy rather than as a datum and a credit.

     The year is set as the small tracked stamp the rest of the site uses for
     labels; the credit stays italic but drops to caption size. Same colour on
     both, so they sit as one caption with two parts. */
  .composition-year {
    font-size: 0.72rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.09em !important;
    text-transform: uppercase !important;
    color: var(--gray-600) !important;
  }
  .composition-commission {
    font-size: 0.8rem !important;
    font-weight: 500 !important;
    font-style: italic !important;
    color: var(--gray-600) !important;
  }

  /* The credit line, set from the new release's own declaration rather than
     approximated: 0.88rem at weight 500, the tracked-a-hair letter-spacing, and
     the ink mixed to 76% so it sits back from the title without going grey.

     Three classes deep because p-3da015f954.css sets .composition-page
     .performance-info to 0.95rem with !important, which beats a one-class rule
     however important it is. */
  .composition-page .composition-top-frame .performance-info {
    font-style: normal !important;
    text-transform: none !important;
    letter-spacing: 0.004em !important;
    font-size: 0.88rem !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
    color: color-mix(in oklab, var(--ee-ink) 76%, #ffffff) !important;
    /* Spacing measured off the catalogue block rather than guessed: 24px below
       the transport, 32px in from the plate's left edge, 32px to the plate's
       foot. Set as padding, not margin — the credit sits inside a wrapper that
       already carries margins of its own, and two adjacent top margins collapse
       to the larger of the pair instead of adding up, which is why the gap kept
       landing at 8px however large the margin was made.

       The wrapper's own 16px left margin supplies half the indent; the plate's
       padding supplies the other half, so there is nothing to add here. */
    margin: 0 !important;
    padding: 16px 0 16px 0 !important;
  }

  /* The catalogue holds its player 4px further off the plate's top edge, via a
     margin on the container the transport sits in. */
  .composition-page .composition-top-frame .audio-white-wrapper {
    margin-top: 4px !important;
    /* No clipping. The wrapper carries an inline overflow:hidden with a 10px
       radius, which is right when it holds a raw <audio> element and wrong now
       that it holds the transport: the transport draws its own 8px box just
       inside, so the wrapper was shaving the corners and both side edges off a
       border that should close all the way round. */
    overflow: visible !important;
    border-radius: 0 !important;
    background: transparent !important;
  }

  /* The rule above the news block goes for the same reason as the one under the
     title. The transport keeps its border — that is a control with an edge, not
     a divider drawn across the page. */
  .composition-related-news-section {
    border-top: 0 !important;
    /* Nothing is slotted between the player and this rail, so the gap was slack
       rather than separation. The credit line under the player already parts
       the two. */
    margin-top: 0.45rem !important;
    padding-top: 0 !important;
  }

  /* The related-news rail was right-aligned, so three headlines of different
     lengths left a ragged edge with nothing to read down. The titles start on
     the margin and the chip and date hold the right, which gives the block two
     columns to scan. No rules between the rows, for the same reason the title
     has none — the staff behind the glass is already drawing horizontals. */
  .related-news-link {
    display: flex !important;
    align-items: baseline !important;
    gap: 0.55rem !important;
    text-align: left !important;
    padding: 0.42rem 0 !important;
    border-bottom: 0 !important;
  }

  /* The hover was an opaque grey pill (--gray-100) with a 1px lift. Two things
     wrong with it here: the panel is translucent glass over a moving score, so
     a solid fill blanks out a patch of it and reads as a hole rather than a
     highlight; and the rail pins each row to the right at its natural width, so
     the pill was a different length on every row and the lift made them wobble
     independently as the pointer went down the list.

     A wash of ink instead — it tints what is behind rather than replacing it,
     so the score keeps showing through — and no transform, so the row
     highlights without moving. The padding gives the wash a shape to fill;
     without it the tint hugged the letterforms. */
  .composition-page .composition-top-frame .related-news-link {
    padding: 0.34rem 0.5rem !important;
    border-radius: 6px !important;
    transition: background-color 0.15s ease, color 0.15s ease !important;
  }
  .composition-page .composition-top-frame .related-news-link:hover {
    background: rgba(2, 6, 23, 0.06) !important;
    color: var(--gray-900) !important;
    transform: none !important;
  }
  .related-news-link .rn-title {
    flex: 1 1 auto !important;
  }
  .related-news-link .rn-chip,
  .related-news-link .rn-sep,
  .related-news-link .rn-date {
    flex: 0 0 auto !important;
  }

/* ---- program and performance notes ------------------------------------------
   The spacing between paragraphs used to be written onto each one as an inline
   margin by a function on a 2s/4s/6s timer, so the notes rendered, sat still
   for two seconds, and then reflowed under the reader. It is a stylesheet's
   job; it applies at first paint here and never moves.

   Not on the last paragraph, which is what the old loop's index check was for —
   a trailing margin inside a plate just deepens the plate. */
.composition-page .program-notes-content p:not(:last-child),
.composition-page .performance-notes-content p:not(:last-child) {
  margin-bottom: 1rem;
}

/* The two headings are the same kind of thing and were set two different ways:
   Program Notes at weight 900 in ink, Performance Notes at 600 in --primary
   blue, which is the palette this design replaced. They match now — and they
   keep a colour rather than going neutral, because a heading that is only ink
   in a page full of the work's colour reads as unfinished rather than quiet.

   The colour is the work's own accent, darkened to 32% lightness so it holds
   against paper at heading weight. Same construction as the theatre title, and
   the same reason: an accent picked to tint a whole band is far too light to
   set type in. Browsers without relative colour syntax keep the ink. */
.composition-page .composition-performance-notes h2,
.composition-page .composition-performance-notes h3,
.composition-page .performance-notes-title {
  font-size: 1.25rem !important;
  font-weight: 900 !important;
  color: var(--ee-ink, hsl(221, 39%, 13%)) !important;
  letter-spacing: -0.01em !important;
}
@supports (color: hsl(from white h s l)) {
  .composition-page .composition-performance-notes h2,
  .composition-page .composition-performance-notes h3,
  .composition-page .performance-notes-title,
  .composition-page .composition-program-notes h2,
  .composition-page .composition-program-notes h3,
  .composition-page .program-notes-title {
    color: hsl(from hsl(var(--field-accent, 221 39% 13%)) h s 32%) !important;
  }
}

/* The work's own name inside the notes: italic and bold, being a title, and in
   the work's colour rather than the old palette's blue — which on this page
   read as a link that goes nowhere. */
.composition-page .program-notes-content strong,
.composition-page .program-notes-content b,
.composition-page .performance-notes-content strong,
.composition-page .performance-notes-content b {
  color: var(--ee-ink, hsl(221, 39%, 13%)) !important;
  font-weight: 800 !important;
}
@supports (color: hsl(from white h s l)) {
  .composition-page .program-notes-content strong,
  .composition-page .program-notes-content b,
  .composition-page .performance-notes-content strong,
  .composition-page .performance-notes-content b {
    color: hsl(from hsl(var(--field-accent, 221 39% 13%)) h s 32%) !important;
  }
}