*{box-sizing:border-box; margin:0; padding:0;}
  body{
    background:var(--bg); color:var(--text);
    font-family:'Schibsted Grotesk', sans-serif;
    line-height:1.5;
  }
  .wrap{max-width:1200px; margin:0 auto; padding:0 40px;}
  .label{
    font-size:11px; letter-spacing:.12em; text-transform:uppercase;
    color:var(--text-faint); margin-bottom:10px; display:block;
  }
  .serif-sc{font-family:'Cormorant SC', serif;}
  .serif{font-family:'Cormorant', serif;}
  .serif-g{font-family:'Cormorant Garamond', serif;}
  .btn{
    display:inline-block; padding:14px 30px; font-size:13px; letter-spacing:.06em;
    text-transform:uppercase; text-decoration:none; border-radius:2px;
    font-family:'Schibsted Grotesk', sans-serif; font-weight:500;
  }
  /* Primary actions use the approved blue and dedicated on-accent text token. */
  .btn-primary{background:var(--accent); color:var(--text-on-accent);}
  .btn-outline{border:1px solid var(--line); color:var(--text); background:none; cursor:pointer;}
  .section{padding:100px 0; border-bottom:1px solid var(--line);}
  .section-title{font-size:34px; font-weight:500; margin-bottom:12px;}
  .section-sub{color:var(--text-dim); font-size:15px; max-width:520px; margin-bottom:56px;}
  .poster{
    aspect-ratio:1/1; background:linear-gradient(155deg,var(--surface),var(--bg));
    border:1px solid var(--line); display:flex; align-items:center; justify-content:center;
    color:var(--text-faint); font-size:12px; letter-spacing:.05em; text-transform:uppercase;
  }
  .pill{
    border:1px solid var(--line); border-radius:20px; padding:8px 16px;
    font-size:13px; color:var(--text-dim);
  }
  .pill.active{border-color:var(--accent); color:var(--accent);}
  /* V2_100 / Section 2: the carousel navigation now lives exclusively in the compact control above
     the trailer. The retired image-edge arrows and their hover shading are gone; hovering the image
     no longer changes its exposure. Permanent copy-legibility gradients remain untouched. */
  .hero-slide{position:relative;}
  .hero-slide .hero-dim{
    position:absolute; inset:0; background:rgba(0,0,0,0); transition:background .2s ease; pointer-events:none;
  }
  .hero-slide:hover .hero-dim{background:rgba(0,0,0,0);}
  /* v2_59 / Section 2, stage 2 of 4:
     A short brand-navy fade visually joins the bottom of the trailer to the page. It is a separate
     artwork layer rather than a shadow, so it never spills below the rounded frame or muddies the
     following Album Info section. Copy and controls sit above it and retain their original color. */
  .hero-slide .hero-bottom-blend{
    position:absolute; z-index:1; left:0; right:0; bottom:0; height:18%;
    pointer-events:none;
    background:linear-gradient(
      to top,
      var(--bg) 0%,
      rgba(3,11,24,.90) 20%,
      rgba(3,11,24,.52) 52%,
      rgba(3,11,24,.18) 76%,
      rgba(3,11,24,0) 100%
    );
  }
  .hero-slide > .wrap{z-index:2;}
  /* Section 3 poster hover — minimal, two actions only (▶ 30s, + Save). The poster image itself is
     the click target to the album's own page; hover doesn't add a third action for "album info"
     since clicking the poster already goes there.
     Save affordance changed from a ♡ heart icon to plain "+ Save" text, matching the convention
     already established in Frequenoir_My_Selection_Mockup.html (unsaved rows show "+ Save", saved
     rows show "Saved" — no icon either state). Caught from an actual rendered screenshot: the heart
     read as noticeably more decorative/romantic than the rest of the site's restrained, editorial
     tone (small-caps labels, muted gold accent, no other iconography carrying emotional weight like
     that) — a real cross-page inconsistency, not just a style preference, since the same action was
     already using a different, icon-less convention on My Selection. This file now matches. */
  .poster-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; align-items:start;}
  .poster-tile{position:relative; display:block; text-decoration:none; min-width:0;}
  /* Pinterest rhythm without cropping the artwork: every poster remains 2:3, while each visual
     column starts at a different vertical offset. */
  .poster-tile:nth-child(4n+2){transform:translateY(48px);}
  .poster-tile:nth-child(4n+3){transform:translateY(96px);}
  .poster-tile:nth-child(4n+4){transform:translateY(24px);}
  .poster-tile .tile-overlay{
    position:absolute; inset:0; padding:16px; opacity:0; transition:opacity .15s ease;
    background:linear-gradient(180deg,rgba(0,3,10,.62) 0%,transparent 34%,transparent 58%,rgba(0,3,10,.88) 100%);
  }
  .poster-tile:hover .tile-overlay{opacity:1;}
  .poster-tile img{width:100%; height:100%; object-fit:cover; display:block;}
  .tile-overlay > .label{position:absolute; top:16px; left:16px; margin:0!important;}
  .tile-overlay > div > span:first-child{position:absolute; left:16px; bottom:43px; font-size:15px;}
  .tile-overlay > div > span:last-child{position:absolute; top:14px; right:16px; font-size:12px;}
  .tile-overlay > p:last-child{position:absolute; left:16px; bottom:16px; font-size:12px!important;}
  /* Every source artwork is a portrait album poster. Keep one 2:3 frame throughout this section;
     varying card ratios crop the artwork and falsely imply that the source assets have different
     formats. This rule intentionally overrides the old illustrative inline ratios below. */
  .poster-tile > div:first-child{aspect-ratio:2/3 !important; border:0!important;}
  /* Section 3 internal scroll — desktop keeps the bounded scroll region (this is the original
     product idea: browse an extended run of the catalog without leaving the homepage; the nav's
     Search is a different, separate destination for structured filtering, not a duplicate of this).
     Mobile disables the inner scroll instead — two scrollable surfaces stacked under one swipe
     gesture is a real usability problem on touch, so mobile gets a shorter, non-scrolling peek with
     a fade-out and leans on the "Search the collection" link below it instead of an inner gesture. */
  /* Outer border replaced with a solid fill (--card) darker than --bg. First pass used a ~2-point
     lightness step that read as barely different from --bg at this size; bumped to a clearly darker
     step per review so the "recessed tray" effect actually reads instead of looking like a
     rounding error. Now shared with the album/track info panels below (same var), so anything meant
     to look "sunken into the page" uses one consistent color. */
  .collection-scroll{
    height:640px; overflow-y:auto; overflow-x:hidden; background:var(--card); padding:24px;
  }
  @media (max-width:768px){
    .collection-scroll{
      height:380px; overflow:hidden; position:relative;
    }
    .collection-scroll::after{
      content:""; position:absolute; left:0; right:0; bottom:0; height:110px; pointer-events:none;
      background:linear-gradient(0deg, var(--bg) 15%, transparent 100%);
    }
  }
  /* Section 2 track rows use fixed columns so Character, time, Save, License and the chevron stay
     aligned across all ten tracks. Character remains a single, complete comparison field
     (Mood · Intensity · BPM); the description is intentionally allowed two lines. */
  body.player-active{padding-bottom:122px;}
  /* Glassmorphism to match the header: background dropped from near-opaque (.97 alpha, effectively
     solid) to a lightened approved navy surface at 62%
     alpha + backdrop-filter:blur, so scrolled content is visible-but-blurred through it — same
     treatment, same reasoning, and now the same exact color as the header bar above. */
  /* Legacy base inset retained for the mobile/fallback shell. On desktop, the later V2_73 rule is
     authoritative: the mini-player is centered and capped at 1280px, which v2_114 now also uses for
     both header content rows. */
  /* v28 -- Match the approved Mobile Home Shell v34 bottom-tab surface.
     Keep the glass transparency and blur, but use one neutral line and one outer shadow only.
     No directional highlight, inset shadow, gradient or grain: the edge stays visually flat. */
  .mini-player{
    position:fixed; left:40px; right:40px; bottom:20px; z-index:30;
    border:1px solid var(--line); border-radius:18px;
    background:rgba(9,24,44,.64);
    background-image:none;
    background-blend-mode:normal;
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    padding:15px 0;
    box-shadow:0 18px 48px rgba(0,0,0,.48);
    overflow:hidden;
  }
  /* margin-right:-8px added: the button's own padding:8px was pushing the visible × glyph 8px
     inside the wrap's right edge, so it landed short of the guide every other header/footer
     element (logo, Cart, the pills to its left) is flush against. The negative margin cancels
     just that one side of the padding so the glyph itself — not the button's clickable box —
     lines up with the shared 40px guide. */
  .mini-player-close{
    border:0; background:transparent; color:var(--text-faint); cursor:pointer;
    font:inherit; font-size:19px; line-height:1; padding:8px; margin-left:13px; margin-right:-8px;
  }
  .mini-player-close:hover{color:var(--text);}

  /* ========================================================================
     V2 — EDITORIAL HIERARCHY PASS

     The first pass treated brightness, blue and divider lines as generic ways
     to make every piece of information legible. This pass gives each of those
     devices one job instead:
       - near-white: titles and the single most important message only
       - muted blue-white: readable body copy
       - quiet steel: metadata and supporting labels
       - blue: primary conversion and an actively-playing state only
       - surfaces/spacing: grouping; rules are reserved for structural edges
  ======================================================================== */
  :root{
    --bg:#030b18;
    --bg-alt:#071020;
    --card:#030b18;
    --surface:#091628;
    --surface-hover:#0c1a31;
    --line:#223149;
    --text:#eef1f6;
    --text-dim:#b1b8c9;
    --text-ui:#838da4;
    --text-faint:#72809a;
    --accent:#1768c8;
    --accent-hover:#2174d4;
    --accent-soft:#9bbce2;
    --accent-surface:#192f52;
    --state-deep:#01040e;
    --text-receded:#536079;
    --line-strong:var(--text-receded);
    --text-on-accent:#fff;
    --header-night:#01040e;
  }

  body{background:var(--bg); color:var(--text);}
  .label{color:var(--text-faint); font-weight:600; letter-spacing:.15em;}
  .section{border-bottom:0;}

  /* Buttons: shape and fill establish priority. Blue outlines are removed. */
  .btn{
    border-radius:3px;
    transition:background .18s ease,color .18s ease,transform .18s ease;
  }
  .btn-primary{
    background:var(--accent) !important;
    border:0 !important;
    color:var(--text-on-accent) !important;
    box-shadow:0 8px 24px rgba(0,47,112,.22);
  }
  .btn-primary:hover{background:var(--accent-hover) !important; transform:translateY(-1px);}
  .btn-outline{
    background:var(--surface) !important;
    border:0 !important;
    color:var(--text-dim) !important;
    box-shadow:inset 0 0 0 1px var(--line);
  }
  .btn-outline:hover{background:var(--surface-hover) !important; color:var(--text) !important;}

  /* v2_120 — removed the obsolete `body > div:first-of-type` navigation rule.
     The live navigation is now <header>, so that legacy selector was hitting Section 1 instead and
     leaking an unintended bottom rule/shadow into the transition to Featured album. */

  /* Hero/featured framing: art and typography do the separating. */
  .hero-slide{border-bottom:0 !important;}
  .wrap > .label[style*="color:var(--accent)"]{color:var(--text-ui) !important;}
  .hero-slide + div{
    border-bottom:0 !important;
  }
  .hero-slide h2{color:var(--text);}
  .hero-slide h2 + p{color:var(--text-dim) !important;}
  .hero-slide h2 + p + p{color:var(--text-dim) !important;}

  /* Album information is one recessed decision surface, without a perimeter rule. */
  .hero-slide + div{
    background:var(--card) !important;
    padding:54px 0 64px !important;
  }
  .hero-slide + div > .wrap > div:first-child{
    background:var(--surface);
    border-radius:5px;
    padding:24px 26px;
    margin-bottom:30px !important;
  }
  .hero-slide + div > .wrap > div:first-child p:not(.label){color:var(--text-dim) !important;}

  /* Track list: a listening surface rather than a spreadsheet. */
  .track-row{
    display:grid;
    align-items:center;
    grid-template-columns:20px 44px minmax(260px,1fr) 210px 48px 58px 122px 24px;
    gap:14px;
    min-height:78px;
    padding:13px 14px;
    margin:3px 0;
    border-bottom:0 !important;
    border-radius:4px;
    transition:background .15s ease;
  }
  .track-row:hover{background:var(--surface);}

  /* Track number is an index, not an action. */
  .track-row > span:first-child{
    color:var(--text-receded) !important;
    font-size:10px !important;
    letter-spacing:.08em;
    text-align:center;
  }

  /* Play is the primary row affordance: larger target, stronger contrast. */
  .track-row > span:nth-child(2){
    width:38px;
    height:38px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--accent-surface);
    color:var(--accent-soft) !important;
    font-size:13px !important;
    box-shadow:inset 0 0 0 1px var(--line-strong);
    transition:background .15s ease,color .15s ease,transform .15s ease;
  }
  .track-row > span:nth-child(2):hover{
    background:var(--accent);
    color:var(--text-on-accent) !important;
    transform:scale(1.04);
  }
  .track-row > span:nth-child(2) svg{
    width:13px;
    height:13px;
    fill:currentColor;
    display:block;
  }

  /* Playing row: one functional blue signal, no full-width divider. */
  .track-row > span:nth-child(2)[title="Pause"]{
    background:var(--accent);
    color:var(--text-on-accent) !important;
    box-shadow:0 6px 18px rgba(0,63,148,.25);
  }
  .track-row:has(> span:nth-child(2)[title="Pause"]){background:var(--surface-hover);}

  /* Titles lead; descriptions and comparison data step back. */
  .track-row > div:nth-child(3) > p:first-child{
    color:var(--text) !important;
    font-size:14px !important;
    font-weight:500;
    line-height:1.35;
    margin-bottom:4px !important;
  }
  .track-row > div:nth-child(3) > p:last-child{
    color:var(--text-ui) !important;
    font-size:11.5px !important;
    line-height:1.45 !important;
  }
  .track-row > span:nth-child(4),
  .track-row > span:nth-child(5){color:var(--text-ui) !important; font-size:11px !important;}
  .track-row > a:nth-child(6){
    color:var(--text-ui) !important;
    text-decoration:none !important;
    font-size:11px !important;
  }
  .track-row > a:nth-child(6):hover{color:var(--text) !important;}

  /* Per-track purchase is intentionally secondary to Play and album purchase. */
  .track-row > .btn-outline{
    padding:8px 12px !important;
    font-size:10px !important;
    color:var(--text-dim) !important;
    box-shadow:none !important;
    background:var(--surface) !important;
    white-space:nowrap;
  }
  .track-row > span:last-child{color:var(--text-faint) !important; font-size:14px; text-align:center;}

  /* Editorial badges are quiet facts, not additional blue calls-to-action. */
  .track-row > div:nth-child(3) > p:first-child > span{
    color:var(--text-faint) !important;
    font-size:9px !important;
  }

  /* Expanded metadata is grouped by a tonal plane. No enclosing lines. */
  #track01Details{
    background:var(--surface) !important;
    border-radius:4px;
  }
  #track01Details{
    margin:0 14px 12px 92px !important;
    padding:20px 24px !important;
  }
  #track01Details p:not(.label){
    color:var(--text-ui) !important;
    font-size:12px;
    line-height:1.55;
  }

  /* Collection tray is softer and no longer reads like a bordered dashboard widget. */
  .collection-scroll{background:var(--surface); border-radius:5px;}

  /* Step numbers and licensing cards use typographic contrast, not blue framing. */
  p.serif[style*="color:var(--accent)"]{color:var(--text-faint) !important;}
  div[style*="border:1px solid var(--accent)"]{
    border:0 !important;
    background:var(--surface) !important;
    border-radius:5px;
  }
  span[style*="background:var(--accent)"][style*="Custom license"]{
    background:var(--accent-surface) !important;
    color:var(--text-dim) !important;
  }

  /* Pills and player: selected state is a fill, not another blue outline. */
  .pill{border:0; background:var(--surface); color:var(--text-ui);}
  .pill.active{border:0; background:var(--accent-surface); color:var(--accent-soft);}

  /* Closing CTA: compact, calm and editorial. */
  .section .btn-outline{
    padding:13px 22px !important;
    background:var(--surface) !important;
    box-shadow:inset 0 0 0 1px var(--line-strong) !important;
    letter-spacing:.09em;
  }

  @media(max-width:700px){
    .wrap{padding-left:22px; padding-right:22px;}
    .track-row{grid-template-columns:15px 40px minmax(0,1fr) 42px 22px; gap:10px; padding:12px 6px;}
    .track-row > span:nth-child(5){display:block;}
    .track-row > .btn-outline{display:none;}
    #track01Details{margin-left:62px !important; grid-template-columns:1fr !important; gap:18px !important;}
  }

  /* ========================================================================
     V2_1 — GLASS BAR DEPTH + PLAYER CONTROL PROPORTIONS
     Header/player are a restrained lit pane: slightly brighter than the page,
     with one faint edge highlight and a deeper shadow outside the glass.
  ======================================================================== */
  /* v2_120 — the former `body > div:first-of-type` glass-header rule was also removed here.
     Since the live header is no longer a div, this second legacy pass was styling Section 1 and was
     the actual source of the stray divider, glow and shadow above Featured album. */

  .mini-player .pill{
    min-width:0;
    padding:7px 14px;
    border-radius:18px;
    font:inherit;
    font-size:12.5px;
    line-height:1.15;
    cursor:pointer;
    transition:background .18s ease,color .18s ease,border-color .18s ease,transform .12s cubic-bezier(.3,.7,.4,1);
  }
  .mini-player .pill:active{transform:scale(.9);}

  /* V2_6 — only tonal planes; no new panel outlines. */
  .mini-player .pill{
    background:transparent !important;
    border:1px solid var(--accent-surface) !important;
    color:var(--text-ui) !important;
  }
  .mini-player .pill.active{
    background:var(--accent-surface) !important;
    border-color:var(--accent-surface) !important;
    color:var(--text) !important;
  }

  /* V2_16 — completed actions settle into quieter colors already in the system. */
  .track-license-feedback.is-added{
    background:var(--card) !important;
    color:var(--text-faint) !important;
  }
  .track-license-feedback.is-included,
  .track-license-feedback.is-included:hover{
    background:var(--card) !important;
    color:var(--text-faint) !important;
    border-color:var(--line) !important;
    cursor:default !important;
  }
  .save-feedback.is-saved{
    color:var(--text-faint) !important;
  }
  .album-license-added{
    background:rgba(12,26,49,.68) !important;
    color:var(--text-dim) !important;
    box-shadow:inset 0 0 0 1px rgba(151,187,224,.10), 0 8px 20px rgba(0,0,0,.12) !important;
  }

  /* V2_98 — album/track cart-conflict confirmation uses only the existing Frequenoir palette. */
  .cart-conflict-dialog{
    position:fixed;
    inset:0;
    margin:auto;
    width:min(520px,calc(100vw - 32px));
    max-height:min(640px,calc(100vh - 32px));
    padding:0;
    border:1px solid var(--line);
    border-radius:12px;
    background:var(--card);
    color:var(--text);
    box-shadow:0 24px 72px rgba(0,0,0,.52);
  }
  .cart-conflict-dialog::backdrop{
    background:rgba(0,7,16,.76);
    backdrop-filter:blur(6px);
  }
  .cart-conflict-dialog__body{padding:34px;}
  .cart-conflict-dialog__body h2{margin:8px 0 12px; font-size:26px; font-weight:500;}
  .cart-conflict-dialog__copy{margin:0; color:var(--text-dim); font-size:14px; line-height:1.65;}
  .cart-conflict-dialog__actions{display:flex; justify-content:flex-end; gap:12px; margin-top:28px;}
  /* Responsive v31 — keep both cart-conflict choices exactly the same width and lock
     each label to the true horizontal and vertical center of its button. */
  .cart-conflict-dialog__actions .btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex:1 1 0;
    min-width:0;
    min-height:44px;
    white-space:nowrap;
    text-align:center;
  }
  /* This question is already the user's decisive purchase moment, so the confirmation CTA begins
     in the established blue-button hover/glow state. Hover changes only the blue face, not glow or
     position; it must not look as though a second hover is required to discover importance. */
  #albumReplaceConfirm,
  #albumReplaceConfirm:hover,
  #albumReplaceConfirm:focus-visible{
    box-shadow:
      0 0 0 1px rgba(23,104,200,.26),
      0 0 18px rgba(23,104,200,.34),
      0 10px 28px rgba(23,104,200,.24) !important;
    transform:none !important;
  }
  @media (max-width:620px){
    .cart-conflict-dialog__actions{flex-direction:column-reverse;}
    .cart-conflict-dialog__actions .btn{flex:none; width:100%;}
  }

  /* V2_14 — one floating player shape for desktop now and devices later. */
  .mini-player > .wrap{
    grid-template-columns:minmax(250px,1fr) minmax(390px,1.2fr) minmax(285px,1fr) !important;
    gap:28px !important;
  }
  .mini-player .transport-icons{
    gap:22px !important;
  }
  .mini-player .transport-icons span{
    font-size:16.5px !important;
  }
  .mini-player .player-progress{
    width:370px !important;
  }
  /* Responsive v7 — desktop / ultrawide player width contract.
     The floating capsule no longer grows indefinitely with the viewport. It now keeps the restored
     40px desktop safe area; above 1360px its shell stops at 1280px and remains centered.
     The existing 1200px .wrap continues to govern the three content zones, so artwork, transport,
     progress, version pills and close control retain their designed density instead of drifting apart.
     This is desktop-only: the later mobile layout remains a separate component decision. */
  @media(min-width:761px){
    .mini-player{
      left:50% !important;
      right:auto !important;
      width:min(calc(100% - 80px), 1280px);
      transform:translateX(-50%);
    }
  }
  @media(max-width:760px){
    body.player-active{padding-bottom:112px;}
    .mini-player{left:12px; right:12px; bottom:12px; border-radius:18px;}
  }

  /* Full-width drawer revealed by Album info. */
  .album-info-drawer{
    background:var(--state-deep) !important;
    padding:48px 0 56px !important;
  }
  .album-info-drawer[hidden]{display:none !important;}
  .album-info-drawer .track-row{background:transparent;}
  .album-info-drawer .track-row:hover{background:var(--surface);}
  .album-info-drawer .track-row:has(> span:nth-child(2)[title="Pause"]){background:var(--surface-hover);}

  /* Separate sections through filled tonal planes only. */
  #collection{
    padding:76px 0 82px;
    background:var(--bg-alt);
  }
  #collection .collection-scroll{
    background:var(--state-deep) !important;
    box-shadow:none !important;
  }
  #collection .collection-closing{margin-top:58px !important;}
  .how-it-works-section{
    padding:82px 0 94px;
    background:var(--bg);
  }

  /* V2_7 — Section 2 interaction details only. */
  .hero-slide a[title="Save album"],
  .album-info-drawer .track-row > a:nth-child(6){
    text-decoration:none !important;
  }
  .hero-slide a[title="Save album"]:hover,
  .album-info-drawer .track-row > a:nth-child(6):hover{
    color:var(--text) !important;
  }

  #track01Details{
    background:transparent !important;
    border-radius:0 !important;
  }
  #track01Details[hidden]{display:none !important;}
  #track01DetailsToggle{
    transition:transform .16s ease,color .16s ease;
    transform-origin:center;
  }
  #track01DetailsToggle[aria-expanded="true"]{
    transform:rotate(180deg);
    color:var(--accent-soft) !important;
  }

  /* V2_8 — state appears only when the corresponding interaction is active. */
  .track-item-featured{border-bottom:0;}
  .track-item-featured.is-expanded{border-bottom:1px solid var(--line);}

  .album-info-drawer .track-row > span:nth-child(2):hover{
    background:var(--accent) !important;
    color:var(--text-on-accent) !important;
    box-shadow:none !important;
  }

  .album-info-drawer .track-row:hover > .btn-outline{
    background:var(--accent-surface) !important;
    color:var(--text) !important;
    box-shadow:0 6px 16px rgba(0,0,0,.18) !important;
    transform:translateY(-1px);
  }
  .album-info-drawer .track-row > .btn-outline:hover{
    background:var(--accent) !important;
    color:var(--text-on-accent) !important;
    box-shadow:0 8px 20px rgba(0,47,112,.22) !important;
  }

  /* V2_9 — every track shares one real default/hover/playing state machine. */
  .album-info-drawer .track-row > span:nth-child(2){user-select:none;}
  .album-info-drawer .track-row > div:nth-child(3) > p,
  .album-info-drawer .track-row > span:nth-child(4),
  .album-info-drawer .track-row > span:nth-child(5),
  .album-info-drawer .track-row > a:nth-child(6),
  .album-info-drawer .track-row > .btn-outline{
    transition:color .15s ease,background .15s ease,font-weight .15s ease,box-shadow .15s ease,transform .15s ease;
  }

  .album-info-drawer .track-row:has(> span:nth-child(2)[title="Pause"]) > div:nth-child(3) > p:first-child{
    color:var(--text) !important;
    font-weight:600 !important;
  }
  .album-info-drawer .track-row:has(> span:nth-child(2)[title="Pause"]) > div:nth-child(3) > p:last-child{
    color:var(--text-dim) !important;
    font-weight:500 !important;
  }
  .album-info-drawer .track-row:has(> span:nth-child(2)[title="Pause"]) > span:nth-child(4),
  .album-info-drawer .track-row:has(> span:nth-child(2)[title="Pause"]) > span:nth-child(5),
  .album-info-drawer .track-row:has(> span:nth-child(2)[title="Pause"]) > a:nth-child(6){
    color:var(--text-dim) !important;
    font-weight:500 !important;
  }
  .album-info-drawer .track-row:has(> span:nth-child(2)[title="Pause"]) > .btn-outline{
    background:var(--accent-surface) !important;
    color:var(--text) !important;
    font-weight:600 !important;
    box-shadow:0 6px 16px rgba(0,0,0,.18) !important;
  }

  /* V2_10 — album-wide information reads as a framed header, not a track. */
  .album-info-drawer > .wrap > div:first-child{
    background:var(--bg-alt) !important;
    border:1px solid rgba(151,187,224,.10);
    box-shadow:none !important;
  }

  /* V2_12 — clearer glass control and motionless primary-button hover. */
  #albumInfoToggle{
    background:rgba(12,26,49,.68) !important;
    border:1px solid rgba(151,187,224,.10) !important;
    box-shadow:0 8px 20px rgba(0,0,0,.18) !important;
    backdrop-filter:blur(8px) saturate(110%);
    -webkit-backdrop-filter:blur(8px) saturate(110%);
  }
  #albumInfoToggle:hover,
  #albumInfoToggle[aria-expanded="true"]{
    background:rgba(25,47,82,.78) !important;
    border-color:rgba(151,187,224,.14) !important;
    color:var(--text) !important;
    box-shadow:0 10px 24px rgba(0,0,0,.22) !important;
  }
  .btn-primary:hover{
    transform:none !important;
  }

  /* V2_13 — editorial secondary CTAs share the Album Info glass hierarchy. */
  .secondary-cta{
    background:rgba(12,26,49,.68) !important;
    box-shadow:inset 0 0 0 1px rgba(151,187,224,.10), 0 8px 20px rgba(0,0,0,.12) !important;
  }
  .secondary-cta:hover{
    background:rgba(25,47,82,.78) !important;
    color:var(--text) !important;
    box-shadow:inset 0 0 0 1px rgba(151,187,224,.14), 0 10px 24px rgba(0,0,0,.16) !important;
    transform:none !important;
  }

  /* V2_17 — completed states outrank row hover and playing-state brightness. */
  .album-info-drawer .track-row > .track-license-feedback.is-added,
  .album-info-drawer .track-row:hover > .track-license-feedback.is-added,
  .album-info-drawer .track-row > .track-license-feedback.is-added:hover,
  .album-info-drawer .track-row:has(> span:nth-child(2)[title="Pause"]) > .track-license-feedback.is-added{
    background:var(--state-deep) !important;
    color:var(--text-faint) !important;
    box-shadow:inset 0 0 0 1px var(--line) !important;
    transform:none !important;
    font-weight:500 !important;
  }
  .save-feedback.is-saved,
  .hero-slide .save-feedback.is-saved:hover,
  .album-info-drawer .track-row:hover > .save-feedback.is-saved,
  .album-info-drawer .track-row:has(> span:nth-child(2)[title="Pause"]) > .save-feedback.is-saved{
    color:var(--text-faint) !important;
    font-weight:400 !important;
  }
  .album-info-drawer .track-row:has(> span:nth-child(2)[title="Pause"]) > span:nth-child(5){
    color:var(--accent-soft) !important;
    font-weight:600 !important;
  }

  /* V2_19 — SAVED visually matches the adjacent resting duration. */
  .album-info-drawer .track-row > .save-feedback.is-saved,
  .album-info-drawer .track-row:hover > .save-feedback.is-saved,
  .album-info-drawer .track-row:has(> span:nth-child(2)[title="Pause"]) > .save-feedback.is-saved{
    color:var(--text-receded) !important;
    font-size:11px !important;
    font-weight:400 !important;
  }

  /* V2_20 — rounded posters, legible edge shading and quiet glass preview controls. */
  #collection{
    background:var(--card) !important;
  }
  .poster-tile > div:first-child,
  .poster-tile .tile-overlay{
    border-radius:7px;
  }
  .poster-tile .tile-overlay{
    background:linear-gradient(180deg,rgba(3,11,24,.82) 0%,transparent 32%,transparent 54%,rgba(3,11,24,.92) 100%);
  }
  .poster-tile:hover > div:first-child{
    box-shadow:0 16px 30px rgba(0,0,0,.28),0 -10px 24px rgba(0,0,0,.16);
  }
  .tile-overlay > .label{
    color:var(--text-faint) !important;
    font-size:10px !important;
    font-weight:500 !important;
  }
  .tile-overlay > div > span:last-child{
    color:var(--text-dim) !important;
    font-size:12px !important;
    font-weight:500 !important;
  }
  .tile-overlay > div > span:first-child{
    left:16px;
    bottom:54px;
    width:52px;
    height:52px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(12,26,49,.68);
    box-shadow:inset 0 0 0 1px rgba(151,187,224,.10),0 8px 20px rgba(0,0,0,.18);
    backdrop-filter:blur(8px) saturate(110%);
    -webkit-backdrop-filter:blur(8px) saturate(110%);
    color:var(--text-dim) !important;
    font-size:11px !important;
    font-weight:500;
    cursor:pointer;
    transition:background .18s ease,color .18s ease,box-shadow .18s ease;
  }
  .tile-overlay > div > span:first-child:hover,
  .tile-overlay > div > span:first-child.is-previewing{
    background:rgba(25,47,82,.78);
    color:var(--text) !important;
    box-shadow:inset 0 0 0 1px rgba(151,187,224,.14),0 10px 24px rgba(0,0,0,.22);
  }
  .tile-overlay > p:last-child{
    color:var(--text-faint) !important;
  }

  /* V2_21 — poster interaction is neutral glass, independent of album artwork color. */
  .poster-tile .tile-overlay{
    background:rgba(0,0,0,.40) !important;
  }
  .tile-overlay > .label{
    color:rgba(255,255,255,.80) !important;
    font-size:10px !important;
    font-weight:500 !important;
  }
  .poster-tile .tile-overlay .save-feedback:not(.is-saved){
    color:rgba(255,255,255,.96) !important;
    font-weight:600 !important;
  }
  .poster-tile .tile-overlay .save-feedback.is-saved{
    color:rgba(255,255,255,.56) !important;
    font-weight:500 !important;
  }
  .tile-overlay > p:last-child{
    color:rgba(255,255,255,.78) !important;
    font-weight:400 !important;
  }
  .tile-overlay > div > span:first-child{
    background:linear-gradient(145deg,rgba(255,255,255,.16),rgba(255,255,255,.045)) !important;
    border:1px solid rgba(255,255,255,.40) !important;
    color:rgba(255,255,255,.70) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.18),
      inset 0 -1px 0 rgba(255,255,255,.035),
      0 8px 22px rgba(0,0,0,.24) !important;
    backdrop-filter:blur(10px) saturate(105%);
    -webkit-backdrop-filter:blur(10px) saturate(105%);
  }
  .tile-overlay > div > span:first-child:hover,
  .tile-overlay > div > span:first-child.is-previewing{
    background:linear-gradient(145deg,rgba(255,255,255,.22),rgba(255,255,255,.07)) !important;
    border-color:rgba(255,255,255,.58) !important;
    color:rgba(255,255,255,.84) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.24),
      inset 0 -1px 0 rgba(255,255,255,.05),
      0 10px 26px rgba(0,0,0,.30) !important;
  }

  /* V2_22 — preview, save, genre, then destination link. */
  .tile-overlay > .label{
    color:rgba(255,255,255,.74) !important;
  }
  .poster-tile .tile-overlay .save-feedback:not(.is-saved){
    color:rgba(255,255,255,.92) !important;
  }
  .tile-overlay > div > span:first-child{
    width:56px;
    height:56px;
    color:rgba(255,255,255,.84) !important;
  }
  .tile-overlay > p:last-child{
    color:rgba(255,255,255,.62) !important;
    text-decoration:underline;
    text-decoration-thickness:1px;
    text-underline-offset:4px;
  }

  /* V2_23 — closer link underline and explicit saved/playing states. */
  .tile-overlay > div > span:first-child{
    bottom:44px;
    gap:4px;
  }
  .tile-overlay .preview-icon{
    font-size:11px;
    line-height:1;
  }
  .tile-overlay .preview-duration{
    font-size:15px;
    line-height:1;
  }
  .tile-overlay .preview-pause{
    font-size:22px;
    line-height:1;
    letter-spacing:.08em;
  }
  .tile-overlay > .label,
  .tile-overlay > p:last-child{
    transition:color .16s ease,opacity .16s ease;
  }
  .tile-overlay > .label:hover{
    color:rgba(255,255,255,.90) !important;
  }
  .tile-overlay > p:last-child{
    text-underline-offset:1px;
    text-decoration-thickness:1px;
    text-decoration-skip-ink:auto;
  }
  .tile-overlay > p:last-child:hover{
    color:rgba(255,255,255,.86) !important;
  }
  .poster-tile .tile-overlay .save-feedback:not(.is-saved){
    font-weight:500 !important;
  }
  .poster-tile .tile-overlay .save-feedback{
    top:5px;
    right:7px;
    width:64px;
    height:32px;
    padding:0;
    border-radius:8px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:12px !important;
    line-height:1;
  }
  .poster-tile .tile-overlay .save-feedback.is-saved{
    background:rgba(0,0,0,.56);
    color:rgba(255,255,255,.54) !important;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 8px 20px rgba(0,0,0,.20);
    font-weight:500 !important;
  }
  .tile-overlay > div > span:first-child.is-previewing,
  .tile-overlay > div > span:first-child.is-previewing:hover{
    background:linear-gradient(145deg,rgba(0,0,0,.60),rgba(0,0,0,.34)) !important;
    border-color:rgba(255,255,255,.28) !important;
    color:rgba(255,255,255,.72) !important;
    box-shadow:
      inset 0 4px 12px rgba(0,0,0,.50),
      inset 0 1px 0 rgba(255,255,255,.07),
      0 5px 14px rgba(0,0,0,.18) !important;
    backdrop-filter:blur(12px) saturate(90%);
    -webkit-backdrop-filter:blur(12px) saturate(90%);
  }
  .poster-tile:has(.save-feedback.is-saved) .tile-overlay,
  .poster-tile:has(.is-previewing) .tile-overlay{
    opacity:1;
  }

  /* V2_18 — four clear text levels inside a track row. */
  .album-info-drawer .track-row > span:nth-child(5){
    color:var(--text-receded) !important;
    font-weight:400 !important;
  }
  .save-feedback:not(.is-saved){
    color:var(--text-dim) !important;
    font-weight:500 !important;
  }
  .save-feedback.is-saved,
  .hero-slide .save-feedback.is-saved:hover,
  .album-info-drawer .track-row:hover > .save-feedback.is-saved,
  .album-info-drawer .track-row:has(> span:nth-child(2)[title="Pause"]) > .save-feedback.is-saved{
    color:var(--text-receded) !important;
    font-weight:400 !important;
  }
  .album-info-drawer .track-row:has(> span:nth-child(2)[title="Pause"]) > span:nth-child(5){
    color:var(--accent-soft) !important;
    font-weight:600 !important;
  }

  /* V2_25 — saved and previewing are independent poster states. */
  .poster-tile .tile-overlay{
    opacity:1 !important;
    background:rgba(0,0,0,0) !important;
    transition:background .18s ease;
  }
  .poster-tile .tile-overlay > .label,
  .poster-tile .tile-overlay > div > span:first-child,
  .poster-tile .tile-overlay > div > span:last-child,
  .poster-tile .tile-overlay > p:last-child{
    opacity:0;
    transition:opacity .16s ease,color .16s ease,background .16s ease,box-shadow .16s ease;
  }
  .poster-tile .tile-overlay > div > span:first-child,
  .poster-tile .tile-overlay > div > span:last-child{
    pointer-events:none;
  }
  .poster-tile:hover .tile-overlay,
  .poster-tile:has(.is-previewing) .tile-overlay{
    background:rgba(0,0,0,.40) !important;
  }
  .poster-tile:hover .tile-overlay > .label,
  .poster-tile:hover .tile-overlay > div > span:first-child,
  .poster-tile:hover .tile-overlay > div > span:last-child,
  .poster-tile:hover .tile-overlay > p:last-child,
  .poster-tile:has(.is-previewing) .tile-overlay > .label,
  .poster-tile:has(.is-previewing) .tile-overlay > div > span:first-child,
  .poster-tile:has(.is-previewing) .tile-overlay > div > span:last-child,
  .poster-tile:has(.is-previewing) .tile-overlay > p:last-child{
    opacity:1;
  }
  .poster-tile:hover .tile-overlay > div > span:first-child,
  .poster-tile:hover .tile-overlay > div > span:last-child,
  .poster-tile:has(.is-previewing) .tile-overlay > div > span:first-child,
  .poster-tile:has(.is-previewing) .tile-overlay > div > span:last-child,
  .poster-tile:has(.save-feedback.is-saved) .tile-overlay > div > .save-feedback.is-saved{
    pointer-events:auto;
  }
  .poster-tile:has(.save-feedback.is-saved) .tile-overlay > div > .save-feedback.is-saved{
    opacity:1;
  }

  /* V2_26 — the established accent blue behaves like a restrained light source on hover. */
  .btn-primary{
    transition:background .18s ease,box-shadow .18s ease,transform .18s ease !important;
  }
  .btn-primary:hover{
    box-shadow:
      0 0 0 1px rgba(23,104,200,.26),
      0 0 18px rgba(23,104,200,.34),
      0 10px 28px rgba(23,104,200,.24) !important;
  }
  #heroHighlightToggle{
    min-width:186px;
    text-align:center;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
  }
  #heroHighlightToggle svg{
    width:14px;
    height:14px;
    flex:0 0 auto;
    fill:currentColor;
    display:block;
  }
  #heroHighlightToggle.is-listening{
    background:var(--accent) !important;
    box-shadow:
      inset 0 3px 9px rgba(0,0,0,.24),
      0 0 10px rgba(23,104,200,.18) !important;
    transform:none !important;
  }

  /* V2_27 — Album Info is a disclosure, so its open state presses inward instead of navigating away. */
  #albumInfoToggle[aria-expanded="true"],
  #albumInfoToggle[aria-expanded="true"]:hover{
    background:linear-gradient(to bottom,rgba(0,0,0,.38),rgba(12,26,49,.58)) !important;
    border-color:rgba(151,187,224,.10) !important;
    color:var(--text-dim) !important;
    box-shadow:
      inset 0 5px 12px rgba(0,0,0,.44),
      inset 0 1px 0 rgba(255,255,255,.025),
      0 5px 14px rgba(0,0,0,.14) !important;
    transform:none !important;
  }
  .mini-player .pill:not(.active):hover{
    border-color:var(--accent-soft) !important;
    color:var(--text-dim) !important;
  }

  /* V2_28 — expanded metadata follows the title column and never enters the license column. */
  .track-details,
  .album-info-drawer #track01Details.track-details{
    margin:0 52px 12px 106px !important;
    padding:20px 0 !important;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:42px !important;
    min-width:0;
    background:transparent !important;
  }
  .track-details[hidden],
  .album-info-drawer #track01Details.track-details[hidden]{display:none !important;}
  .track-details > div,
  .track-details p{min-width:0; max-width:100%;}
  .track-details p:not(.label){
    color:var(--text-ui) !important;
    font-size:12px !important;
    line-height:1.55 !important;
    overflow-wrap:break-word;
    word-break:normal;
  }
  .track-details-toggle{
    transition:transform .16s ease,color .16s ease;
    transform-origin:center;
  }
  .track-details-toggle[aria-expanded="true"]{
    transform:rotate(180deg);
    color:var(--accent-soft) !important;
  }
  .track-item-featured.is-expanded{border-bottom:1px solid var(--line);}

  /* Metadata is searchable product data. Each term becomes a search link on hover. */
  .metadata-link{
    color:inherit;
    text-decoration:none;
    text-underline-offset:3px;
  }
  .metadata-link:hover,
  .metadata-link:focus-visible{
    color:var(--text-dim);
    text-decoration:underline;
  }
  /* Each separator + metadata term is one atomic wrap unit. Lines may break before the unit, never
     inside Cover-up / Identity deception or across the following action column. */
  .meta-unit{display:inline-block; white-space:nowrap; max-width:100%;}
  .album-info-drawer > .wrap > div:first-child > div{min-width:0;}
  .album-info-drawer > .wrap > div:first-child p:not(.label),
  .track-details p:not(.label){
    max-width:100%;
    overflow-wrap:normal;
    word-break:normal;
  }

  @media(max-width:900px){
    .track-details{
      margin-left:92px !important;
      margin-right:14px !important;
      grid-template-columns:1fr !important;
      gap:18px !important;
    }
  }

  /* V2_35 — the open section uses mathematically matching top/bottom breathing room:
     32px on desktop and 24px on compact screens. Shadow and inner glow remain. */
  #albumInfoPanel:not([hidden]){
    position:relative;
    z-index:2;
    padding-top:32px !important;
    padding-bottom:32px !important;
    background:
      linear-gradient(
        to top,
        rgba(31,92,164,.12) 0%,
        rgba(24,72,132,.055) 22px,
        rgba(15,46,88,0) 52px
      ),
      var(--state-deep) !important;
  }
  #albumInfoPanel:not([hidden])::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:-34px;
    height:34px;
    pointer-events:none;
    background:linear-gradient(to bottom,rgba(0,0,0,.30),rgba(0,0,0,.12) 38%,rgba(0,0,0,0));
  }

  /* V2_32 — the frame uses one equal inset on all four sides, reduced about 20% from V2_31. */
  #albumInfoPanel:not([hidden]) > .wrap{
    position:relative;
    padding:18px !important;
    border:1px solid rgba(151,187,224,.14);
    border-radius:16px;
    background:
      linear-gradient(to bottom,rgba(151,187,224,.045),rgba(151,187,224,0) 92px),
      linear-gradient(to top,rgba(151,187,224,.032),rgba(151,187,224,0) 104px);
    box-shadow:
      inset 0 1px 0 rgba(151,187,224,.035),
      inset 0 -1px 0 rgba(151,187,224,.022);
  }
  @media(max-width:900px){
    #albumInfoPanel:not([hidden]){
      padding-top:24px !important;
      padding-bottom:24px !important;
    }
    #albumInfoPanel:not([hidden]) > .wrap{
      margin-left:14px;
      margin-right:14px;
      padding:14px !important;
      border-radius:12px;
    }
  }

  .collection-closing-copy{white-space:nowrap;}
  @media(max-width:900px){
    .collection-closing-copy{
      white-space:normal;
      font-size:30px !important;
    }
  }
  /* v2_40 HEADER STUDY — one shared grid controls both rows, so every paired
     utility/navigation item uses the same horizontal axis. */
  .fq-header-v40{
    --header-progress:0;
    position:fixed; top:0; left:0; right:0; z-index:45;
    width:100%; color:var(--text);
    background:linear-gradient(to bottom,
      rgba(1,4,14,.98) 0%, rgba(1,4,14,.76) 24%,
      rgba(1,4,14,.38) 43%, rgba(1,4,14,0) 60%);
    /* v2_113 — MY OWN MISTAKE FROM v2_112, CORRECTED.
       I added border-bottom-color:transparent last round, reading v2_107's THIRD .fq-header-v40
       pass in isolation. v2_107 actually has a FOURTH, later .fq-header-v40 pass that re-declares
       the full border-bottom:1px solid rgba(133,153,184,.20) shorthand, which resets color and
       wins the cascade — so the true final line-2 color was never transparent. That's exactly the
       "line 2 turned black" report: it wasn't black, it was invisible, showing the hero's dark
       background through it instead of a real stroke. Removing the transparent override restores
       the visible rgba(133,153,184,.20) line — the same color .fq-header-v40::before already uses
       for line 1 below the logo, so the two divider lines now match as requested. */
    border-bottom:1px solid var(--line);
    /* v2_124 — GLASS HEADER SURFACE:
       Preserve the approved header gradient, lines, typography and scroll shadow. Blur only the
       page/image passing behind the fixed header so future full-bleed hero artwork cannot reduce
       navigation legibility. This is the same optical role as the mini-player glass, not a new
       visible overlay or color treatment. */
    backdrop-filter:blur(14px) saturate(112%);
    -webkit-backdrop-filter:blur(14px) saturate(112%);
    box-shadow:none;
    transition:box-shadow .28s ease;
  }
  .fq-header-v40::after{
    content:''; position:absolute; inset:0; z-index:0;
    background:var(--header-night); background-image:none;
    opacity:var(--header-progress); pointer-events:none;
    transition:none; box-shadow:none;
  }
  .fq-header-v40.is-scrolled::after{opacity:1}

  /* Responsive v7 — HEADER CONTENT WIDTH: 1280px CAP + 40px SAFE AREA.
     The header background, glass treatment and divider lines remain full-bleed across the viewport,
     but both live header rows now share the mini-player's approved desktop width contract:
     max 1280px, centered, with 40px minimum side clearance. This preserves the wide/cinematic field
     while preventing search, navigation and account controls from drifting into disconnected groups
     on ultrawide displays. Body sections still use the separate 1200px .wrap reading column.
     Keep .fq-guide and .wrap separate; only their roles differ, not by accident. */
  .fq-guide{
    width:min(calc(100% - 80px), 1280px);
    margin-left:auto;
    margin-right:auto;
    padding-left:0;
    padding-right:0;
  }
  /* v2_110 — removed dead .fq-header-grid rule: defined but never applied to any element
     (header layout is handled by .fq-masthead-v41 / .fq-primary-v41 instead). */
  .fq-masthead{
    min-height:78px;
    align-items:center;
    border-bottom:1px solid var(--line);
  }
  .fq-primary{min-height:52px;align-items:stretch}
  .fq-pair{
    min-width:0;
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:stretch;
    padding:0 32px;
  }
  .fq-pair > *{display:flex;align-items:center;justify-content:center;min-width:0}
  .fq-center-logo{display:flex;align-items:center;justify-content:center}
  .fq-wordmark{display:block;width:clamp(220.5px,15.75vw,256.2px);height:auto}
  .fq-center-nav{
    min-width:0;
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    border-left:1px solid rgba(133,153,184,.20);
    border-right:1px solid rgba(133,153,184,.20);
  }
  .fq-utility-link,.fq-index-link{
    font-family:'Cormorant SC',serif;
    text-transform:uppercase;
    white-space:nowrap;
    color:var(--text-dim);
    text-decoration:none;
  }
  .fq-utility-link{font-size:15px;letter-spacing:.035em;padding:4px 0}
  .fq-utility-link:not(.fq-join):hover{
    color:var(--text);
    text-decoration:underline;
    text-decoration-thickness:1px;
    text-underline-offset:2px;
  }
  .fq-join{
    min-width:118px;
    min-height:38px;
    padding:7px 20px 6px;
    border:1px solid var(--line-strong);
    border-radius:999px;
    background:rgba(9,22,40,.62);
    transition:background .18s ease,border-color .18s ease;
  }
  .fq-join:hover{background:var(--surface-hover);border-color:var(--line-strong)}
  .fq-index-link{
    position:relative;
    min-height:52px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:16px;
    font-weight:500;
    letter-spacing:.025em;
  }
  .fq-index-link::after{
    content:'';
    position:absolute;
    left:0;right:0;bottom:0;
    height:2px;
    background:var(--accent);
    transform:scaleX(0);
    transform-origin:center;
    transition:transform .2s ease;
  }
  .fq-index-link:hover{color:var(--text)}
  .fq-index-link:hover::after,.fq-index-link.is-active::after{transform:scaleX(1)}
  .fq-index-link.is-active{color:var(--text-receded);font-weight:700}
  @media(max-width:1500px){
    .fq-pair{padding:0 20px}
    .fq-wordmark{width:210px}
    .fq-utility-link{font-size:14px}
    .fq-index-link{font-size:15px}
  }


  .fq-info-stack{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:4px;
  }
  .fq-account-row{display:flex;align-items:center;justify-content:flex-end;gap:26px}
  .fq-masthead-v41 .fq-utility-link{
    color:var(--text-faint);
    font-size:12px;
    letter-spacing:.025em;
    line-height:1.15;
  }
  .fq-masthead-v41 .fq-join{
    min-width:108px;
    min-height:30px;
    padding:4px 17px 3px;
    color:var(--text-dim);
  }
  .fq-primary-v41{
    min-height:52px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
  }
  .fq-primary-v41 .fq-index-link{
    display:inline-flex;
    flex:0 0 auto;
    min-height:52px;
    padding:0;
    font-size:15px;
  }
  .fq-primary-v41 .fq-index-link::after{
    bottom:10px;
    height:1px;
    background:currentColor;
    transform-origin:center;
  }
  .fq-primary-v41 .fq-index-link:hover{color:var(--text)}
  .fq-primary-v41 .fq-index-link:focus:not(:focus-visible){outline:none}
  .fq-primary-v41 .fq-index-link.is-active{
    color:var(--text-receded);
    font-weight:700;
  }
  .fq-nav-separator{
    flex:0 0 auto;
    width:1px;
    height:15px;
    background:rgba(133,153,184,.32);
  }
  @media(max-width:1250px){
    .fq-primary-v41{gap:10px}
    .fq-primary-v41 .fq-index-link{font-size:14px}
  }

  /* v2_42 — requested corrections only. */
  .fq-header-v40::before{
    content:'';
    position:absolute;
    z-index:2;
    top:77px;
    left:0;
    right:0;
    height:1px;
    /* v2_120 — both header dividers use the same opaque line token so their perceived color
       cannot diverge because one sits over the gradient and the other sits on the header edge. */
    background:var(--line);
    pointer-events:none;
  }
  /* v2_111 — RESTORED MISSING GRID (the real regression behind the "JOIN US/CART drift" bug).
     The original v2_107 had .fq-masthead-v41{ display:grid; grid-template-columns:1fr auto 1fr;
     align-items:center; ... } — symmetric 1fr/auto/1fr columns are what keep the logo truly centered
     regardless of the search form (left) and JOIN US+CART (right) having very different widths.
     The v2_108 cleanup pass dropped display/grid-template-columns/align-items entirely, apparently
     confusing this live .fq-masthead-v41 rule with an old, unrelated, unused .fq-masthead rule
     (no -v41 suffix, still sitting dead in this stylesheet a bit above this line — not touched here,
     flagged separately). Without the grid, the three children fall back to normal flow with no
     defined relationship between them, which is why JOIN US/CART rendered in different, inconsistent
     positions across screenshots instead of staying pinned to the guide's right edge. */
  .fq-masthead-v41{min-height:78px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; border-bottom:0}
  .fq-info-stack{gap:4px}
  .fq-masthead-v41 .fq-info-stack .fq-utility-link{
    color:var(--text-faint);
    font-size:12px;
    line-height:1.12;
    padding:0;
  }
  .fq-masthead-v41 .fq-info-stack .fq-utility-link:hover{
    color:var(--text-dim);
    text-decoration:underline;
    text-decoration-thickness:1px;
    text-underline-offset:2px;
  }
  /* v2_112 — restored shared resting-state color, dropped in the v2_108 cleanup; without it
     these links fell back to the generic site-wide .fq-utility-link,.fq-index-link color
     (var(--text-dim)) instead of this header-specific tone. */
  .fq-primary-v41 .fq-index-link,
  .fq-masthead-v41 .fq-account-row .fq-utility-link{color:var(--text-ui);}
  .fq-masthead-v41 .fq-account-row .fq-utility-link{
    color:var(--text-dim);
    font-size:15px;
    letter-spacing:.025em;
    line-height:1.15;
  }
  .fq-masthead-v41 .fq-account-row .fq-utility-link:hover{
    color:var(--text);
    text-decoration:underline;
    text-decoration-thickness:1px;
    text-underline-offset:2px;
  }
  .fq-primary-v41 .fq-index-link::after{display:none}
  .fq-primary-v41 .fq-index-link:hover,
  .fq-primary-v41 .fq-index-link.is-active{
    text-decoration:underline;
    text-decoration-thickness:1px;
    text-underline-offset:2px;
  }
  .fq-nav-separator{width:2px}











  .fq-header-v40 + div{
    min-height:100vh !important;
    padding-top:130px;
  }








  /* v2_60 / Section 2, stage 3 of 4:
     The Album Info drawer now uses the exact same outside width as the approved 16:9 trailer.
     This is a responsive reflow, not a transform scale: typography, buttons and hit targets retain
     their approved sizes while column widths, gaps and permitted copy wrapping absorb the narrower
     measure. The full-width drawer fill and its trailing shadow are removed so only the framed
     album/track surface remains on the site's main background. */
  #albumInfoPanel:not([hidden]){
    background:transparent !important;
    padding:32px 0 !important;
  }
  #albumInfoPanel:not([hidden])::after{display:none !important;}
  #albumInfoPanel:not([hidden]) > .wrap{
    width:calc(100% - 80px);
    max-width:1120px;
    margin-left:auto;
    margin-right:auto;
    padding:18px !important;
  }
#albumInfoPanel:not([hidden]) > .wrap > .album-detail-summary{
    padding:24px 26px !important;
    margin-bottom:30px !important;
    border-radius:5px;
}
#albumInfoPanel:not([hidden]) > .wrap > div:first-child > div:last-child > p:last-child{
  white-space:nowrap;
}
  #albumInfoPanel:not([hidden]) .track-row{
    grid-template-columns:
      20px
      44px
      minmax(300px,1fr)
      minmax(180px,210px)
      48px
      58px
      122px
      24px;
    gap:12px;
    min-height:88px;
    padding:14px 12px;
  }
  #albumInfoPanel:not([hidden]) .track-row > div:nth-child(3) > p:last-child{
    white-space:normal;
    overflow-wrap:break-word;
    max-width:100%;
  }
  #albumInfoPanel:not([hidden]) .track-row > span:nth-child(4),
  #albumInfoPanel:not([hidden]) .track-row > span:nth-child(5),
  #albumInfoPanel:not([hidden]) .track-row > a:nth-child(6),
  #albumInfoPanel:not([hidden]) .track-row > .btn-outline{
    white-space:nowrap;
  }
  #albumInfoPanel:not([hidden]) .track-details{
    margin:0 48px 12px 100px !important;
    gap:32px !important;
  }
  @media(max-width:980px){
    #albumInfoPanel:not([hidden]) > .wrap{
      width:calc(100% - 80px);
    }
  }

  /* v2_62 / Stage 3 correction pass:
     Album-level discovery values step down by one pixel and one existing text token so the
     hierarchy remains: track title/description first, album metadata second. Track-level expanded
     metadata keeps its existing equal 12px treatment. The original expanded-row dividers are kept
     for tracks 1–9; only the final track omits its redundant closing rule. */
  #albumInfoPanel:not([hidden]) > .wrap > div:first-child > div:not(:last-child) > p:not(.label){
    font-size:12px !important;
    color:var(--text-ui) !important;
    font-weight:400;
  }
  #albumInfoPanel .track-item-featured.is-expanded{
    border-bottom:1px solid var(--line) !important;
  }
  #albumInfoPanel > .wrap > div:last-child > .track-item-featured:last-child.is-expanded{
    border-bottom:0 !important;
  }
  /* The existing 64px internal hero breathing room remains. Removing the drawer's extra 32px top
     pad reduces the perceived button-to-frame gap from 96px to 64px: exactly one third tighter. */
  #albumInfoPanel:not([hidden]){
    padding-top:0 !important;
  }

  /* v2_65 / Corrected track-detail depth cue.
     The tonal plane belongs to the complete expanded row, not to the three metadata columns.
     The pseudo-element therefore extends from the track-number edge through the chevron edge and
     from directly beneath the title/logline row to the divider. The existing main navy is blended
     in Multiply at 40%, producing a darker navy shadow instead of the lighter blue tint in v2_64.
     A short bottom feather prevents the shadow from ending as a hard-edged rectangle. */
  #albumInfoPanel .track-item-featured.is-expanded > .track-details{
    position:relative;
    isolation:isolate;
    background:transparent !important;
  }
  #albumInfoPanel .track-item-featured.is-expanded > .track-details::before{
    content:"";
    position:absolute;
    z-index:0;
    left:-100px;
    right:-48px;
    top:0;
    bottom:-12px;
    border-radius:4px 4px 0 0;
    /* v67: retain the header-night hue at half strength. */
    background:rgba(1,5,15,.50);
    mix-blend-mode:normal;
    opacity:1;
    /* Shorter 56% reach with a long, cloud-soft feather. */
    -webkit-mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.88) 16%,rgba(0,0,0,.48) 34%,rgba(0,0,0,.14) 49%,transparent 56%);
    mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.88) 16%,rgba(0,0,0,.48) 34%,rgba(0,0,0,.14) 49%,transparent 56%);
    pointer-events:none;
  }
  #albumInfoPanel .track-item-featured.is-expanded > .track-details > *{
    position:relative;
    z-index:1;
  }

  /* v68: track 10 has no redundant internal closing rule. When it is expanded,
     remove only the frame's trailing inset so the outer border occupies the exact
     vertical position that the final track divider would otherwise occupy. */
  #albumInfoPanel:not([hidden]) > .wrap:has(
    > div:last-child > .track-item-featured:last-child.is-expanded
  ){
    padding-bottom:0 !important;
  }

  /* v69 / Homepage-only carousel control preview.
     This compact control replaces both the former dots and the image-overlay arrow rails.
     It is intentionally visual-only in this pass; album-state switching is wired only after
     position, scale and interaction tones are approved. */
  .featured-carousel-control{
    display:flex;
    align-items:center;
    gap:12px;
    color:var(--text-faint);
  }
  .featured-carousel-control button{
    width:44px;
    height:30px;
    padding:0;
    border:0;
    background:transparent;
    color:var(--text-ui);
    display:grid;
    place-items:center;
    cursor:pointer;
    transition:color .16s ease,transform .16s ease;
  }
  .featured-carousel-control button:hover,
  .featured-carousel-control button:focus-visible{
    color:var(--text-dim);
    outline:none;
  }
  .featured-carousel-control button:first-child:hover{transform:translateX(-2px);}
  .featured-carousel-control button:last-child:hover{transform:translateX(2px);}
  .featured-carousel-control button:disabled{
    color:var(--text-faint);
    opacity:.30;
    cursor:default;
    transform:none;
  }
  .carousel-arrow-mark{
    position:relative;
    display:block;
    width:34px;
    height:12px;
  }
  .carousel-arrow-mark::before{
    content:"";
    position:absolute;
    left:2px;
    right:2px;
    top:50%;
    height:1px;
    background:currentColor;
    transform:translateY(-.5px);
  }
  .carousel-arrow-mark::after{
    content:"";
    position:absolute;
    top:2px;
    width:7px;
    height:7px;
    border:solid currentColor;
    border-width:0 1px 1px 0;
  }
  .carousel-arrow-prev::after{
    left:2px;
    transform:rotate(135deg);
  }
  .carousel-arrow-next::after{
    right:2px;
    transform:rotate(-45deg);
  }
  .featured-carousel-count{
    min-width:54px;
    text-align:center;
    color:var(--text-dim);
    font:500 11px/1 "Schibsted Grotesk",sans-serif;
    letter-spacing:.12em;
    font-variant-numeric:tabular-nums;
  }
  /* V2_74 — Section 3 receives the approved Search-page poster-card component from
     Frequenoir_Poster_Card_Interaction_Study_v5. This pass changes the cards only: the section
     background, recessed tray, internal-scroll behavior, grid rhythm and closing copy remain
     exactly as they were in V2_73 so the surrounding surface can be calibrated in the next pass. */
  #collection .poster-grid{
    grid-template-columns:repeat(4,minmax(0,240px));
    justify-content:center;
    column-gap:24px;
    row-gap:24px;
  }
  #collection .poster-tile{
    --stagger-y:0px;
    position:relative;
    display:block;
    aspect-ratio:2/3;
    min-width:0;
    overflow:hidden;
    border:1px solid transparent;
    border-radius:14px;
    background:var(--bg);
    isolation:isolate;
    text-decoration:none;
    cursor:pointer;
    transform:translateY(var(--stagger-y));
    box-shadow:0 20px 46px rgba(1,8,18,.22);
    transition:border-color .22s ease,transform .28s ease,box-shadow .28s ease;
  }
  #collection .poster-tile:nth-child(4n+2){--stagger-y:48px;transform:translateY(var(--stagger-y));}
  #collection .poster-tile:nth-child(4n+3){--stagger-y:96px;transform:translateY(var(--stagger-y));}
  #collection .poster-tile:nth-child(4n+4){--stagger-y:24px;transform:translateY(var(--stagger-y));}
  #collection .poster-tile:hover{
    transform:translateY(calc(var(--stagger-y) - 3px));
  }
  #collection .poster-tile:hover,
  #collection .poster-tile:focus-within,
  #collection .poster-tile.is-playing,
  #collection .poster-tile.is-saved{
    border-color:var(--line);
    box-shadow:0 24px 54px rgba(1,8,18,.42);
  }
  #collection .poster-tile > .collection-card-artwork{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    border:0!important;
    aspect-ratio:auto!important;
    overflow:hidden;
  }
  #collection .poster-tile img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    transition:transform .55s cubic-bezier(.2,.7,.2,1),filter .35s ease;
  }
  #collection .poster-tile:hover img,
  #collection .poster-tile:focus-within img,
  #collection .poster-tile.is-playing img,
  #collection .poster-tile.is-saved img{
    transform:scale(1.018);
    filter:saturate(.88) brightness(.74);
  }
  #collection .poster-tile::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:1;
    pointer-events:none;
    background:
      linear-gradient(180deg,rgba(2,9,19,.66) 0%,rgba(2,9,19,.08) 28%,rgba(2,9,19,.04) 55%,rgba(2,9,19,.70) 100%),
      radial-gradient(circle at 50% 48%,transparent 0 18%,rgba(2,9,19,.22) 72%,rgba(2,9,19,.48) 100%);
    opacity:0;
    transition:opacity .28s ease;
  }
  #collection .poster-tile:hover::after,
  #collection .poster-tile:focus-within::after,
  #collection .poster-tile.is-playing::after,
  #collection .poster-tile.is-saved::after{opacity:1;}
  #collection .collection-card-ui{
    position:absolute;
    inset:0;
    z-index:2;
    opacity:0;
    pointer-events:none;
    transition:opacity .22s ease;
  }
  #collection .poster-tile:hover .collection-card-ui,
  #collection .poster-tile:focus-within .collection-card-ui,
  #collection .poster-tile.is-playing .collection-card-ui,
  #collection .poster-tile.is-saved .collection-card-ui,
  #collection .poster-tile.is-active .collection-card-ui{opacity:1;}
  #collection .collection-card-ui button,
  #collection .collection-card-ui a{pointer-events:auto;}
  #collection .collection-genre,
  #collection .collection-save,
  #collection .collection-play,
  #collection .collection-info{
    position:absolute;
    border:0;
    cursor:pointer;
    font-family:'Schibsted Grotesk',sans-serif;
  }
  #collection .collection-genre{
    top:6px;
    left:6px;
    min-height:44px;
    max-width:calc(100% - 112px);
    display:flex;
    align-items:center;
    padding:0 12px;
    border-radius:999px;
    color:var(--text-dim);
    background:transparent;
    font-size:11px;
    font-weight:600;
    letter-spacing:.13em;
    text-transform:uppercase;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    text-decoration-line:underline;
    text-decoration-color:transparent;
    text-decoration-thickness:1px;
    text-underline-offset:2px;
    transition:color .2s ease,background .2s ease,text-decoration-color .2s ease;
  }
  #collection .collection-genre:hover,
  #collection .collection-genre:focus-visible{
    color:var(--text);
    background:rgba(9,24,44,.52);
    text-decoration-color:currentColor;
    outline:none;
  }
  #collection .collection-save{
    top:14px;
    right:14px;
    min-width:73px;
    padding:8px 10px;
    border:1px solid rgba(107,120,146,.46);
    border-radius:999px;
    background:rgba(3,11,23,.66);
    color:var(--text-dim);
    font-size:10px;
    font-weight:600;
    letter-spacing:.11em;
    text-transform:uppercase;
    backdrop-filter:blur(9px);
    transition:background .2s ease,color .2s ease,border-color .2s ease;
  }
  #collection .collection-save:hover{
    color:var(--text);
    border-color:rgba(63,143,232,.76);
    background:rgba(0,91,214,.88);
  }
  #collection .poster-tile.is-saved .collection-save{
    color:var(--text-faint);
    border-color:rgba(107,120,146,.24);
    background:rgba(3,11,23,.52);
  }
  #collection .poster-tile.is-saved .collection-save:hover{
    color:var(--text-dim);
    border-color:rgba(107,120,146,.42);
    background:var(--overlay-floating);
  }
  #collection .collection-play{
    left:16px;
    bottom:16px;
    width:56px;
    height:56px;
    padding:0;
    border:1px solid rgba(63,143,232,.90);
    border-radius:50%;
    background:rgba(0,91,214,.92);
    box-shadow:0 8px 22px rgba(1,8,18,.38),0 0 26px rgba(2,9,19,.30);
    backdrop-filter:blur(9px);
    transition:transform .22s ease,background .22s ease,border-color .22s ease,box-shadow .22s ease;
  }
  #collection .collection-play:hover{
    transform:translateY(-2px) scale(1.055);
    border-color:rgba(255,255,255,.68);
    background:var(--accent-hover);
    box-shadow:0 12px 28px rgba(1,8,18,.46),0 0 30px rgba(0,91,214,.20);
  }
  #collection .poster-tile.is-playing .collection-play{
    border-color:rgba(63,143,232,.58);
    background:rgba(14,67,129,.94);
  }
  #collection .collection-play::before{
    content:"";
    position:absolute;
    top:50%;
    left:50%;
    width:18px;
    height:18px;
    background-color:var(--text);
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.69,21.76l12.08-8.75c.69-.5.69-1.52,0-2.02L6.69,2.24c-.82-.6-1.98,0-1.98,1.01v17.5c0,1.02,1.15,1.61,1.98,1.01Z'/%3E%3C/svg%3E") no-repeat center / contain;
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.69,21.76l12.08-8.75c.69-.5.69-1.52,0-2.02L6.69,2.24c-.82-.6-1.98,0-1.98,1.01v17.5c0,1.02,1.15,1.61,1.98,1.01Z'/%3E%3C/svg%3E") no-repeat center / contain;
    transform:translate(-50%,-50%);
  }
  #collection .poster-tile.is-playing .collection-play::before{
    width:18px;
    height:18px;
    left:50%;
    background-color:var(--text);
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='13.52' y='2' width='4.66' height='20' rx='.76' ry='.76'/%3E%3Crect x='5.82' y='2' width='4.66' height='20' rx='.76' ry='.76'/%3E%3C/svg%3E") no-repeat center / contain;
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='13.52' y='2' width='4.66' height='20' rx='.76' ry='.76'/%3E%3Crect x='5.82' y='2' width='4.66' height='20' rx='.76' ry='.76'/%3E%3C/svg%3E") no-repeat center / contain;
  }
  #collection .collection-info{
    right:16px;
    bottom:16px;
    width:35px;
    height:35px;
    padding:0;
    border:1px solid rgba(177,184,201,.38);
    border-radius:50%;
    background:rgba(3,11,23,.52);
    color:var(--text-dim);
    font-family:Georgia,serif;
    font-size:18px;
    font-style:italic;
    line-height:1;
    backdrop-filter:blur(9px);
    transition:color .2s ease,border-color .2s ease,transform .2s ease;
  }
  #collection .collection-info:hover{
    color:var(--text);
    border-color:var(--text-faint);
    transform:translateY(-2px);
  }
  @media(max-width:760px){
    #collection .poster-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
    #collection .collection-genre{font-size:9px;}
    #collection .collection-save{top:10px;right:10px;min-width:62px;padding:7px 8px;font-size:8px;}
    #collection .collection-play{left:11px;bottom:11px;width:50px;height:50px;}
    #collection .collection-info{right:11px;bottom:11px;}
  }

  /* V2_77 — SECTION 3 TRAY SURFACE / OPTICAL GRID / SCROLL AFFORDANCE
     Scope contract: the section background, headline, poster-card component and mini player stay
     unchanged. The inner browsing tray uses the existing --surface token for visible but restrained
     separation. Poster gaps are a true 24px in both axes: never combine a fixed gap with
     space-between, which would distribute leftover width into horizontal gaps only. */
  #collection .collection-scroll-shell{
    position:relative;
    overflow:hidden;
    border-radius:5px;
    background:var(--surface);
  }
  #collection .collection-scroll{
    background:var(--surface) !important;
    scrollbar-width:thin;
    scrollbar-color:transparent transparent;
  }
  #collection .collection-scroll:hover,
  #collection .collection-scroll.is-scrolling{
    scrollbar-color:rgba(131,141,164,.34) transparent;
  }
  #collection .collection-scroll::-webkit-scrollbar{width:5px;}
  #collection .collection-scroll::-webkit-scrollbar-track{background:transparent;}
  #collection .collection-scroll::-webkit-scrollbar-thumb{
    background:transparent;
    border-radius:999px;
  }
  #collection .collection-scroll:hover::-webkit-scrollbar-thumb,
  #collection .collection-scroll.is-scrolling::-webkit-scrollbar-thumb{
    background:rgba(131,141,164,.34);
  }
  #collection .collection-scroll-fade{display:none;}
  @media(min-width:761px){
    #collection .collection-scroll-fade{
      display:block;
      position:absolute;
      z-index:15;
      left:0;
      right:0;
      bottom:0;
      height:72px;
      pointer-events:none;
      background:linear-gradient(to bottom,rgba(9,22,40,0) 0%,rgba(9,22,40,.42) 58%,rgba(9,22,40,.92) 100%);
      opacity:.72;
      transition:opacity .22s ease;
    }
    #collection .collection-scroll-shell.is-at-end .collection-scroll-fade{opacity:0;}
  }
  /* v2_78 — PRIMARY NAVIGATION AXIS CONTRACT
     The four genre links are the fixed visual center directly beneath the wordmark.
     Left utility links and right personal links live in independent, equal side columns;
     their unequal text lengths must never displace the genre center. Grouping is expressed
     with proximity and whitespace only — no divider glyphs or vertical rules. */
  @media (min-width:901px){
    .fq-primary-v41{
      display:grid;
      grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
      column-gap:34px;
      justify-content:initial;
    }
    .fq-primary-group{
      display:flex;
      align-items:center;
      min-width:0;
    }
    .fq-primary-group--left{
      justify-content:flex-start;
      gap:30px;
    }
    .fq-primary-group--genres{
      justify-content:center;
      gap:42px;
    }
    .fq-primary-group--right{
      justify-content:flex-end;
      gap:34px;
    }
  }

  /* v2_81 — PAGE-CHAPTER RHYTHM CONTRACT
     Major homepage chapters are separated by surface tone, whitespace and headings—not repeated
     full-width rules. Component-level rules (header, track rows, FAQ rows, card captions) remain
     intact because they describe relationships inside a component.

     Section 3 → How it works uses one 72px optical transition (36px + 36px), instead of stacking
     two independent section paddings. How it works is the sole bright transition surface here;
     Built for and Licensing form one dark "use + rights" chapter, followed by the bright FAQ. */
  .section{
    border-bottom:0 !important;
  }
#collection{
  /* v2_83: equal breathing room above and below the closing CTA. */
  padding-bottom:72px !important;
}
#collection .collection-closing{
  margin-top:72px !important;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.how-it-works-section{
  /* v2_82: redistribute the former 36/94 imbalance without increasing total height. */
  padding-top:65px !important;
  padding-bottom:65px !important;
  background:var(--bg-alt) !important;
}
  .built-for-section,
  .licensing-section{
    background:var(--bg) !important;
  }
.faq-section{
  background:var(--bg-alt) !important;
}

/* v2_82 — semantic dividers only; width follows the established content guide. */
.content-guide-divider{
  position:relative;
  height:1px;
  border:0;
}
.content-guide-divider::before{
  content:"";
  position:absolute;
  top:0;
  left:40px;
  right:40px;
  border-top:1px solid var(--line);
}
.footer-wordmark-link{
  display:inline-block;
  margin-bottom:14px;
  line-height:0;
}
.footer-wordmark{
  display:block;
  width:170px;
  max-width:100%;
  height:auto;
}
.footer-sitemap{
  display:grid;
  grid-template-columns:minmax(220px,1.45fr) repeat(5,minmax(112px,1fr));
  gap:30px;
  align-items:start;
  margin-bottom:47px;
}
.footer-nav-title{
  margin:0 0 14px;
  font-size:12px;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:var(--text-faint);
}
.footer-nav-list{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:9px;
  list-style:none;
  margin:0;
  padding:0;
}
.footer-nav-link{
  color:var(--text-dim);
  font-size:13px;
  line-height:1.35;
  text-decoration:underline;
  text-decoration-color:transparent;
  text-underline-offset:3px;
  transition:color .16s ease,text-decoration-color .16s ease;
}
.footer-nav-link:hover,
.footer-nav-link:focus-visible{
  color:var(--text);
  text-decoration-color:currentColor;
}
.footer-compliance-frame{
  width:min(calc(100vw - 48px),1280px);
  margin:0 auto;
  border-top:1px solid var(--line);
}
.footer-business-info{
  display:flex;
  flex-wrap:wrap;
  gap:2px 18px;
  padding:20px 0 18px;
  color:var(--text-faint);
  font-size:11px;
  line-height:1.35;
}
.footer-business-item{
  white-space:nowrap;
}
.footer-business-item::after{
  content:"";
}
.footer-business-verify{
  color:var(--text-faint);
  text-underline-offset:3px;
}
.footer-legal-row{
  display:flex;
  justify-content:space-between;
  gap:24px;
  font-size:12px;
  color:var(--text-faint);
}
@media(max-width:980px){
  .footer-sitemap{grid-template-columns:repeat(3,minmax(0,1fr)); row-gap:38px;}
  .footer-brand{grid-column:1/-1;}
}
@media(max-width:620px){
  .footer-sitemap{grid-template-columns:repeat(2,minmax(0,1fr)); gap:34px 24px;}
  .footer-business-info{display:block;}
  .footer-business-item{display:block; white-space:normal; margin-bottom:4px;}
  .footer-legal-row{display:block;}
  .footer-legal-row > *{display:block; margin-bottom:8px;}
}
@media(max-width:1250px){
  .content-guide-divider::before{
    left:28px;
    right:28px;
  }
}

/* v2_116 — THREE CHAPTER LINES SHARE THE APPROVED 1280PX SYSTEM WIDTH.
   Header content and the floating mini-player already stop at 1280px with 24px minimum viewport
   clearance. The Built for→Licensing divider, closing statement→sitemap divider, and the line above
   official business information now use that same centered axis. Footer and section content retain
   their existing 1200px reading columns; only the semantic strokes grow to the wider system frame. */
.system-width-divider{
  width:min(calc(100% - 48px),1280px);
  height:1px;
  margin-left:auto;
  margin-right:auto;
  border:0;
  border-top:1px solid var(--line);
}
  /* V2_84 — mini-player identity links and real transport-button states. */
  .mini-player-artwork-link{
    flex:0 0 auto;
    border-radius:3px;
    overflow:hidden;
    box-shadow:0 0 0 1px rgba(151,187,224,0);
    transition:transform .16s ease,box-shadow .16s ease,filter .16s ease;
  }
  .mini-player-artwork-link:hover,
  .mini-player-artwork-link:focus-visible{
    transform:translateY(-1px);
    filter:brightness(1.08);
    box-shadow:0 0 0 1px var(--overlay-accent-edge),0 7px 18px rgba(0,0,0,.28);
    outline:none;
  }
  .mini-player-album-link{
    color:var(--text-faint);
    text-decoration:none;
    text-underline-offset:3px;
    transition:color .16s ease;
  }
  .mini-player-album-link:hover,
  .mini-player-album-link:focus-visible{
    color:var(--text-dim);
    text-decoration:underline;
    outline:none;
  }
  .mini-transport{
    appearance:none;
    display:grid;
    place-items:center;
    border:0;
    background:transparent;
    color:var(--text-dim);
    font:inherit;
    font-size:16.5px;
    line-height:1;
    min-width:30px;
    min-height:30px;
    padding:0;
    border-radius:50%;
    cursor:pointer;
    transition:color .15s ease,background .15s ease,transform .15s ease;
  }
  .mini-transport:hover,
  .mini-transport:focus-visible{
    color:var(--text);
    background:rgba(151,187,224,.08);
    outline:none;
  }
  .mini-transport:disabled{
    opacity:.32;
    cursor:default;
    background:transparent;
    transform:none;
  }
  .mini-transport svg{width:17px;height:17px;display:block;fill:currentColor}
  .mini-transport-primary svg{width:19px;height:19px}
  .mini-transport.pop{animation:transport-pop .36s ease-out}
  @keyframes transport-pop{0%{transform:scale(1)}45%{transform:scale(1.14)}75%{transform:scale(.97)}100%{transform:scale(1)}}
  .mini-transport-primary{color:var(--text);}

  /* V2_85 / TRACK 01-ONLY VERTICAL METADATA STUDY:
     This intentionally affects Track 01 only. The remaining nine tracks preserve the prior
     three-column treatment for direct comparison before this becomes a shared CMS component.
     A fixed label rail keeps every value on one editorial reading axis regardless of keyword count. */
  #albumInfoPanel:not([hidden]) #track01Details.track-details-vertical-prototype{
    grid-template-columns:max-content minmax(0,1fr) !important;
    column-gap:24px !important;
    row-gap:0 !important;
    align-items:baseline !important;
    padding:16px 0 18px !important;
  }
  #track01Details.track-details-vertical-prototype .track-detail-row{
    display:contents;
  }
  #track01Details.track-details-vertical-prototype .track-detail-row .label{
    margin:0 !important;
    font-size:9.5px !important;
    line-height:1.55;
    white-space:nowrap;
    text-align:right !important;
  }
  #track01Details.track-details-vertical-prototype .track-detail-row p:not(.label){
    margin:0;
    font-size:11.5px !important;
    line-height:1.55 !important;
  }

  /* V2_86 / Track 01 spacing correction.
     The detail block now has equal 12px optical breathing room above and below. Removing the old
     trailing margin prevents the metadata from floating toward the top of its expanded region.
     Row padding is reduced from 5px to 2px so the three values read as one compact information set. */
  #albumInfoPanel:not([hidden]) #track01Details.track-details-vertical-prototype{
    margin:0 48px 0 100px !important;
    padding:12px 0 !important;
  }
  #track01Details.track-details-vertical-prototype .track-detail-row > p{
    padding-top:2px;
    padding-bottom:2px;
  }
  #track01Details.track-details-vertical-prototype .track-detail-row .label,
  #track01Details.track-details-vertical-prototype .track-detail-row p:not(.label){
    line-height:1.45 !important;
  }

  /* V2_87 / APPROVED SYSTEM — the Track 01 vertical metadata grammar now applies to all ten
     disclosures. Content length may change per Google DB record; the fixed label rail, equal
     12px top/bottom space and compact row rhythm remain invariant. */
  #albumInfoPanel:not([hidden]) .track-details.track-details-vertical-system{
    grid-template-columns:max-content minmax(0,1fr) !important;
    column-gap:24px !important;
    row-gap:0 !important;
    align-items:baseline !important;
    margin:0 48px 0 100px !important;
    padding:12px 0 !important;
  }
  .track-details.track-details-vertical-system > .track-detail-row{
    display:contents;
  }
  .track-details.track-details-vertical-system > .track-detail-row > p{
    padding-top:2px;
    padding-bottom:2px;
  }
  .track-details.track-details-vertical-system > .track-detail-row .label{
    margin:0 !important;
    font-size:9.5px !important;
    line-height:1.45 !important;
    white-space:nowrap;
    text-align:right !important;
  }
  .track-details.track-details-vertical-system > .track-detail-row p:not(.label){
    margin:0;
    font-size:11.5px !important;
    line-height:1.45 !important;
  }
  /* V2_89 / CORRECTED ALBUM-DETAIL INTERPRETATION:
     The album header uses the same approved three rows as track details — Best for, Moods and
     Keywords — rather than vertically restacking the former Subgenre/Best for/Key themes columns.
     Flex sizing guarantees the purchase block cannot overlap metadata at any desktop width. */
  #albumInfoPanel:not([hidden]) > .wrap > .album-detail-summary{
    --album-purchase-protected-gap:45.5756px;
    --album-summary-left-preferred:530px;
    display:grid !important;
    grid-template-columns:
      minmax(0,var(--album-summary-left-preferred))
      minmax(var(--album-purchase-protected-gap),1fr)
      max-content;
    grid-template-rows:auto;
    align-items:center !important;
    column-gap:0;
    row-gap:0;
  }
  .album-detail-list{
    grid-column:1;
    grid-row:1;
    width:auto;
    min-width:0;
    display:grid;
    grid-template-columns:minmax(0,1fr);
    gap:0;
  }
  .album-detail-row{
    display:grid;
    grid-template-columns:96px minmax(0,1fr);
    column-gap:22px;
    align-items:baseline;
    padding:4px 0;
    min-width:0;
  }
  .album-detail-row .label{margin:0 !important; white-space:nowrap;}
  .album-detail-row p:not(.label){
    margin:0;
    min-width:0;
    font-size:12px !important;
    line-height:1.5 !important;
    color:var(--text-ui) !important;
    font-weight:400;
  }
  .album-detail-purchase{
    grid-column:3;
    grid-row:1;
    width:max-content;
    min-width:0;
    justify-self:end;
    text-align:right;
  }
  @media(max-width:755px){
    #albumInfoPanel:not([hidden]) > .wrap > .album-detail-summary{
      grid-template-columns:minmax(0,1fr);
      grid-template-rows:auto auto;
      align-items:stretch !important;
      column-gap:0;
      row-gap:24px;
    }
    .album-detail-list{
      grid-column:1;
      grid-row:1;
      width:auto;
    }
    .album-detail-purchase{
      grid-column:1;
      grid-row:2;
      width:100%;
      justify-self:stretch;
      text-align:left;
    }
    .album-detail-purchase .btn{width:100%;text-align:center;}
  }

  /* V2_90 / MINI-PLAYER SAVE:
     A fixed-width textual action preserves the established + Save → SAVED grammar without adding
     a new icon language. Its state follows the current track and never shifts player geometry. */
  #miniPlayerSave{
    appearance:none;
    width:64px;
    min-height:32px;
    padding:0;
    border:0;
    border-radius:3px;
    background:transparent;
    color:var(--text-dim);
    font:inherit;
    font-size:11px;
    line-height:1;
    cursor:pointer;
    transition:color .15s ease,background .15s ease;
  }
  #miniPlayerSave:not(.is-saved):hover,
  #miniPlayerSave:not(.is-saved):focus-visible{
    color:var(--text);
    background:rgba(151,187,224,.06);
    outline:none;
  }
  #miniPlayerSave.is-saved{
    color:var(--text-receded);
    cursor:default;
  }

  /* V2_91 / HEADER SEARCH SYSTEM
     FINAL INFORMATION ARCHITECTURE:
     FAQ and Contact leave the global header. Licensing/right-of-use questions belong in a clearly
     labelled FAQ accordion on the Licensing page; general Contact and support remain reachable in
     the footer sitemap. This makes room for the catalog's primary action: scene-led music search.

     The input is intentionally visible before hover (quiet dark glass + one thin system line), so it
     never inherits the card genre-link's "hidden until approached" ambiguity. The approved poster
     card language is reused one level below instead: suggestions use the same dark glass, restrained
     border, blur, radius and shadow as the keyword popover. No new brand color is introduced.

     PRODUCTION ROUTING:
     submit and every suggestion must open the dedicated Pinterest-style Search/Collection page with
     the query/filter encoded in the URL. The homepage poster section remains a preview only. */
  .fq-header-search{
    position:relative;
    width:min(100%,360px);
    margin-right:clamp(34px,4vw,66px);
    justify-self:stretch;
    z-index:4;
  }
  /* v2_112 — restored: without position:relative on every direct header child, the z-index
     values below have no effect at all (z-index is a no-op on statically positioned elements).
     Also missing since v2_108. */
  .fq-header-v40 > *{position:relative;z-index:1}
  .fq-header-v40 > .fq-masthead-v41{z-index:3}
  .fq-header-v40 > .fq-primary-v41{z-index:1}
  .fq-header-search__field{
    position:relative;
    display:flex;
    align-items:center;
    min-height:38px;
    padding:0 14px;
    border:1px solid rgba(133,153,184,.20);
    border-radius:8px;
    background:rgba(9,24,44,.34);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.018);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    transition:background .18s ease,border-color .18s ease,box-shadow .18s ease;
  }
  .fq-header-search:hover .fq-header-search__field{
    background:rgba(9,24,44,.48);
    border-color:rgba(133,153,184,.30);
  }
  .fq-header-search:focus-within .fq-header-search__field{
    background:rgba(9,24,44,.58);
    border-color:var(--line);
    box-shadow:inset 0 -1px 0 var(--text-faint),0 8px 20px rgba(0,0,0,.16);
  }
  .fq-header-search__input{
    width:100%;
    min-width:0;
    padding:0;
    border:0;
    outline:0;
    background:transparent;
    color:var(--text);
    font:500 12px/1.2 'Schibsted Grotesk',sans-serif;
    letter-spacing:.015em;
  }
  .fq-header-search__input::placeholder{
    color:var(--text-faint);
    opacity:1;
    transition:opacity .18s ease;
  }
  .fq-header-search__input.is-changing::placeholder{opacity:0}
  .fq-header-search__panel{
    position:absolute;
    top:calc(100% + 9px);
    left:0;
    width:min(440px,calc(100vw - 48px));
    padding:10px;
    border:1px solid var(--line);
    border-radius:9px;
    background:rgba(3,11,23,.94);
    box-shadow:0 20px 44px rgba(0,0,0,.38);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    opacity:0;
    visibility:hidden;
    transform:translateY(-4px);
    transition:opacity .16s ease,transform .16s ease,visibility .16s;
  }
  .fq-header-search:focus-within .fq-header-search__panel,
  .fq-header-search.is-open .fq-header-search__panel{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
  }
  .fq-header-search__label{
    margin:2px 8px 6px;
    color:var(--text-receded);
    font-size:9px;
    font-weight:700;
    letter-spacing:.16em;
    text-transform:uppercase;
  }
  .fq-header-search__suggestion{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    min-height:34px;
    padding:7px 8px;
    border-radius:6px;
    color:var(--text-dim);
    font-size:11px;
    text-decoration:none;
    transition:background .14s ease,color .14s ease;
  }
  .fq-header-search__suggestion span:last-child{
    color:var(--text-receded);
    font-size:9px;
    letter-spacing:.08em;
    text-transform:uppercase;
  }
  .fq-header-search__suggestion:hover,
  .fq-header-search__suggestion:focus-visible{
    color:var(--text);
    background:rgba(9,24,44,.52);
    outline:0;
    text-decoration:underline;
    text-decoration-thickness:1px;
    text-underline-offset:3px;
  }
  @media(max-width:900px){
    .fq-masthead-v41{grid-template-columns:minmax(180px,1fr) auto auto;gap:16px}
    .fq-header-search{width:100%;margin-right:8px}
    .fq-header-search__field{padding:0 10px}
    .fq-header-search__input{font-size:11px}
  }

  /* V2_92 / SEARCH NAV + JOIN HOVER
     SEARCH remains in primary navigation even though the masthead now exposes an input. They are not
     duplicates: the nav label is a stable route to the complete Pinterest-style Search/Collection
     page; the field is a shortcut for visitors who already have scene language in mind.

     JOIN US keeps its subdued default glass so the logo remains the masthead anchor. Hover/focus
     borrows the approved poster-card +Save interaction: existing accent blue, brighter type and the
     same blue-family edge. No new color token, glow or positional movement is introduced. */
  /* v2_112 — restored: this base sizing rule for JOIN US (108x34px, centered content,
     border-box) was dropped entirely in the v2_108 cleanup, leaving only the :hover/:focus-visible
     variant below. Confirmed missing via direct diff against v2_107. */
  .fq-masthead-v41 .fq-account-row .fq-join{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:108px;
    min-width:108px;
    height:34px;
    min-height:34px;
    padding:0 16px;
    line-height:1;
    box-sizing:border-box;
  }
  .fq-masthead-v41 .fq-account-row .fq-join:hover,
  .fq-masthead-v41 .fq-account-row .fq-join:focus-visible{
    color:var(--text);
    border-color:rgba(63,143,232,.76);
    background:rgba(0,91,214,.88);
    text-decoration:none;
    outline:none;
    transform:none;
  }

  /* V2_97 / CART COUNTER — LOCKED HEADER RULE
     Empty state is the bare word CART, aligned to the masthead guide. Once an item exists, quantity
     appears just outside its right edge as an independent status marker and never participates in
     the link's width; therefore neither CART nor JOIN US moves at 1, 9 or 12. Crossing the guide by
     this small amount is intentional: it is user-triggered state, not part of the base header grid.
     Do not reintroduce an invisible inline slot or CART (0): the former makes the empty word look
     misaligned, while Cormorant SC's old-style zero reads too much like a lowercase “o”. The counter
     alone uses the existing sans family and tabular numerals for a stable, clearly numeric shape.
     No new badge color or filled circle.

     The counter's LEFT edge is the fixed anchor immediately after CART (equivalent to attaching an
     InDesign text box to the word's right edge). Width therefore grows only to the right at 10, 20,
     100, never back toward CART. Its vertical center follows the CART capitals rather than floating
     above them like a notification badge. */
  .fq-cart{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:flex-end;
    min-width:0;
  }
  .fq-cart__count{
    position:absolute;
    left:calc(100% + 8px);
    right:auto;
    top:7px;
    min-width:0;
    font-family:'Schibsted Grotesk',sans-serif;
    font-size:11px;
    font-weight:600;
    line-height:1;
    text-align:left;
    color:var(--text-dim);
    font-variant-numeric:tabular-nums;
    letter-spacing:0;
    visibility:hidden;
  }
  .fq-cart.has-items .fq-cart__count{visibility:visible}
  .fq-cart:hover .fq-cart__count{color:var(--text)}

  /* v2_115 — HEADER TYPE +1PX, GEOMETRY UNCHANGED.
     With the v2_114 1280px content cap approved, the lower navigation labels and the upper
     JOIN US / CART controls gain exactly 1px for slightly stronger presence. The cart quantity uses
     a different typeface, so it also gains 1px to remain optically matched. Widths, gaps, anchors,
     logo, search field and the counter's grow-to-the-right behavior remain unchanged. */
  .fq-primary-v41 .fq-index-link{font-size:16px}
  .fq-masthead-v41 .fq-account-row .fq-utility-link{font-size:16px}
  .fq-cart__count{font-size:12px}
  @media(max-width:1250px){
    .fq-primary-v41 .fq-index-link{font-size:15px}
  }

  /* ========================================================================
     v2_125 — DESIGN SYSTEM V1 / AUTHORITATIVE RESPONSIVE CONTRACT
     Baseline audit: Frequenoir_Design_System_Audit_v1.md.
     New work uses only Desktop (>=1280), Tablet (768–1279) and Mobile (<=767).
     Older narrow media queries above remain as compatibility fallbacks for this standalone mockup;
     this final block wins the cascade and is the production reference for Webflow components.
  ======================================================================== */
  :root{
    --color-bg-base:#030b18;
    --color-bg-home-hero:var(--overlay-home-field);
    --color-bg-alt:#071020;
    --color-card:var(--color-bg-base);
    --color-surface:#091628;
    --color-surface-hover:#0c1a31;
    --color-line:#223149;
    --color-line-strong:var(--color-text-receded);
    --color-text:#eef1f6;
    --color-text-on-accent:#fff;
    --color-text-dim:#b1b8c9;
    --color-text-ui:#838da4;
    --color-text-faint:#72809a;
    --color-text-receded:#536079;
    --color-accent:#1768c8;
    --color-accent-hover:#2174d4;
    --color-accent-soft:#9bbce2;
    --color-accent-surface:#192f52;
    --color-ink-deep:#01040e;
    --color-state-deep:var(--color-ink-deep);
    --color-header:var(--color-ink-deep);

    --overlay-home-field:rgba(8,23,39,.88);
    --overlay-header:rgba(1,4,14,.92);
    --overlay-floating:rgba(9,24,44,.64);
    --overlay-backdrop:rgba(0,0,0,.48);
    --overlay-accent-wash:rgba(23,104,200,.18);
    --overlay-accent-edge:rgba(151,187,224,.26);
    --overlay-white-quiet:rgba(255,255,255,.07);
    --overlay-artwork:rgba(0,3,10,.78);

    --bg:var(--color-bg-base);
    --bg-alt:var(--color-bg-alt);
    --card:var(--color-card);
    --surface:var(--color-surface);
    --surface-hover:var(--color-surface-hover);
    --line:var(--color-line);
    --line-strong:var(--color-line-strong);
    --text:var(--color-text);
    --text-on-accent:var(--color-text-on-accent);
    --text-dim:var(--color-text-dim);
    --text-ui:var(--color-text-ui);
    --text-faint:var(--color-text-faint);
    --text-receded:var(--color-text-receded);
    --accent:var(--color-accent);
    --accent-hover:var(--color-accent-hover);
    --accent-soft:var(--color-accent-soft);
    --accent-surface:var(--color-accent-surface);
    --state-deep:var(--color-state-deep);
    --header-night:var(--color-header);

    --container-reading:1200px;
    --container-system:1280px;
    --gutter-system:40px;
    --gutter-reading:40px;
    --space-1:4px;
    --space-2:8px;
    --space-3:12px;
    --space-4:16px;
    --space-5:20px;
    --space-6:24px;
    --space-8:32px;
    --space-10:40px;
    --space-16:64px;
    --radius-control:3px;
    --radius-panel:5px;
    --radius-popover:9px;
    --radius-media:12px;
    --radius-glass:18px;
    --radius-pill:999px;
    --motion-fast:150ms;
    --motion-ui:180ms;
    --motion-page:240ms;
    --motion-slow:280ms;
    --ease-standard:cubic-bezier(.2,.7,.2,1);
  }

  .wrap{max-width:var(--container-reading);}
  .fq-guide,
  .system-width-divider,
  .footer-compliance-frame{max-width:var(--container-system);}
  /* Responsive v6 — Section 1 keeps the original expansive Desktop presence,
     but its height now follows one continuous width-based curve instead of
     dropping from 100vh to 640px at 1279px. At common Desktop viewport heights,
     1440 stays near a full screen, 1280 eases slightly, and 1024 reaches the
     720px floor without a breakpoint jump. */
  .home-hero{
    min-height:clamp(720px,70vw,100vh) !important;
    padding-top:130px;
    background:var(--color-bg-home-hero) !important;
  }
  .home-hero__copy{width:min(100%,860px) !important;}
  .home-hero__title{font-size:64px !important;}
  .home-hero__lead{font-size:23px !important;}

  /* Responsive v11 — CURRENT PAGE CONTRACT.
     Hover is a temporary preview. A clicked/current destination keeps the same
     bright text + underline after the pointer leaves. The production Webflow
     version derives aria-current="page" from the actual page URL; this static
     mockup applies it on click so the visual state can be reviewed now. Keep
     font weight unchanged so activation never shifts neighbouring menu items. */
  .fq-primary-v41 .fq-index-link.is-active,
  .fq-primary-v41 .fq-index-link[aria-current="page"]{
    color:var(--text) !important;
    font-weight:500 !important;
    text-decoration:underline !important;
    text-decoration-thickness:1px !important;
    text-underline-offset:2px !important;
  }

  /* Responsive v10 — continuous Desktop scaling. This late authoritative
     rule replaces the legacy max-width:1500 jump from 236px straight to
     210px. The wordmark now spends available space gradually and never
     changes size merely because one breakpoint was crossed. */
  .fq-wordmark{width:clamp(210px,15.75vw,256.2px);}

  /* Tablet reference: 1024px. */
  @media (min-width:768px) and (max-width:1279px){
    :root{
      /* Responsive v8 — keep the approved 40px browser safe area through the
         entire desktop-like Header range. Narrowing the viewport may compress
         internal tracks and menu gaps, but must never remove the outer reserve
         needed by the Cart count. */
      --gutter-system:40px;
      --gutter-reading:28px;
    }
    .wrap{padding-left:var(--gutter-reading);padding-right:var(--gutter-reading);}
    .fq-guide{width:calc(100% - (var(--gutter-system) * 2));}
    .system-width-divider,
    .footer-compliance-frame{width:calc(100% - (var(--gutter-system) * 2));}

    /* Responsive v9 — protect the wordmark as its own center zone. The search
       field must surrender width before it reaches the logo; both side tracks
       keep a 32px breathing space from the centered wordmark. */
    .fq-masthead-v41{column-gap:32px;}

    /* Responsive v5 — preserve the approved Desktop Header scale through
       1024 and into Tablet. Only the search field may shrink when its grid
       track becomes narrower than the approved 360px width. */
    .fq-header-search{width:min(100%,360px);margin-right:0;}
    .fq-wordmark{width:clamp(210px,15.75vw,256.2px);}
    .fq-account-row{gap:clamp(18px,calc(4.494vw - 31.48px),26px);}
    .fq-primary-v41{column-gap:clamp(22px,calc(6.742vw - 52.22px),34px);}
    .fq-primary-group--left{gap:clamp(22px,calc(4.494vw - 27.48px),30px);}
    .fq-primary-group--genres{gap:clamp(28px,calc(7.865vw - 58.59px),42px);}
    .fq-primary-group--right{gap:clamp(24px,calc(5.618vw - 37.85px),34px);}
    .fq-primary-v41 .fq-index-link{font-size:16px;}

    .home-hero{
      padding-top:130px;
    }
    .home-hero__copy{
      width:min(100%,clamp(760px,calc(34.843vw + 414.36px),860px)) !important;
    }
    .home-hero__title{
      font-size:clamp(54px,calc(3.484vw + 19.44px),64px) !important;
      line-height:1.15 !important;
    }
    .home-hero__lead{
      font-size:clamp(21px,calc(.697vw + 14.09px),23px) !important;
      white-space:nowrap;
    }

    .featured-section-header{padding-left:var(--gutter-reading) !important;padding-right:var(--gutter-reading) !important;}
    .featured-copy{padding-left:var(--gutter-reading) !important;padding-right:var(--gutter-reading) !important;}

    /* Responsive v13 — preserve the approved four-column album-card rhythm
       throughout the desktop-like 768–1279px range. Card geometry and content
       remain unchanged; only the grid count and its stagger cycle are restored. */
    #collection .poster-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;}
    #collection .poster-tile:nth-child(n){transform:none;}
    #collection .poster-tile:nth-child(4n+2){transform:translateY(48px);}
    #collection .poster-tile:nth-child(4n+3){transform:translateY(96px);}
    #collection .poster-tile:nth-child(4n+4){transform:translateY(24px);}
    .use-case-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}

    .mini-player > .wrap{
      grid-template-columns:minmax(190px,1fr) minmax(300px,1.2fr) minmax(250px,1fr) !important;
      gap:18px !important;
      padding-left:22px;
      padding-right:22px;
    }
    .mini-player{width:min(calc(100% - 80px),1280px);}
    .mini-player .player-progress{width:min(100%,300px) !important;}
    .mini-player .pill{padding-left:10px;padding-right:10px;}
  }

  /* Webflow Tablet height continuation: 991px begins at the same 720px reached
     by the Desktop curve, then eases to 650px at the 768px reference. */
  @media (min-width:768px) and (max-width:991px){
    .home-hero{
      min-height:clamp(650px,calc(31.4vw + 409px),720px) !important;
    }
  }

  /* Mobile reference: 390px. The header remains two rows; the primary row scrolls horizontally
     instead of deleting destinations or inventing a temporary hamburger architecture.
     v80 note: the header description above is RETIRED. Since v77, ≤767px hides .fq-header-v40,
     .fq-mobile-drawer, .fq-mobile-nav and #miniPlayer (rule near #fqMobileShellHost) and the v40
     mobile shell (fixed header with search / login / cart, bottom nav, mini bar, full-screen
     Audition Player) renders instead. The gutter, typography, spacing and body-padding rules in
     this block still apply to the homepage body under that shell. */
  @media (max-width:767px){
    :root{
      --gutter-system:18px;
      --gutter-reading:18px;
    }
    .wrap{padding-left:var(--gutter-reading) !important;padding-right:var(--gutter-reading) !important;}
    .fq-guide{width:calc(100% - (var(--gutter-system) * 2));}
    .system-width-divider,
    .footer-compliance-frame{width:calc(100% - (var(--gutter-system) * 2));}

    .fq-masthead-v41{
      min-height:64px;
      grid-template-columns:1fr auto 1fr;
      gap:10px;
    }
    .fq-header-search{display:none;}
    .fq-wordmark{width:156px;}
    .fq-account-row{gap:0;}
    .fq-account-row .fq-join{display:none !important;}
    .fq-masthead-v41 .fq-account-row .fq-utility-link{font-size:14px;}
    .fq-cart__count{top:5px;font-size:11px;}
    .fq-header-v40::before{top:63px;}

    .fq-primary-v41{
      min-height:48px;
      display:flex;
      justify-content:flex-start;
      gap:26px;
      overflow-x:auto;
      overscroll-behavior-x:contain;
      scrollbar-width:none;
      -webkit-overflow-scrolling:touch;
    }
    .fq-primary-v41::-webkit-scrollbar{display:none;}
    .fq-primary-group{
      display:flex;
      flex:0 0 auto;
      gap:26px;
    }
    .fq-primary-v41 .fq-index-link{
      min-height:48px;
      flex:0 0 auto;
      font-size:13px;
    }

    .home-hero{
      min-height:650px !important;
      padding-top:112px !important;
    }
    .home-hero__copy{width:100% !important;}
    .home-hero__title{
      max-width:100% !important;
      margin-bottom:22px !important;
      font-size:42px !important;
      line-height:1.12 !important;
    }
    .home-hero__lead{
      max-width:100% !important;
      margin-bottom:28px !important;
      font-size:19px !important;
      line-height:1.45 !important;
      white-space:normal !important;
    }
    .home-hero__actions{
      align-items:stretch !important;
      flex-direction:column;
      gap:12px !important;
    }
    .home-hero__actions .btn,
    .home-hero__actions > span{
      width:100%;
      text-align:center;
    }

    .featured-section-header{
      padding:26px var(--gutter-reading) 14px !important;
    }
    .hero-slide{
      aspect-ratio:4/5 !important;
      border-radius:var(--radius-media) !important;
      /* 2026-09-22 (build-owned copy of the v83 shell; the approved input still reads 58%): the
         one .hero-slide per page — the homepage Featured slider (5 slides, images swapped on this
         same element), every /library/<code> hero and the 4 genre heroes — is a 16:9 image
         cover-cropped into this 4:5 phone frame. 58% showed the image's x 252…606 of 788 px at
         390px, pushing a centred subject to ~41% of the frame; 50% keeps the centre. Tablet
         (768–900px) inherits this into .featured-media-stage; ≥901px uses the pages' inline
         `center` — all three ranges now agree on 50%/50%. */
      background-position:50% center !important;
    }
    .featured-copy{
      padding:30px var(--gutter-reading) !important;
    }
    .featured-copy > h2{font-size:34px !important;line-height:1.12;}
    .featured-copy > p:nth-of-type(1){font-size:18px !important;margin-bottom:16px !important;}
    .featured-copy > p:nth-of-type(2){font-size:13px !important;line-height:1.55 !important;margin-bottom:20px !important;}
    .featured-copy > div:last-child{flex-wrap:wrap;gap:12px !important;}
    .featured-copy .btn{padding:12px 18px;}

    #albumInfoPanel:not([hidden]) > .wrap{width:calc(100% - 24px);padding:14px !important;}
    .album-detail-row{grid-template-columns:78px minmax(0,1fr);column-gap:14px;}

    #albumInfoPanel:not([hidden]) .track-row{
      grid-template-columns:18px 42px minmax(0,1fr) 24px !important;
      grid-template-rows:auto auto auto;
      gap:8px 10px !important;
      min-height:0;
      padding:14px 6px !important;
    }
    #albumInfoPanel:not([hidden]) .track-row > span:nth-child(1){grid-column:1;grid-row:1;}
    #albumInfoPanel:not([hidden]) .track-row > span:nth-child(2){grid-column:2;grid-row:1;}
    #albumInfoPanel:not([hidden]) .track-row > div:nth-child(3){grid-column:3;grid-row:1;}
    #albumInfoPanel:not([hidden]) .track-row > span:nth-child(4){display:block !important;grid-column:3/5;grid-row:2;white-space:normal;}
    #albumInfoPanel:not([hidden]) .track-row > span:nth-child(5){display:block !important;grid-column:2;grid-row:2;}
    #albumInfoPanel:not([hidden]) .track-row > a:nth-child(6){display:block !important;grid-column:2;grid-row:3;align-self:center;}
    #albumInfoPanel:not([hidden]) .track-row > .btn-outline{display:inline-flex !important;grid-column:3/5;grid-row:3;justify-self:start;}
    #albumInfoPanel:not([hidden]) .track-row > span:last-child{grid-column:4;grid-row:1;}
    #albumInfoPanel:not([hidden]) .track-details.track-details-vertical-system{
      margin:0 12px 0 60px !important;
    }

    #collection{padding-top:64px !important;padding-bottom:64px !important;}
    #collection .poster-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;}
    #collection .poster-tile:nth-child(n){transform:none;}
    #collection .poster-tile:nth-child(2n+2){transform:translateY(34px);}
    #collection .collection-scroll{height:430px;padding:14px;}

    .use-case-grid,
    .licensing-grid{grid-template-columns:minmax(0,1fr) !important;}
    .use-case-grid > div,
    .licensing-grid > div{min-width:0;padding:24px 20px !important;}
    .custom-license-badge{position:static !important;display:inline-block;margin-bottom:14px;}

    body.player-active{padding-bottom:238px;}
    .mini-player{
      left:12px !important;
      right:12px !important;
      width:auto !important;
      bottom:12px;
      padding:11px 0;
      transform:none !important;
    }
    .mini-player > .wrap{
      position:relative;
      grid-template-columns:minmax(0,1fr) !important;
      grid-template-rows:auto auto auto;
      gap:10px !important;
      padding-left:14px !important;
      padding-right:14px !important;
    }
    .mini-player-identity{grid-row:1;min-width:0;padding-right:34px;}
    .mini-player-center{grid-row:2;}
    .mini-player-actions{
      grid-row:3;
      justify-content:center !important;
      flex-wrap:wrap;
    }
    .mini-player .player-progress{width:min(100%,300px) !important;}
    .mini-player .pill{min-width:40px;min-height:36px;padding:7px 10px;}
    .mini-player-close{position:absolute;top:0;right:8px;margin:0;}

    .footer-sitemap{grid-template-columns:1fr !important;}
    .footer-brand{grid-column:auto;}
    .footer-business-info{padding-top:18px;}
  }

  @media (prefers-reduced-motion:reduce){
    *,*::before,*::after{
      scroll-behavior:auto !important;
      transition-duration:.01ms !important;
      animation-duration:.01ms !important;
      animation-iteration-count:1 !important;
    }
  }

  /* Responsive v2 rebuild — component states approved for 1440 / 1280 / 1024 / 768 / 390.
     v80 note: .fq-mobile-search / .fq-mobile-menu-toggle / .fq-mobile-drawer / .fq-mobile-nav are
     the RETIRED v76 mobile header controls. They and their ≤767px block below never render since
     v77 (display:none!important next to #fqMobileShellHost); the v40 mobile shell replaces them.
     Kept for reference only — safe to delete together with the drawer script near the end. */
  .fq-mobile-search,
  .fq-mobile-menu-toggle,
  .fq-mobile-drawer,
  .fq-mobile-nav{display:none;}

  /* Responsive v3 — keep the existing 768 tablet treatment below Webflow's
     Desktop boundary. At 992px and above, the full eight-destination Desktop
     navigation remains visible. */
  @media (min-width:768px) and (max-width:991px){
    .fq-masthead-v41{grid-template-columns:1fr auto 1fr;gap:32px;}
    .fq-header-search{width:min(100%,360px);margin-right:0;}
    .fq-primary-v41{display:grid;grid-template-columns:1fr auto 1fr;column-gap:24px;}
    .fq-primary-group{display:flex;align-items:center;min-width:0;}
    .fq-primary-group--left{justify-content:flex-start;gap:22px;}
    .fq-primary-group--right{justify-content:flex-end;gap:24px;}
    .fq-primary-group--genres{display:none;}
    #collection .poster-tile{min-height:280px;}
  }

  /* Responsive v3 — narrow Desktop navigation (including the 1024 reference).
     Each label keeps its natural width while the remaining row space is shared
     evenly. Search, wordmark, type sizing, masthead controls, and every section
     below the header retain their v2 values. */
  @media (min-width:992px) and (max-width:1100px){
    .fq-primary-v41{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:0;
    }
    .fq-primary-group{display:contents;}
    .fq-primary-group--genres{display:contents;}
  }

  @media (max-width:767px){
    body{padding-bottom:72px;}
    .fq-header-v40{background:var(--overlay-header);}
    .fq-masthead-v41{grid-template-columns:44px 1fr 44px;}
    .fq-center-logo{grid-column:2;}
    .fq-account-row{display:none;}
    .fq-mobile-search,.fq-mobile-menu-toggle{display:grid;place-items:center;width:44px;height:44px;border:0;background:transparent;color:var(--text);font:inherit;cursor:pointer;}
    .fq-mobile-search{grid-column:1;grid-row:1;font-size:20px;text-decoration:none;}
    .fq-mobile-menu-toggle{grid-column:3;grid-row:1;font-size:21px;}
    .fq-primary-v41{display:none;}
    .fq-header-v40{border-bottom:1px solid var(--line);}
    .fq-header-v40::before{display:none;}
    .home-hero{padding-top:64px !important;}

    .fq-mobile-drawer{position:fixed;z-index:44;inset:64px 0 0;background:rgba(1,4,14,.985);padding:22px 18px 100px;overflow:auto;}
    .fq-mobile-drawer.is-open{display:block;}
    .fq-mobile-drawer__search{display:flex;align-items:center;min-height:48px;padding:0 14px;border:1px solid var(--line);border-radius:var(--radius-control);background:var(--surface);}
    .fq-mobile-drawer__search input{width:100%;border:0;outline:0;background:transparent;color:var(--text);font:14px 'Schibsted Grotesk',sans-serif;}
    .fq-mobile-drawer__links{display:grid;margin-top:22px;border-top:1px solid var(--line);}
    .fq-mobile-drawer__links a{display:flex;align-items:center;justify-content:space-between;min-height:52px;border-bottom:1px solid var(--line);color:var(--text-dim);text-decoration:none;font-family:'Cormorant SC',serif;font-size:16px;text-transform:uppercase;}
    .fq-mobile-drawer__links a::after{content:'→';color:var(--text-faint);}

    .fq-mobile-nav{display:grid;position:fixed;z-index:47;left:10px;right:10px;bottom:10px;grid-template-columns:repeat(5,1fr);min-height:58px;padding:4px;border:1px solid rgba(133,153,184,.25);border-radius:18px;background:var(--overlay-header);backdrop-filter:blur(16px);box-shadow:0 16px 42px rgba(0,0,0,.44);}
    .fq-mobile-nav a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:var(--text-faint);text-decoration:none;font-size:9px;letter-spacing:.04em;text-transform:uppercase;}
    .fq-mobile-nav a span:first-child{font-size:17px;line-height:1;}
    .fq-mobile-nav a.is-active{color:var(--text);background:var(--surface);border-radius:14px;}

    .section{padding-top:68px !important;padding-bottom:68px !important;}
    .section-title{font-size:30px;line-height:1.1;}
    .section-sub{margin-bottom:34px;}
    #collection .collection-card-ui{opacity:0;}
    #collection .poster-tile.is-active .collection-card-ui,
    #collection .poster-tile:focus-within .collection-card-ui,
    #collection .poster-tile.is-playing .collection-card-ui,
    #collection .poster-tile.is-saved .collection-card-ui{opacity:1;}
  }

  /* Responsive v15 — header revision derived directly from approved v13.
     1) Remove both full-width header rules.
     2) Reduce JOIN US to text only, including hover/focus states.
     3) Match all eight lower navigation labels to the resting JOIN US / CART tone. */
  .fq-header-v40{
    border-bottom:0 !important;
  }
  .fq-header-v40::before{
    display:none !important;
  }
  .fq-masthead-v41 .fq-account-row .fq-join,
  .fq-masthead-v41 .fq-account-row .fq-join:hover,
  .fq-masthead-v41 .fq-account-row .fq-join:focus-visible{
    width:auto;
    min-width:0;
    height:auto;
    min-height:0;
    padding:4px 0;
    border:0 !important;
    border-radius:0;
    background:transparent !important;
    box-shadow:none !important;
  }
  .fq-primary-v41 .fq-index-link{
    color:var(--text-dim);
  }

  /* Responsive v16 — search field correction.
     Match the desktop field width to its 440px suggestion panel and reuse the exact
     Standard License card surface for the field interior in every pointer/focus state. */
  .fq-header-search{
    width:min(100%,440px);
  }
  .fq-header-search__field,
  .fq-header-search:hover .fq-header-search__field,
  .fq-header-search:focus-within .fq-header-search__field{
    background:var(--surface);
  }

  /* Responsive v17 — remove only the requested CTA outlines.
     Preserve the existing surfaces, typography, sizing and soft elevation shadows. */
  #albumInfoToggle,
  #albumInfoToggle:hover,
  #albumInfoToggle[aria-expanded="true"]{
    border:0 !important;
  }
  #collection .collection-closing .secondary-cta,
  .licensing-grid .secondary-cta{
    border:0 !important;
    box-shadow:0 8px 20px rgba(0,0,0,.12) !important;
  }
  #collection .collection-closing .secondary-cta:hover,
  .licensing-grid .secondary-cta:hover{
    border:0 !important;
    box-shadow:0 10px 24px rgba(0,0,0,.16) !important;
  }

  /* v18 — button pass (approved Color System Audit v5 tokens only).
     Scope: Explore the collection / 30s Highlight / License album $149 (dimension + press
     feedback; hover stays motionless per the existing rule, no lift, per request), plus
     Album Info and the two Licensing-section buttons (resting-state contrast only).
     Untouched: Search the collection, Replace with album, every track License — $29 button,
     and the is-listening / album-license-added states (guarded via :not()). */
  #heroHighlightToggle:not(.is-listening),
  #albumLicenseButton:not(.album-license-added),
  a.btn-primary[href="/search"]{
    background:linear-gradient(180deg, var(--accent-hover) 0%, var(--accent) 100%) !important;
    box-shadow:0 8px 24px rgba(23,104,200,.22), inset 0 1px 0 rgba(255,255,255,.14) !important;
  }
  #heroHighlightToggle:not(.is-listening):hover,
  #albumLicenseButton:not(.album-license-added):hover,
  a.btn-primary[href="/search"]:hover{
    background:linear-gradient(rgba(255,255,255,.07), rgba(255,255,255,.07)),
      linear-gradient(180deg, var(--accent-hover) 0%, var(--accent) 100%) !important;
    box-shadow:
      0 0 0 1px rgba(23,104,200,.3),
      0 0 20px rgba(23,104,200,.4),
      0 10px 28px rgba(23,104,200,.24),
      inset 0 1px 0 rgba(255,255,255,.18) !important;
  }
  #heroHighlightToggle:not(.is-listening):active,
  #albumLicenseButton:not(.album-license-added):active,
  a.btn-primary[href="/search"]:active{
    transform:scale(.97) !important;
    transition:transform .08s ease !important;
    box-shadow:0 4px 14px rgba(23,104,200,.26), inset 0 1px 0 rgba(255,255,255,.1) !important;
  }

  #albumInfoToggle,
  .licensing-grid > div:nth-child(1) > .secondary-cta,
  .licensing-grid > div:nth-child(2) > .secondary-cta{
    background:var(--surface-hover) !important;
    border:0 !important;
    box-shadow:none !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    color:var(--text-dim) !important;
  }
  #albumInfoToggle:hover,
  #albumInfoToggle[aria-expanded="true"],
  .licensing-grid > div:nth-child(1) > .secondary-cta:hover,
  .licensing-grid > div:nth-child(2) > .secondary-cta:hover{
    background:var(--line) !important;
    color:var(--text) !important;
  }

  /* v19 — restrained card rounding and licensing-card alignment. */
  .use-case-grid > div,
  .licensing-grid > div{
    border-radius:5px;
  }


  /* v20 -- Quiet Accent Tint (approved Color System Audit v5 tokens only) applied to
     Album Info, Search the collection, View full terms and Contact us.
     Base: --accent-surface fill + black drop-shadow for elevation.
     Hover: Accent-wash layer (rgba(23,104,200,.18)) over the same base, brighter text.
     Album Info's pressed/open state (aria-expanded=true) intentionally reverts to the
     original flat / no-shadow look (--surface fill + 1px --line) instead of an inset shadow.
     Untouched: Explore the collection, 30s Highlight, License album $149, every track
     License -- $29 button, Replace with album, Keep individual tracks -- nothing else touched. */
  #albumInfoToggle,
  #collection .collection-closing .secondary-cta,
  .licensing-grid > div:nth-child(1) > .secondary-cta,
  .licensing-grid > div:nth-child(2) > .secondary-cta{
    background:var(--accent-surface) !important;
    border:0 !important;
    box-shadow:0 4px 14px rgba(0,0,0,.3) !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    color:var(--text-dim) !important;
    transition:background .18s ease, color .18s ease, box-shadow .18s ease !important;
  }
  #albumInfoToggle:hover,
  #collection .collection-closing .secondary-cta:hover,
  .licensing-grid > div:nth-child(1) > .secondary-cta:hover,
  .licensing-grid > div:nth-child(2) > .secondary-cta:hover{
    background:linear-gradient(0deg, rgba(23,104,200,.18), rgba(23,104,200,.18)), var(--accent-surface) !important;
    color:var(--text) !important;
    box-shadow:0 6px 18px rgba(0,0,0,.34) !important;
  }

  #albumInfoToggle[aria-expanded="true"]#albumInfoToggle,
  #albumInfoToggle[aria-expanded="true"]:hover#albumInfoToggle{
    background:var(--surface) !important;
    box-shadow:inset 0 0 0 1px var(--line) !important;
    color:var(--text-dim) !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }

  /* Responsive v22 — Section 3 card-only integration.
     Source: approved Frequenoir_Poster_Card_Interaction_Study_v22, Search-page variant.
     The existing homepage grid, stagger, tray, copy, album data and mini-player remain unchanged. */
  #collection .poster-tile:hover,
  #collection .poster-tile:focus-within,
  #collection .poster-tile.is-playing,
  #collection .poster-tile.is-saved,
  #collection .poster-tile.is-active{
    border-color:rgba(238,241,246,.14);
  }
  #collection .collection-genre{
    top:14.6px;
    left:14.6px;
    width:auto;
    height:19.2px;
    min-height:19.2px;
    max-width:calc(100% - 112px);
    padding:0;
    background:transparent;
  }
  #collection .collection-genre:hover,
  #collection .collection-genre:focus-visible{
    background:transparent;
  }
  #collection .collection-genre::after{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:max(44px,100%);
    height:44px;
  }
  #collection .collection-save{
    top:14.6px;
    right:14.6px;
    width:50.4px;
    height:19.2px;
    min-width:50.4px;
    padding:0;
    display:flex;
    align-items:center;
    justify-content:center;
    border:0;
    background:rgba(3,11,23,.66);
    color:var(--text-dim);
    text-transform:none;
    transition:background .2s ease,color .2s ease;
  }
  #collection .collection-save:hover{
    color:var(--text);
    border:0;
    background:rgba(35,116,213,.88);
  }
  #collection .poster-tile.is-saved .collection-save{
    color:var(--text-faint);
    border:0;
    background:rgba(3,11,23,.52);
  }
  #collection .poster-tile.is-saved .collection-save:hover{
    color:var(--text-dim);
    border:0;
    background:rgba(9,24,44,.64);
  }
  #collection .collection-save::after{
    content:"";
    position:absolute;
    top:0;
    right:0;
    width:100%;
    height:44px;
  }
  #collection .collection-play{
    left:14.6px;
    bottom:14.6px;
    width:57.6px;
    height:57.6px;
    padding:0;
    display:grid;
    place-items:center;
    overflow:hidden;
    isolation:isolate;
    appearance:none;
    -webkit-appearance:none;
    background-color:transparent;
    border:0;
    border-radius:50%;
    background-image:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='playGrain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23playGrain)'/%3E%3C/svg%3E"),
      linear-gradient(135deg,rgba(238,241,246,.22) 0%,rgba(238,241,246,.04) 100%);
    background-blend-mode:overlay,normal;
    backdrop-filter:blur(3px) saturate(1.1);
    -webkit-backdrop-filter:blur(3px) saturate(1.1);
    box-shadow:
      inset 0 0 3px rgba(255,255,255,.4),
      inset 0 0 1.5px rgba(0,0,0,.16),
      0 8px 20px rgba(0,3,9,.3);
    transform:translateZ(0);
    transition:transform .38s cubic-bezier(.34,1.56,.64,1),background-image .3s ease,box-shadow .3s ease;
  }
  #collection .collection-play:hover{
    transform:translateY(-2px) scale(1.055);
    border:0;
    background-color:transparent;
    box-shadow:
      inset 0 0 3px rgba(255,255,255,.55),
      inset 0 0 1.5px rgba(0,0,0,.16),
      0 12px 26px rgba(0,3,9,.4);
  }
  #collection .poster-tile.is-playing .collection-play{
    border:0;
    background-color:transparent;
    background-image:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='playGrain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23playGrain)'/%3E%3C/svg%3E"),
      linear-gradient(135deg,rgba(35,116,213,.18) 0%,rgba(35,116,213,.06) 100%);
    background-blend-mode:overlay,normal;
    box-shadow:
      inset 0 0 3px rgba(255,255,255,.38),
      inset 0 0 1.5px rgba(0,0,0,.18),
      0 8px 20px rgba(0,3,9,.3);
  }
  #collection .poster-tile.is-playing .collection-play:hover{
    transform:translateY(-2px) scale(1.055);
    box-shadow:
      inset 0 0 3px rgba(255,255,255,.55),
      inset 0 0 1.5px rgba(0,0,0,.18),
      0 12px 26px rgba(0,3,9,.4);
  }
  #collection .collection-play::before{
    z-index:2;
  }
  #collection .poster-tile.is-playing .collection-play::before{
    transform:translate(-50%,-50%);
  }
  #collection .collection-play::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:1;
    pointer-events:none;
    background:var(--text);
    mix-blend-mode:screen;
    -webkit-mask-image:linear-gradient(-45deg,rgba(0,0,0,1) 0%,rgba(0,0,0,0) 72%);
    mask-image:linear-gradient(-45deg,rgba(0,0,0,1) 0%,rgba(0,0,0,0) 72%);
    opacity:0;
    transition:opacity .5s ease-out;
  }
  #collection .collection-play.is-snapping{
    transform:scale(1.09);
  }
  #collection .collection-play.is-snapping::after{
    opacity:1;
    transition:opacity .06s ease-in;
  }
  #collection .collection-info{
    right:14.6px;
    bottom:14.6px;
    width:36px;
    height:36px;
    padding:0;
    border:0;
    background:rgba(3,11,23,.52);
    color:var(--text-dim);
    font-weight:400;
    text-transform:none;
    transition:color .2s ease,transform .2s ease;
  }
  #collection .collection-info:hover{
    color:var(--text);
    border:0;
    transform:translateY(-2px);
  }
  /* Responsive v48 — Section 3 changes from the desktop hover card to the approved
     v22 Mobile · Search card at the Tablet boundary. Coarse/no-hover devices receive
     the same behavior even when landscape width happens to exceed that breakpoint. */
  @media (max-width:991px), (hover:none), (pointer:coarse){
    #collection .poster-tile::after{opacity:1;}
    #collection .poster-tile.is-active img{
      transform:scale(1.018);
      filter:saturate(.88) brightness(.74);
    }
    #collection .collection-card-ui{opacity:1;}
    #collection .collection-genre{
      top:10.3px;
      left:10.3px;
      width:calc(100% - 75px);
      height:19.2px;
      min-height:19.2px;
      max-width:calc(100% - 75px);
      padding:0;
    }
    #collection .collection-save{
      top:10.3px;
      right:10.3px;
      width:50.4px;
      height:19.2px;
      min-width:50.4px;
      padding:0;
    }
    #collection .collection-play{
      left:10.3px;
      bottom:10.3px;
      width:42px;
      height:42px;
    }
    #collection .collection-play::before{
      transform:translate(-50%,-50%) scale(.75);
    }
    #collection .poster-tile.is-playing .collection-play::before{
      transform:translate(-50%,-50%) scale(.75);
    }
    #collection .collection-info{display:none;}
  }

  /* Responsive v35 — stabilized in-row tablet menu replacement, 768–985px. */
  .fq-tablet-menu-toggle,
  .fq-tablet-workspace,
  .fq-primary-v41 .fq-tablet-license{display:none;}

  @media (min-width:768px) and (max-width:985px){
    .fq-primary-v41{
      position:relative;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:0;
    }
    .fq-primary-group--left{
      display:flex;
      align-items:center;
      justify-content:flex-start;
      gap:0;
    }
    .fq-primary-group--left .fq-index-link:not(:first-child),
    .fq-primary-group--right{display:none;}
    .fq-primary-group--genres{
      position:absolute;
      left:50%;
      top:0;
      transform:translateX(-50%);
      display:flex;
      align-items:center;
      justify-content:center;
      gap:38px;
      min-height:52px;
      white-space:nowrap;
      opacity:1;
      pointer-events:auto;
      transition:opacity 200ms var(--ease-standard);
    }
    .fq-primary-group--genres .fq-index-link{
      min-height:52px;
      font-size:16px;
    }
    .fq-tablet-workspace{
      position:absolute;
      left:50%;
      top:0;
      transform:translateX(-50%);
      display:flex;
      align-items:center;
      justify-content:center;
      gap:38px;
      min-height:52px;
      white-space:nowrap;
      opacity:0;
      pointer-events:none;
      transition:opacity 200ms var(--ease-standard);
    }
    .fq-tablet-workspace .fq-index-link,
    .fq-primary-v41 .fq-tablet-license{
      min-height:52px;
      font-size:16px;
    }
    .fq-primary-v41 .fq-tablet-license{
      position:absolute;
      left:var(--fq-tablet-license-left,auto);
      top:0;
      display:flex;
      align-items:center;
      justify-content:flex-start;
      white-space:nowrap;
      opacity:0;
      pointer-events:none;
      transition:opacity 200ms var(--ease-standard);
    }
    .fq-primary-v41.is-tablet-menu-open .fq-primary-group--genres{
      opacity:0;
      pointer-events:none;
    }
    .fq-primary-v41.is-tablet-menu-open .fq-tablet-workspace,
    .fq-primary-v41.is-tablet-menu-open .fq-tablet-license{
      opacity:1;
      pointer-events:auto;
    }
    .fq-tablet-menu-toggle{
      display:flex;
      align-items:center;
      justify-content:flex-end;
      width:44px;
      height:44px;
      margin-left:auto;
      padding:0;
      border:0;
      background:transparent;
      color:var(--text-dim);
      cursor:pointer;
    }
    .fq-tablet-menu-toggle:hover,
    .fq-tablet-menu-toggle:focus-visible{color:var(--text);}
    .fq-tablet-menu-toggle:focus-visible{
      outline:1px solid var(--accent-soft);
      outline-offset:2px;
    }
    .fq-tablet-menu-icon{
      display:block;
      width:24px;
      height:24px;
      overflow:visible;
      transform:translateX(3px);
    }
    .fq-tablet-menu-glyph{
      transform-box:view-box;
      transform-origin:12px 12px;
      transition:opacity 200ms var(--ease-standard),transform 200ms var(--ease-standard);
    }
    .fq-tablet-menu-glyph--menu{
      opacity:1;
      transform:rotate(0deg);
    }
    .fq-tablet-menu-glyph--close{
      opacity:0;
      transform:rotate(-90deg);
    }
    .fq-primary-v41.is-tablet-menu-open .fq-tablet-menu-glyph--menu{
      opacity:0;
      transform:rotate(90deg);
    }
    .fq-primary-v41.is-tablet-menu-open .fq-tablet-menu-glyph--close{
      opacity:1;
      transform:rotate(0deg);
    }
  }

  /* v32 treated 986–991px as Tablet; v35 preserves the complete Desktop row from 986px. */
  @media (min-width:986px) and (max-width:991px){
    .fq-primary-v41{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:0;
    }
    .fq-primary-group,
    .fq-primary-group--genres{display:contents;}
  }

  /* Responsive v36 — general homepage content stays inside the shared system rail.
     Only explicitly marked page-content wrappers participate. Reused .wrap instances inside
     the mini-player and album/track panels retain their existing component-specific geometry. */
  @media (min-width:768px) and (max-width:1279px){
    .page-content-rail{
      padding-left:clamp(var(--gutter-reading),calc(640px - 50vw),var(--gutter-system)) !important;
      padding-right:clamp(var(--gutter-reading),calc(640px - 50vw),var(--gutter-system)) !important;
    }
  }

  /* Responsive v37 — Section 1 uses one semantic copy set at every breakpoint. The two wrappers
     are boxless above 900px and below 768px, preserving v36; only the compact tablet range assigns
     them to the media and information rows. */
  .featured-media-stage{position:absolute;inset:0;}
  .featured-media-copy,
  .featured-card-info{display:contents;}

  @media (min-width:768px) and (max-width:900px){
    .hero-slide{
      display:grid;
      grid-template-columns:minmax(0,1fr);
      grid-template-rows:auto auto;
      aspect-ratio:auto !important;
      background-color:var(--card) !important;
      background-size:0 0 !important;
    }
    .featured-media-stage{
      position:relative;
      inset:auto;
      grid-column:1;
      grid-row:1;
      aspect-ratio:16/9;
      min-width:0;
      background-image:inherit;
      background-position:inherit;
      background-size:cover;
      background-repeat:no-repeat;
    }
    .featured-copy{display:contents !important;}
    .featured-media-copy{
      position:relative;
      z-index:2;
      display:block;
      grid-column:1;
      grid-row:1;
      align-self:end;
      min-width:0;
      padding:0 28px 28px;
    }
    .featured-media-copy > p{margin-bottom:0 !important;}
    .featured-card-info{
      position:relative;
      z-index:2;
      display:block;
      grid-column:1;
      grid-row:2;
      min-width:0;
      padding:24px 28px 28px;
      background:var(--card);
    }
    .featured-actions{
      display:flex;
      align-items:center;
      flex-wrap:wrap;
      gap:20px !important;
    }

  }

  /* Responsive v41 — rebuilt from the approved v39 track rows. Semantic groups preserve the
     desktop presentation. display:contents keeps the original eight desktop axes intact; the
     two responsive modes below turn those wrappers into stable vertical control groups. */
  #albumInfoPanel:not([hidden]) .track-control-stack,
  #albumInfoPanel:not([hidden]) .track-time-save{
    display:contents;
  }
  #albumInfoPanel:not([hidden]) .track-row > span:first-child{grid-column:1;grid-row:1;}
  #albumInfoPanel:not([hidden]) .track-play{grid-column:2;grid-row:1;}
  #albumInfoPanel:not([hidden]) .track-row > div:nth-child(3){grid-column:3;grid-row:1;}
  #albumInfoPanel:not([hidden]) .track-row > span:nth-child(4){grid-column:4;grid-row:1;}
  #albumInfoPanel:not([hidden]) .track-duration{grid-column:5;grid-row:1;}
  #albumInfoPanel:not([hidden]) .track-save{grid-column:6;grid-row:1;}
  #albumInfoPanel:not([hidden]) .track-row > .btn-outline{grid-column:7;grid-row:1;}
  #albumInfoPanel:not([hidden]) .track-row > span:last-child{grid-column:8;grid-row:1;}
  #albumInfoPanel:not([hidden]) .track-play{
    width:38px;
    height:38px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--accent-surface);
    color:var(--accent-soft) !important;
    font-size:13px !important;
    box-shadow:inset 0 0 0 1px var(--line-strong);
    transition:background .15s ease,color .15s ease,transform .15s ease;
    user-select:none;
  }
  #albumInfoPanel:not([hidden]) .track-play:hover{
    background:var(--accent) !important;
    color:var(--text-on-accent) !important;
    transform:scale(1.04);
  }
  #albumInfoPanel:not([hidden]) .track-play svg{
    width:13px;
    height:13px;
    fill:currentColor;
    display:block;
  }
  #albumInfoPanel:not([hidden]) .track-play[title="Pause"]{
    background:var(--accent);
    color:var(--text-on-accent) !important;
    box-shadow:0 6px 18px rgba(0,63,148,.25);
  }
  #albumInfoPanel:not([hidden]) .track-row:has(.track-play[title="Pause"]){
    background:var(--surface-hover);
  }
  #albumInfoPanel:not([hidden]) .track-duration{
    color:var(--text-receded) !important;
    font-size:11px !important;
    white-space:nowrap;
    text-align:center;
  }
  #albumInfoPanel:not([hidden]) .track-save{
    color:var(--text-ui) !important;
    text-decoration:none !important;
    font-size:11px !important;
    white-space:nowrap;
    text-align:center;
    transition:color .15s ease,font-weight .15s ease;
  }
  #albumInfoPanel:not([hidden]) .track-save:hover{color:var(--text) !important;}
  #albumInfoPanel:not([hidden]) .track-row:has(.track-play[title="Pause"]) .track-duration{
    color:var(--accent-soft) !important;
    font-weight:600 !important;
  }
  #albumInfoPanel:not([hidden]) .track-row:has(.track-play[title="Pause"]) .track-save{
    color:var(--text-dim) !important;
    font-weight:500 !important;
  }
  #albumInfoPanel:not([hidden]) .track-row .track-save.save-feedback.is-saved,
  #albumInfoPanel:not([hidden]) .track-row:has(.track-play[title="Pause"]) .track-save.save-feedback.is-saved{
    color:var(--text-receded) !important;
    font-weight:400 !important;
  }

  /* One line-only chevron at every width. The SVG carries its own paint attributes, so desktop
     rendering can never fall back to a filled black polygon before a media query is applied. */
  #albumInfoPanel:not([hidden]) .track-details-toggle svg{
    display:block;
    width:12px;
    height:7px;
    margin:auto;
    fill:none;
    stroke:currentColor;
    stroke-width:1.5;
    stroke-linecap:round;
    stroke-linejoin:round;
    pointer-events:none;
  }

  /* The approved eight-column desktop row remains intact. Only its flexible copy column is allowed
     to absorb the final 40px before the 980px compact breakpoint, keeping the last cell inside. */
  @media (min-width:981px) and (max-width:1020px){
    #albumInfoPanel:not([hidden]) .track-row{
      grid-template-columns:20px 44px minmax(0,1fr) minmax(180px,210px) 48px 58px 122px 24px;
    }
  }

  /* Tablet/mobile hit areas are independent from the approved visible faces. */
  @media (max-width:980px){
    #albumInfoPanel:not([hidden]) .track-play{
      position:relative;
      width:38px;
      height:38px;
    }
    #albumInfoPanel:not([hidden]) .track-play::after{
      content:"";
      position:absolute;
      left:50%;
      top:50%;
      width:44px;
      height:44px;
      border-radius:50%;
      transform:translate(-50%,-50%);
      background:transparent;
      pointer-events:auto;
    }
    #albumInfoPanel:not([hidden]) .track-save{
      position:relative;
    }
    #albumInfoPanel:not([hidden]) .track-save::before{
      content:"";
      position:absolute;
      left:0;
      top:0;
      width:100%;
      height:44px;
      background:transparent;
      pointer-events:auto;
    }
    #albumInfoPanel:not([hidden]) .track-time-save > .track-save{
      height:22px;
      min-height:22px;
      display:flex;
      align-items:center;
      justify-content:center;
      line-height:1.2;
    }
    #albumInfoPanel:not([hidden]) .track-row > .btn-outline{
      position:relative;
      height:28.5px;
      min-height:0;
      padding:0 12px !important;
      border:0 !important;
      box-shadow:none !important;
      transform:none !important;
    }
    #albumInfoPanel:not([hidden]) .track-row > .btn-outline::after{
      content:"";
      position:absolute;
      left:50%;
      top:50%;
      width:116px;
      height:44px;
      transform:translate(-50%,-50%);
      background:transparent;
      pointer-events:auto;
    }
    #albumInfoPanel:not([hidden]) .track-row > .track-license-feedback.is-added,
    #albumInfoPanel:not([hidden]) .track-row:hover > .track-license-feedback.is-added,
    #albumInfoPanel:not([hidden]) .track-row > .track-license-feedback.is-added:hover,
    #albumInfoPanel:not([hidden]) .track-row:has(.track-play[title="Pause"]) > .track-license-feedback.is-added,
    #albumInfoPanel:not([hidden]) .track-row > .track-license-feedback.is-included{
      border:0 !important;
      box-shadow:none !important;
      transform:none !important;
    }
    #albumInfoPanel:not([hidden]) .track-details-toggle{
      width:44px;
      min-width:44px;
      height:44px;
      min-height:44px;
      display:flex !important;
      align-items:center;
      justify-content:center;
      line-height:1;
    }
  }

  /* Tablet and wide mobile: number / play / text / duration+save / license / details. */
  @media (min-width:701px) and (max-width:980px){
    #albumInfoPanel:not([hidden]) .track-row{
      grid-template-columns:18px 10px 44px 10px minmax(0,1fr) 23px 46px 23px 116px 18px 24px !important;
      grid-template-rows:auto auto !important;
      column-gap:0 !important;
      row-gap:6px !important;
      min-width:0;
      min-height:104px;
      padding:14px 12px !important;
    }
    #albumInfoPanel:not([hidden]) .track-row > span:nth-child(1){
      grid-column:1;
      grid-row:1 / span 2;
      align-self:center;
    }
    #albumInfoPanel:not([hidden]) .track-control-stack{
      display:contents !important;
    }
    #albumInfoPanel:not([hidden]) .track-play{
      grid-column:3;
      grid-row:1 / span 2;
      align-self:center;
      justify-self:center;
    }
    #albumInfoPanel:not([hidden]) .track-row > div:nth-child(3){
      grid-column:5;
      grid-row:1;
      min-width:0;
      align-self:end;
    }
    #albumInfoPanel:not([hidden]) .track-row > div:nth-child(3) > p{max-width:100%;}
    #albumInfoPanel:not([hidden]) .track-row > span:nth-child(4){
      display:block !important;
      grid-column:5;
      grid-row:2;
      min-width:0;
      align-self:start;
      white-space:normal;
    }
    #albumInfoPanel:not([hidden]) .track-time-save{
      display:flex !important;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      gap:4px;
      grid-column:7;
      grid-row:1 / span 2;
      align-self:center;
      justify-self:center;
      width:46px;
      min-width:46px;
    }
    #albumInfoPanel:not([hidden]) .track-time-save > .track-duration,
    #albumInfoPanel:not([hidden]) .track-time-save > .track-save{
      width:46px;
      display:flex;
      align-items:center;
      justify-content:center;
      line-height:1.2;
    }
    #albumInfoPanel:not([hidden]) .track-time-save > .track-duration{
      height:22px;
      min-height:22px;
    }
    #albumInfoPanel:not([hidden]) .track-row > .btn-outline{
      display:inline-flex !important;
      grid-column:9;
      grid-row:1 / span 2;
      align-self:center;
      align-items:center;
      justify-content:center;
      width:116px;
      min-width:116px;
      white-space:nowrap;
    }
    #albumInfoPanel:not([hidden]) .track-row > span:last-child{
      display:flex !important;
      grid-column:11;
      grid-row:1 / span 2;
      align-self:center;
      justify-self:center;
    }
    #albumInfoPanel:not([hidden]) .track-details.track-details-vertical-system,
    #albumInfoPanel:not([hidden]) #track01Details.track-details-vertical-prototype{
      margin:0 44px 0 92px !important;
      padding:12px 0 !important;
      min-width:0;
    }
    #albumInfoPanel .track-item-featured.is-expanded > .track-details::before{
      left:-92px;
      right:-44px;
    }
  }

  /* Responsive v42 — narrow mobile rows share one three-row grid. The left controls and their
     corresponding right-side content therefore move together when a logline wraps, while every
     approved visible control keeps the v41 dimensions. */
  @media (max-width:700px){
    #albumInfoPanel:not([hidden]) .track-row{
      grid-template-columns:18px 10px 52px 23px minmax(0,1fr) 8px 44px !important;
      grid-template-rows:auto 22px 28.5px !important;
      column-gap:0 !important;
      row-gap:10px !important;
      min-width:0;
      min-height:0;
      padding:14px 6px !important;
    }
    #albumInfoPanel:not([hidden]) .track-row > span:nth-child(1){
      grid-column:1;
      grid-row:1;
      align-self:end;
      justify-self:center;
      width:18px;
      height:38px;
      display:flex;
      align-items:center;
      justify-content:center;
    }
    #albumInfoPanel:not([hidden]) .track-control-stack,
    #albumInfoPanel:not([hidden]) .track-time-save{
      display:contents !important;
    }
    #albumInfoPanel:not([hidden]) .track-play{
      grid-column:3;
      grid-row:1;
      align-self:end;
      justify-self:center;
    }
    #albumInfoPanel:not([hidden]) .track-duration,
    #albumInfoPanel:not([hidden]) .track-save{
      width:52px;
      min-width:52px;
      display:flex;
      align-items:center;
      justify-content:center;
      justify-self:center;
      line-height:1.2;
    }
    #albumInfoPanel:not([hidden]) .track-duration{
      grid-column:3;
      grid-row:2;
      align-self:center;
      height:22px;
      min-height:22px;
    }
    #albumInfoPanel:not([hidden]) .track-save{
      grid-column:3;
      grid-row:3;
      align-self:center;
      height:22px;
      min-height:22px;
    }
    #albumInfoPanel:not([hidden]) .track-save::before{
      top:50%;
      transform:translateY(-50%);
    }
    #albumInfoPanel:not([hidden]) .track-row > div:nth-child(3){
      grid-column:5;
      grid-row:1;
      min-width:0;
      align-self:stretch;
    }
    #albumInfoPanel:not([hidden]) .track-row > div:nth-child(3) > p:last-child{
      white-space:normal;
      overflow-wrap:break-word;
      max-width:100%;
    }
    #albumInfoPanel:not([hidden]) .track-row > span:nth-child(4){
      display:block !important;
      grid-column:5;
      grid-row:2;
      min-width:0;
      align-self:center;
      white-space:normal;
    }
    #albumInfoPanel:not([hidden]) .track-row > .btn-outline{
      display:inline-flex !important;
      grid-column:5;
      grid-row:3;
      align-self:center;
      justify-self:start;
      align-items:center;
      justify-content:center;
      width:116px;
      min-width:116px;
      white-space:nowrap;
    }
    #albumInfoPanel:not([hidden]) .track-row > span:last-child{
      display:flex !important;
      grid-column:7;
      grid-row:1 / span 3;
      align-self:center;
      justify-self:center;
    }

    /* Expanded copy uses the exact same 103px label/control rail as the closed row:
       18px number + 10px gap + 52px control + 23px gap. */
    #albumInfoPanel:not([hidden]) .track-details.track-details-vertical-system,
    #albumInfoPanel:not([hidden]) #track01Details.track-details-vertical-prototype{
      margin:0 6px !important;
      padding:12px 0 !important;
      min-width:0;
    }
    #albumInfoPanel:not([hidden]) .track-details .track-detail-row > .label{
      min-width:0;
      text-align:right;
      white-space:nowrap;
    }
    #albumInfoPanel:not([hidden]) .track-details .track-detail-row > p:not(.label){
      min-width:0;
      overflow-wrap:break-word;
    }

    /* Responsive v43 — the disclosure owns its background and the expanded item owns its divider.
       Both now participate in normal layout, so the following row's interaction plane begins only
       after the expanded content and its closing rule have ended. */
    #albumInfoPanel .track-item-featured.is-expanded{
      border-bottom:1px solid var(--line) !important;
    }
    #albumInfoPanel .track-item-featured.is-expanded > .track-details::before{
      left:0 !important;
      right:0 !important;
      bottom:0 !important;
    }
    #albumInfoPanel .track-item-featured.is-expanded > .track-details::after{
      content:none !important;
      display:none !important;
    }
    #albumInfoPanel > .wrap > div:last-child > .track-item-featured:last-child.is-expanded{
      border-bottom:0 !important;
    }
  }

  /* Preserve the existing mobile selectors after the semantic wrappers were introduced. */
  @media (max-width:767px){
    .featured-media-copy > h2{font-size:34px !important;line-height:1.12;}
    .featured-media-copy > p{font-size:18px !important;margin-bottom:16px !important;}
    .featured-card-info > .featured-synopsis{font-size:13px !important;line-height:1.55 !important;margin-bottom:20px !important;}
    .featured-actions{flex-wrap:wrap;gap:12px !important;}
  }

  /* Responsive v47 — Section 3 album-grid density.
     Keep the approved 240px card ceiling, move from four desktop columns to three tablet
     columns, then to the approved v22 two-column phone study. The narrow-phone tray bleeds
     through the page gutter so its 16px tray inset + 10px gap reproduces the v22 393px frame:
     (393 - 32 - 10) / 2 = 175.5px per card. */
  #collection .poster-grid{
    grid-template-columns:repeat(4,minmax(0,240px));
    justify-content:center;
  }

  @media (min-width:768px) and (max-width:991px){
    #collection .poster-grid{
      grid-template-columns:repeat(3,minmax(0,240px));
      justify-content:center;
      gap:20px;
    }
    #collection .poster-tile:nth-child(n){transform:none;}
    #collection .poster-tile:nth-child(3n+2){transform:translateY(48px);}
    #collection .poster-tile:nth-child(3n+3){transform:translateY(96px);}
  }

  @media (max-width:767px){
    #collection .poster-grid{
      grid-template-columns:repeat(2,minmax(0,240px));
      justify-content:center;
      gap:14px;
    }
  }

  @media (max-width:560px){
    #collection .collection-scroll-shell{
      margin-inline:calc(var(--gutter-reading) * -1);
      border-radius:0;
    }
    #collection .collection-scroll{padding:16px;}
    #collection .poster-grid{gap:10px;}
  }

  /* Responsive v50 — Footer sitemap only.
     Preserve the approved six-column Desktop composition while it fits the shared rail,
     then reduce progressively to three and two columns. These late rules intentionally
     replace the legacy Mobile one-column override without changing footer content or type. */
  @media (max-width:1020px){
    .footer-sitemap{
      grid-template-columns:repeat(3,minmax(0,1fr)) !important;
      column-gap:30px;
      row-gap:38px;
    }
    .footer-brand{grid-column:1 / -1;}
  }

  @media (max-width:620px){
    .footer-sitemap{
      grid-template-columns:repeat(2,minmax(0,1fr)) !important;
      column-gap:24px;
      row-gap:34px;
    }
    .footer-brand{grid-column:1 / -1;}
  }

  /* Responsive v51 regression stabilization.
     Keep the approved Mobile mini-player geometry intact, but position it above the existing
     58px bottom navigation instead of allowing the two fixed surfaces to overlap.
     v80 note: RETIRED — #miniPlayer is hidden at ≤767px since v77; the v40 shell's mini bar /
     compact row own that range. Rule kept for reference, it has no effect. */
  @media (max-width:767px){
    .mini-player{bottom:76px;}
  }

  /* Bottom mini-player shell. Its desktop list trigger opens the untouched v14
     standalone document above the bar. (v80: the former "mobile ×" close path is retired —
     ≤767px is handled by the v40 shell, whose mini bar opens the full-screen Audition Player.) */
  .mini-player-save-star,
  .mini-player-list-icon{display:none;}
  .mini-player-save-text,
  .mini-player-mobile-close{display:inline;}
  .mini-version-actions{display:contents;}

  @media (min-width:768px){
    body.player-active{padding-bottom:122px;}

    .mini-player{
      --mini-action-button:44px;
      --mini-action-icon:24px;
      left:50% !important;
      right:auto !important;
      width:min(calc(100% - 80px),1280px) !important;
      max-width:1280px;
      height:98px;
      padding-block:15px;
      transform:translateX(-50%) !important;
    }

    .mini-player > .wrap{
      position:relative;
      display:grid !important;
      width:100%;
      max-width:none;
      min-width:0;
      height:66px;
      grid-template-columns:minmax(0,240px) minmax(0,1fr) auto !important;
      gap:0 !important;
      padding-left:28px !important;
      padding-right:17px !important;
    }

    .mini-player-identity{
      position:relative;
      grid-column:1;
      width:240px;
      max-width:240px;
      min-width:0;
      gap:14px !important;
      padding:0;
    }
    .mini-player-identity > div{
      flex:1 1 auto;
      width:calc(100% - 48px);
      min-width:0;
    }
    .mini-player-identity p,
    .mini-player-identity a{
      display:block;
      min-width:0;
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
    }
    .mini-player-artwork-link{
      display:block !important;
      flex:0 0 34px;
      width:34px;
    }

    .mini-player-center{
      position:absolute;
      z-index:1;
      top:50%;
      left:50%;
      width:clamp(222.359375px,calc(100vw - 763.640625px),300px);
      min-width:222.359375px;
      transform:translate(-50%,-50%);
    }
    .mini-player .transport-icons{gap:0 !important;}
    .mini-player .mini-transport{
      width:44px;
      min-width:44px;
      height:44px;
      min-height:44px;
    }
    .mini-player .player-progress{
      width:100% !important;
      min-width:0;
      margin-inline:auto;
    }
    .mini-player .player-progress > div{min-width:160px;}

    .mini-player-actions{
      position:relative;
      z-index:2;
      grid-column:3;
      display:grid !important;
      grid-template-columns:204px 8px 44px 2px 44px;
      grid-template-rows:44px;
      gap:0 !important;
      width:302px;
      min-width:302px;
      max-width:302px;
      height:44px;
      align-items:center;
      justify-items:center;
      justify-self:end;
    }
    .mini-version-actions{
      grid-column:1;
      grid-row:1;
      display:flex;
      flex:0 0 204px;
      width:204px;
      min-width:204px;
      height:44px;
      gap:8px;
      align-items:center;
      margin:0;
    }
    .mini-player .mini-version-actions .pill,
    .mini-player .mini-version-actions .pill[data-version="Full"]{
      position:relative;
      display:grid;
      place-items:center;
      flex:0 0 45px;
      width:45px;
      min-width:45px;
      max-width:45px;
      height:44px;
      min-height:44px;
      padding:0;
      border:0 !important;
      border-radius:0;
      background:transparent !important;
    }
    .mini-player-pill-face{
      display:grid;
      place-items:center;
      width:45px;
      height:25px;
      min-width:45px;
      min-height:25px;
      border:1px solid var(--accent-surface);
      border-radius:999px;
      background:transparent;
      color:inherit;
      pointer-events:none;
    }
    .mini-player .pill.active .mini-player-pill-face{
      border-color:transparent;
      background:var(--accent-surface);
      color:var(--accent-soft);
    }
    .mini-player .pill:hover,
    .mini-player .pill:focus-visible{background:transparent !important;}
    .mini-player .pill:not(.active):focus-visible .mini-player-pill-face{
      border-color:var(--accent-soft);
      color:var(--text-dim);
    }

    #miniPlayerSave{
      grid-column:3;
      grid-row:1;
    }
    .mini-player-close{
      grid-column:5;
      grid-row:1;
    }
    #miniPlayerSave,
    .mini-player-close{
      position:relative;
      isolation:isolate;
      display:grid;
      place-items:center;
      width:var(--mini-action-button);
      min-width:var(--mini-action-button);
      max-width:var(--mini-action-button);
      height:var(--mini-action-button);
      min-height:var(--mini-action-button);
      max-height:var(--mini-action-button);
      margin:0;
      padding:0;
      border:0;
      border-radius:50%;
      background:transparent !important;
      color:var(--text-dim);
      cursor:pointer;
      transform:none !important;
    }
    #miniPlayerSave::before,
    .mini-player-close::before{
      content:"";
      position:absolute;
      z-index:-1;
      top:50%;
      left:50%;
      width:31px;
      height:31px;
      border-radius:50%;
      background:transparent;
      transform:translate(-50%,-50%);
      pointer-events:none;
    }
    #miniPlayerSave:hover,
    #miniPlayerSave:focus-visible,
    .mini-player-close:hover,
    .mini-player-close:focus-visible{
      color:var(--text);
      outline:none;
    }
    #miniPlayerSave:hover::before,
    #miniPlayerSave:focus-visible::before,
    .mini-player-close:hover::before,
    .mini-player-close:focus-visible::before{
      background:rgba(151,187,224,.06);
    }
    #miniPlayerSave.is-saved{color:var(--accent-soft);}
    #miniPlayerSave > *,
    .mini-player-close > *{
      position:relative;
      z-index:1;
    }

    .mini-player-save-star,
    .mini-player-list-icon{
      display:block;
      width:var(--mini-action-icon);
      min-width:var(--mini-action-icon);
      max-width:var(--mini-action-icon);
      height:var(--mini-action-icon);
      min-height:var(--mini-action-icon);
      max-height:var(--mini-action-icon);
      overflow:visible;
      transform:none !important;
      justify-self:center;
      align-self:center;
    }
    .mini-player-save-star path{
      fill:transparent;
      stroke:currentColor;
      stroke-linecap:round;
      stroke-linejoin:round;
      stroke-width:1.63px;
      transition:fill .15s ease,color .15s ease;
    }
    #miniPlayerSave.is-saved .mini-player-save-star path{fill:currentColor;}
    .mini-player-list-icon{
      fill:none;
      stroke:currentColor;
      stroke-width:1.61px;
      stroke-linecap:round;
      stroke-linejoin:round;
    }
    .mini-player-save-text,
    .mini-player-mobile-close{display:none;}
  }

  @media (hover:hover) and (pointer:fine) and (min-width:768px){
    .mini-player .pill:not(.active):hover .mini-player-pill-face{
      border-color:var(--accent-soft);
      color:var(--text-dim);
    }
  }

  @media (min-width:768px) and (max-width:956px){
    body.player-active{padding-bottom:124px;}
    .mini-player{
      height:100px;
      padding-block:4px;
    }
    .mini-player > .wrap{
      height:90px;
      grid-template-columns:minmax(0,240px) minmax(0,1fr) 204px !important;
      align-items:center;
    }
    .mini-player-identity{
      width:clamp(215px,calc(100vw - 629px),240px);
      max-width:clamp(215px,calc(100vw - 629px),240px);
      align-self:center;
    }
    .mini-player-center{
      top:50%;
      left:50%;
      transform:translate(-50%,-50%);
    }
    .mini-player-actions{
      grid-template-columns:114px 44px 2px 44px;
      grid-template-rows:44px 46px;
      width:204px;
      min-width:204px;
      max-width:204px;
      height:90px;
    }
    .mini-version-actions{
      position:static;
      grid-column:1 / -1;
      grid-row:2;
      align-self:center;
      width:204px;
      min-width:204px;
      height:44px;
      transform:none;
    }
    #miniPlayerSave{
      grid-column:2;
      grid-row:1;
    }
    .mini-player-close{
      grid-column:4;
      grid-row:1;
    }
  }

  @media (max-width:767px){
    .mini-player-save-star,
    .mini-player-list-icon{display:none !important;}
    .mini-player-save-text,
    .mini-player-mobile-close{display:inline;}
  }

/* v76: retains the v73 Panel Close Samples v1 / Fade only interaction.
     Both opening and closing change opacity for 160ms; position, size,
     color and v14 content never transform. */
  /* v76: the panel takes the mini-player's floating-glass surface — the same
     1px --line outline, rgba(9,24,44,.64) tint, 20px backdrop blur and drop
     shadow declared on .mini-player. The embedded v14 document makes its own
     page/player planes transparent when framed (see its v76 embed block), so
     this surface shows through; its text, icon and highlight colors are the
     module's own and are not restyled here. The outline is drawn by ::after
     instead of a real border so the 390 × 432 box, the iframe inside it and
     the positioning math stay exactly as they were. */
  .web-tracklist-panel{
    position:fixed;
    z-index:31;
    width:390px;
    min-width:390px;
    max-width:390px;
    height:432px;
    min-height:432px;
    max-height:432px;
    overflow:hidden;
    border-radius:18px;
    background:rgba(9,24,44,.64);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    box-shadow:0 18px 48px rgba(0,0,0,.48);
    opacity:0;
    pointer-events:none;
    transition:opacity .16s ease;
  }
  .web-tracklist-panel::after{
    content:"";
    position:absolute;
    inset:0;
    border:1px solid var(--line);
    border-radius:18px;
    pointer-events:none;
    z-index:1;
  }
  .web-tracklist-panel.is-visible{opacity:1;pointer-events:auto;}
  .web-tracklist-panel[hidden]{display:none!important;}
  @media (prefers-reduced-motion:reduce){
    .web-tracklist-panel{transition-duration:0s;}
  }
  .web-tracklist-panel iframe{
    display:block;
    width:390px;
    height:432px;
    border:0;
  }
  /* In unusually short windows the fixed panel can overlap the bar. Keep its
     close trigger reachable without changing either component's dimensions. */
  .mini-player.is-tracklist-open{z-index:32;}
  .mini-player-desktop-close-icon{display:none;}
  /* The v14 bookmark keeps --color-text-ui (#838DA4) even when filled.
     The mini-player action is reversible, so the cursor must stay active. */
  #miniPlayerSave.is-saved,
  #miniPlayerSave.is-saved:hover,
  #miniPlayerSave.is-saved:focus-visible{
    color:var(--color-text-ui);
    cursor:pointer;
  }
  @media (min-width:768px){
    /* v14's icon-only surface and .46s spring, without moving the action columns. */
    #miniPlayerSave::before,.mini-player-close::before{display:none!important;}
    #miniPlayerSave.pop,.mini-player-close.pop{animation:mini-action-icon-pop .46s ease-out;}
    @keyframes mini-action-icon-pop{
      0%{scale:1}
      45%{scale:1.14}
      75%{scale:.97}
      100%{scale:1}
    }
    /* Match v14's two 44px action columns and their 21px/23px icon glyphs.
       The version controls and the rest of the mini-player do not move. */
    #miniPlayerSave,.mini-player-close{translate:-2px 0;}
    #miniPlayerSave .mini-player-save-star{
      width:21px;min-width:21px;max-width:21px;
      height:21px;min-height:21px;max-height:21px;
      translate:5.5px 0;
    }
    #miniPlayerSave .mini-player-save-star path{stroke-width:1.5px;}
    .mini-player-close .mini-player-list-icon{
      width:23px;min-width:23px;max-width:23px;
      height:23px;min-height:23px;max-height:23px;
      translate:-.5px 0;
    }
    /* Exact two strokes of ICONS/13_close.svg, inline so currentColor remains
       visible. At 15px, scale the original 24px stroke to a visible 1.5px line
       matching the other action outlines. */
    .mini-player-desktop-close-icon{
      width:15px;
      height:15px;
      translate:-.5px 0;
      fill:none;
      stroke:currentColor;
      stroke-width:2.4px;
      stroke-linecap:round;
      stroke-linejoin:round;
    }
    .mini-player-close.is-tracklist-open .mini-player-list-icon{display:none;}
    .mini-player-close.is-tracklist-open .mini-player-desktop-close-icon{display:block;}
  }
  @media (max-width:767px){
    .web-tracklist-panel{display:none!important;}
    .mini-player-desktop-close-icon{display:none!important;}
  }

  /* v83 — Section 3 column rule (decided 2026-09-15): card width is the constant 240px of Poster
     Card Study v22; the number of columns is what fits. Tray inner width is viewport − 128px from
     768 to 1279px, so: 2 columns ≤ 887px, 3 columns 888–1147px (3 × 240 + 2 × 20 = 760),
     4 columns ≥ 1148px (4 × 240 + 3 × 20 = 1020). These override the device-class rules above
     (v47: 3 from 768, 4 from 992) without touching phone widths (≤ 767px keep the v22 frame,
     their 14px / 10px gaps and the 34px two-column stagger). Each band restates its own stagger
     so the Pinterest offsets always match the live column count. Gaps: 2-column band reuses the
     phone 14px; 3- and 4-column bands keep the existing 20px (24px from 1280px, unchanged). */
  @media (min-width:768px) and (max-width:887px){
    #collection .poster-grid{
      grid-template-columns:repeat(2,minmax(0,240px));
      justify-content:center;
      gap:14px;
    }
    #collection .poster-tile:nth-child(n){transform:none;}
    #collection .poster-tile:nth-child(2n+2){transform:translateY(34px);}
  }
  @media (min-width:888px) and (max-width:1147px){
    #collection .poster-grid{
      grid-template-columns:repeat(3,minmax(0,240px));
      justify-content:center;
      gap:20px;
    }
    #collection .poster-tile:nth-child(n){transform:none;}
    #collection .poster-tile:nth-child(3n+2){transform:translateY(48px);}
    #collection .poster-tile:nth-child(3n+3){transform:translateY(96px);}
  }
  @media (min-width:1148px){
    #collection .poster-grid{
      grid-template-columns:repeat(4,minmax(0,240px));
      justify-content:center;
    }
    #collection .poster-tile:nth-child(n){transform:none;}
    #collection .poster-tile:nth-child(4n+2){transform:translateY(48px);}
    #collection .poster-tile:nth-child(4n+3){transform:translateY(96px);}
    #collection .poster-tile:nth-child(4n+4){transform:translateY(24px);}
  }

  /* v77 mobile-shell replacement: preserve the responsive homepage body, but retire
     the old mobile-only header, drawer, nav, and closable desktop mini-player. */
  #fqMobileShellHost{display:none}
  @media (max-width:767px){
    #fqMobileShellHost{display:block;position:relative;z-index:1000;height:0;pointer-events:none}
    .fq-header-v40,.fq-mobile-drawer,.fq-mobile-nav,#miniPlayer{display:none!important}
    body.has-track{padding-bottom:132px}
    html.locked{overflow:hidden}
    body.locked{position:fixed;left:0;right:0;width:100%;overflow:hidden}
  }